让页面中的js实现同步加载
来源:互联网 发布:qt软件打包 编辑:程序博客网 时间:2024/06/03 19:25
前一段时间看一本《高性能网站建设进阶指南》这本书,提到页面中的js并不是同步加载的,这就会导致如果几个js文件是互为牵制的话,可能会造成有未读取到的js没有及时生成元素而报错的问题,而今天也是在网上看到了一篇叫做js同步加载最佳实践的文章,提出了一个能把多个js文件实现同步加载的最佳的办法。
1.方法思路:
a.在页面底部添加一个叫做first的js文件,这个文件里有一个loadScript的方法,这个方法有两个参数一个是url,另一个是返回函数,而这个loadjs的方法则是通过XMLHttpRequest对象readyState的五个状态来为页面添加含有src属性的script代码。
b.在页面中调用这个first.js文件,并在页面底部调用这个方法,需要添加几个js就调用几次。
2.方法代码:
a.编写first.js的loadScript的方法
b.在页面内调用这个脚本文件,并执行loadScript的方法
3.直接把js写在head之间和同步加载的效果对比
同步加载js效果:
直接把js写在head之间效果:
注:
1.关于这篇加载 Javascript 最佳实践请参考这个地址《加载 Javascript 最佳实践》。
2.loadScript用到的XMLHttpRequest的一些readyStae状态的知识,请参考为之漫笔(李松峰)先生blog的一篇文章,有详细的讲解
《readyState的五种状态详解》
- 让页面中的js实现同步加载
- js实现加载页面
- js 让页面重新加载一次
- 让页面加载完成后执行js
- js实现页面加载动画
- 如何让页面加载js之后,在显示页面
- js实现一个长页面中的图片懒加载即滚动到其位置才加载
- js实现让页面只刷新一次
- JS实现让页面返回顶部
- JS实现让页面返回顶部
- JS 实现页面加载完成判断
- JS实现页面下拉动态加载
- js实现页面加载的等待效果
- js实现页面加载颜色渐变进度条
- js,jqueryajax实现页面加载等待效果
- 实现页面加载完成后执行js
- js实现加载公共html页面
- 让页面加载前执行js等事件(1)
- OD常用断点
- C++中string类
- C++命名空间
- ZT 30岁以后才明白
- 排序一个list数组中的元素
- 让页面中的js实现同步加载
- notepad exercise 1
- QSqlDatabase类详细介绍
- Swing表格JTable利用tableModel添加行修改行删除行
- openCV学习笔记(9)-- 图像剪切
- 如何解决.net环境下的软件无法运行
- Windows 内核原理与实现 - 读书笔记
- java 安全 加密 小解
- 用Java Serialization实现任意文件网络传输