web页面中js程序执行的时间线

在请求的html页面返回到客户端后，web页面和其引入的脚本会按照下面的时间线进行解析和执行。本文重点解释js程序的执行，不对页面的渲染过程进行分析。
该时间包含如下7个阶段：1. web浏览器创建Document对象，并且开始解析web页面，这个阶段document.readystate的值为loading。2. 当html解析器遇到没有defer 和 async属性的script标签时，把script元素加入到文档，然后执行脚本。脚本同步执行，在下载和执行脚本的时候会阻塞html的解析。脚本可以通过document.write()把文本插入到输入流中，当html解析器继续执行时，文本会添加到文档中。脚本执行时可以访问自己的script元素和之前构建的dom树。3. 当html解析器遇到有async属性的script标签时，脚本开始下载，并在下载完成后尽快执行。该过程不阻塞解析器的执行，并且脚本内禁止使用document.write()。脚本可以访问自己的script标签和它之前的的dom树。4. 文档解析完成时，document.readystate的值变为interactive。5. 此时，含有defer属性的脚本按照它们在文档中的的出现顺序执行，此时也可能有异步脚本执行。脚本可以访问完成的dom树，并且禁止使用document.write()；6. Document对象上触发DOMContentloaded事件，标志着程序执行从脚本同步执行阶段到了异步事件驱动阶段。此时可能还有异步脚本没有执行完成。7. 文档解析全部完成，但是浏览器可能还在等待其他资源的载入，如图片等。当所有资源载入完成、异步脚本执行完成时，document.readystate的值变为completed，window对象上触发load事件。8. 从此以后，调用异步事件，响应用户输入、网络事件、计时器过期等。

犀牛书读书笔记-客户端javascript时间线相关推荐

犀牛书读书笔记-01
第一章,概述这章是综述性质的,作者随意的给出了一些例子. 1. visibility = hidden, display = none. function hide (e, reflow) {if ...
《机器学习》(周志华)西瓜书读书笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言第1章绪论第2章模型评估与选择第3章线性模型第4章决策树第5章神经网络第6章神经网络第7章贝 ...
花书读书笔记（十一）-应用
全部笔记的汇总贴:<深度学习>花书-读书笔记汇总贴一.大规模深度学习快速的 CPU 实现 GPU 实现:是为图形应用而开发的专用硬件组件. 大规模的分布式实现:数据并行.模型并行.异步 ...
红宝书读书笔记第八章
对象.类与面向对象编程属性的类型内部属性用两个中括号如[ [ Enumerable ] ] 开发者不能直接访问数据属性数据属性:数据属性包含一个保存数据值的位置.值会从这个位置读取,也会写入到 ...
《Java: The Complete Reference》等书读书笔记
春节期间读了下<Java: The Complete Reference>发现这本书写的深入浅出,我想一个问题,书中很多内容我们也知道,但是为什么我们就写不出这样一本书,这么全面,这么系统 ...
犀牛书第2章 JavaScript词法结构
程序设计语言的词法结构是一套基本规则,用来详细说明如何使用这种语言来编写程序.它是一种语言的最低层次的语法,指定了变量名是什么样的,注释应该使用什么字符以及语句之间如何分隔等规则. 1. 字符集: J ...
java犀牛书_犀牛书学习笔记（1）：语法结构、数据类型和值、表达式和运算符...
把这三个部分写在一起,是因为这些和JAVA几乎相同,如果你有JAVA或者C的基础,可以快速阅读.这里只记录几个不一样的,需要记住的地方: 1.直接量概念:其实就是用具体值直接赋值来创建变量,比如&qu ...
20220509数据结构绿书读书笔记
20220509 数据结构读书笔记全书目录如下 1.编程原则 2.栈 3.队列 4.链栈&队列 5.回溯 6.列表和串 7.搜索 8.排序 9.表格与信息检索 10.二叉树 11.多叉树 1 ...
java犀牛书_犀牛书学习笔记（9）：继承
OOP的特性之一就是继承,只有实现了继承的语言才能称之为OOP,本篇将说明javasctipt如何使用继承. 原型.构造函数和对象中的基于原型的继承概念虽然本地对象都继承自Object,但实际上,可 ...

犀牛书读书笔记-客户端javascript时间线

web页面中js程序执行的时间线

犀牛书读书笔记-客户端javascript时间线相关推荐

最新文章

热门文章