异步脚本
来源:互联网 发布:最终幻想14神优化 编辑:程序博客网 时间:2024/06/02 00:15
一个包含外部样式表文件和一个脚本文件的HTML载入和渲染过程:
1.浏览器下载HTML文件并开始解析DOM;
2.遇到外部样式表文件时,将其加入资源文件下载队列,继续解析DOM;
3.遇到脚本文件时,暂停DOM解析,立即下载脚本文件;
4.下载结束后立即执行脚本,在脚本中可访问当前<script>以上的DOM;
5,脚本执行完成后,继续解析DOM;
6,整个DOM解析完成后,触发DOMcontentload事件。
浏览器的在遇到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事件。
- 从此刻起,会调用异步事件,以异步响应用户输入事件,网络事件,计算器过期等。
0 0
- 异步脚本
- 异步脚本
- 延迟脚本/异步脚本
- 延迟脚本和异步脚本
- asterisk-1.6异步脚本
- 耦合异步脚本
- php 异步执行脚本
- 64. 整合异步脚本
- 异步的脚本加载
- loadScript异步加载脚本函数
- php异步执行shell脚本
- 关于异步加载script脚本
- 深入理解JS异步编程五(脚本异步加载)
- PHP开启异步多线程执行脚本
- 实用技巧:使用 jQuery 异步加载 JavaScript 脚本
- 实用技巧:使用 jQuery 异步加载 JavaScript 脚本
- PHP语言实现脚本异步执行
- PHP异步执行后台的脚本命令
- 计算机学习层次划分第二阶段技能:面向团队:协同开发:合作【人协】属性
- 堆排序(模版)
- Maven手动添加JAR 包到本地仓库
- android.mk 文件 这个先存下来 在看
- 宏函数
- 异步脚本
- 蓝桥杯嵌入式输入捕获
- S2.3_Struts2_ActionGetInputFormData Action动作类接收用户输入表单数据的3种实现方式
- JavaIO流基础学习
- php对多维数组的某个键值排序方法
- Java 环境搭建 —— Git 从无到有
- mac自带计算器 进制转换
- Eclipse一点击右键就卡死
- bzoj 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 动态规划