前端之家收集整理的这篇文章主要介绍了
javascript按顺序加载运行js方法,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_4030@首先如果大家对JS动态加载有不理解的地方可以参阅:
@H
403_0@<a target="_blank" href="//www.jb51.cc/article/31113.htm">javascript动态加载实现方法
@H_
403_0@如何你的 script 上没有任何 异步,阻塞 等标注:
@H_
403_0@浏览器会异步加载 javascript
文件,但是会按照引用
文件中的书写顺序从上到下执行解析 javascript
@H_
403_0@
@H_
403_0@defer是html4.0中定义的,该
属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。
@H_
403_0@也就是说defer
属性的 script 就类似于将 script 放在body中的加载
效果一致.
@H_
403_0@但是defer
属性在各个浏览器中
支持程度有点不同,就是说,有的浏览器不完全
支持.
@H_
403_0@
Async属性标注
@H_
403_0@async是HTML5新增的
属性, 大部分先进
支持该
属性的.
该
属性的作用是让脚本能异步加载,也就是说当浏览器遇到async
属性的 script 时浏览器加载css一样是异步加载的
@H_
403_0@
javascript 动态加载js文件
@H_
403_0@原理很简单,创建一个 script 节点,给节点赋予 script 的
属性,然后 append 到 dom 的 head
标签中.
@H_
403_0@如果我们同时加载多个 javascript
文件
@H_
403_0@上面的
效果是,a.js 和 b.js
文件会被异步同时加载,如果 b.js
文件比 a.js
文件小的话,很可能先加载执行 b.js,完全不会按照书写结果加载执行
@H_
403_0@所以,如果你的 b.js
文件有依赖 a.js 的东西,那么就会报错,因为解释执行b.js 的时候,a.js 还在加载中.
@H_
403_0@控制javascript 加载执行顺序
@H_
403_0@我们对
代码做如下改进
@H_
403_0@通过script 节点上的 onload 和 onreadystatechange
属性来监听节点 src 是否加载完成
@H_
403_0@如果成功,
调用回调
函数 success();
@H_
403_0@我们在
调用此
方法的时候,可以通过 loadJS 回调
函数来知道当前节点已经加载完成,然后在回调
函数里继续加载其他 script
文件
@H_
403_0@通过上面的
方法加载,是一种同步阻塞加载,a.js 加载完成后才会加载执行 b.js
文件.
@H_
403_0@如果你的 javascript
文件没有相互依赖关系,不要使用这种
方法.