JavaScript 加载顺序和异步加载详解
2016-06-23 10:02
309 查看
首先,看下面代码,当执行html文件时候,首先会加载哪一个JS?
根据JavaScript的API说明,async属性是,立即下载script,一旦脚本可用,则会异步执行。理论上的结果是当运行到demo1.js的时候,立即下载和异步先执行demo1.js。
但是,测试结果显示,是先执行demo2.js。为什么呢?(结果就不粘贴出来了,自己去测试一下,绝对是这个效果。)
原来,这个异步加载的方式并不是我们想象中的那样子,先看下面的<script> 标签引入脚本的三种情况:
立即执行
顺序:保证先后顺序。解析:HTML 解析器遇到它们时,将阻塞(取停止解析),待脚本下载完成并执行后,继续解析标签之后的文档。
推迟执行
顺序:保证先后顺序。解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载),待文档解析完成之后,执行脚本。
尽快执行
顺序:不保证先后顺序。解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载,一旦下载完成,立即执行它),并继续解析之后的文档。
这个加载循序就个非阻塞的概念有关联了,总结来说就是,当<script>标签存在async/defer的时候,这个script将调用非阻塞异步加载方式,所谓的非阻塞异步加载方式,用第一个例子来说明,当执行到<script src="demo1.js" async></script> 这一行代码的时候,把demo1.js挂起,异步加载demo1.js,继续运行下面的代码,就是运行<script src="demo2.js"></script>,而异步加载完demo1.js后,立即执行(defer和async
的区别就是,async异步加载完立即执行,defer异步加载完延迟执行)
<script type="text/javascript" src="demo1.js" async></script> <script type="text/javascript" src="demo2.js"></script>
根据JavaScript的API说明,async属性是,立即下载script,一旦脚本可用,则会异步执行。理论上的结果是当运行到demo1.js的时候,立即下载和异步先执行demo1.js。
但是,测试结果显示,是先执行demo2.js。为什么呢?(结果就不粘贴出来了,自己去测试一下,绝对是这个效果。)
原来,这个异步加载的方式并不是我们想象中的那样子,先看下面的<script> 标签引入脚本的三种情况:
立即执行
<script src="demo1.js"> <script src="demo2.js">
顺序:保证先后顺序。解析:HTML 解析器遇到它们时,将阻塞(取停止解析),待脚本下载完成并执行后,继续解析标签之后的文档。
推迟执行
<script defer src="demo1.js"> <script defer src="demo2.js">
顺序:保证先后顺序。解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载),待文档解析完成之后,执行脚本。
尽快执行
<script async src="demo1.js"> <script async src="demo2.js">
顺序:不保证先后顺序。解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载,一旦下载完成,立即执行它),并继续解析之后的文档。
这个加载循序就个非阻塞的概念有关联了,总结来说就是,当<script>标签存在async/defer的时候,这个script将调用非阻塞异步加载方式,所谓的非阻塞异步加载方式,用第一个例子来说明,当执行到<script src="demo1.js" async></script> 这一行代码的时候,把demo1.js挂起,异步加载demo1.js,继续运行下面的代码,就是运行<script src="demo2.js"></script>,而异步加载完demo1.js后,立即执行(defer和async
的区别就是,async异步加载完立即执行,defer异步加载完延迟执行)
相关文章推荐
- jseclipse 是eclipse插件,让你编写js代码感觉更爽
- javascript新窗口打开链接window.open()被阻拦的解决办法
- jackson json 转list/map
- Javascript 数组循环遍历之forEach
- Extjs中的迭代方法
- 关于js在html中执行顺序的问题
- js中遍历Map对象
- 键盘上回车按钮的js触发事件
- jsp的运行机制
- JSON数据类型的修改
- js文字闪烁效果
- 10+ 实用的 JavaScript 调试小技巧
- jsp输出金字塔的简单实例
- js拼接HTML页面
- jsp输出九九乘法表的简单实例
- jsp输出当前时间的实现代码
- 每日十条JavaScript经验技巧(二)
- 每日十条JavaScript经验技巧(一)
- arcgis api for js共享干货系列之一自写算法实现地图量算工具
- js == 与 === 的区别[转]