js script加载
2016-08-06 09:46
169 查看
浏览器的在遇到defer和async属性的<script>的浏览器执行过程如下(以下摘自javascript权威指南):
WEB浏览器创建Document对象,并且开始解析WEB页面,解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。这个过程的readystate的属性值是“loading”
当HTML解析器遇到没有async和defer属性的<script>时,它把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为在它们执行时已经存在了。这样同步脚本可以看到他自己的<script>元素和它们之前的文档内容
当解析器遇到了设置async属性的<script>元素时,它开始下载脚本,并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器没有停下来等他下载。异步脚本禁止document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容。
当文档完成解析,document.readyState属性变成“interactive”。
所有有defer属性的脚本,会被它们在文档的里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树,禁止使用document.write()方法。
浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转到异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成。
这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性变为“complete”,WEB浏览器出发Window对象上的load事件。
从此刻起,会调用异步事件,以异步响应用户输入事件,网络事件,计算器过期等。
了解浏览器在遇到async、defer属性的脚本执行顺序,我们可以利用这两个属性来改善JS的阻塞问题,使用这两个属性会有几种可能的情况:
defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoaded事件之前执行完成。
async为true:异步加载脚本,下载完毕后再执行,在window的load事件之前执行完成
利用这两个属性异步加载js,还得了解它们的毛病:
使用defer属性,最好是外部的script
使用defer、async的脚本禁止使用document.write()方法
当脚本尝试访问的样式属性可能尚未加载的样式表时,浏览器会禁止该脚本等待样式表加载完成,这等于样式表阻塞了脚本的执行。所以使用defer、async的脚本最好不要请求样式信息时。
WEB浏览器创建Document对象,并且开始解析WEB页面,解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。这个过程的readystate的属性值是“loading”
当HTML解析器遇到没有async和defer属性的<script>时,它把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为在它们执行时已经存在了。这样同步脚本可以看到他自己的<script>元素和它们之前的文档内容
当解析器遇到了设置async属性的<script>元素时,它开始下载脚本,并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器没有停下来等他下载。异步脚本禁止document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容。
当文档完成解析,document.readyState属性变成“interactive”。
所有有defer属性的脚本,会被它们在文档的里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树,禁止使用document.write()方法。
浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转到异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成。
这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性变为“complete”,WEB浏览器出发Window对象上的load事件。
从此刻起,会调用异步事件,以异步响应用户输入事件,网络事件,计算器过期等。
JS异步加载
了解浏览器在遇到async、defer属性的脚本执行顺序,我们可以利用这两个属性来改善JS的阻塞问题,使用这两个属性会有几种可能的情况:defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoaded事件之前执行完成。
async为true:异步加载脚本,下载完毕后再执行,在window的load事件之前执行完成
利用这两个属性异步加载js,还得了解它们的毛病:
使用defer属性,最好是外部的script
使用defer、async的脚本禁止使用document.write()方法
当脚本尝试访问的样式属性可能尚未加载的样式表时,浏览器会禁止该脚本等待样式表加载完成,这等于样式表阻塞了脚本的执行。所以使用defer、async的脚本最好不要请求样式信息时。
相关文章推荐
- 如何使用狐火浏览器调试js
- 用JS写的一个Ajax库(实例代码)
- JS 一个修改ul的小示例
- JS获取和修改元素样式的实例代码
- 记住markdown 简明语法 2分钟熟练
- 关于JavaScript数组,你所不知道的3件事
- JSON解析_JSONKit
- JSTL 、 OGNL 与 EL
- Electron-快速上手
- js延迟函数
- jstl c
- using JSTL
- js 设置回车事件
- js get 传参 汉字 乱码问题
- js set
- js date string parse
- 一篇文章教你学会使用ext js
- 关于JavaScript数组,你所不知道的3件事
- js统计字符串中每个字符出现的次数
- 【BZOJ4289】Tax,堆优化dijsktra的最短路问题