js时间线问题_纹心｀的博客-程序员秘密

说js时间线之前先简单的思考一下html页面的渲染过程
在这里插入图片描述

js是逐行运行的解释性单线程语言

那么运行代码则会出现一些先后顺序，这些顺序组成的流程就成了时间线。

DOM树在加载过程中一共有三种阶段：

DOM加载过程中——document.readyState = ‘loading’
DOM加载完成——document.readyState = ‘interactive’
所有文件加载并下载完成——document.readyState = ‘complete’，此时window触发onload事件

document.onreadystatechange = function(){
    
	console.log(document.readyState);
}

这三个阶段有一个详细的过程

document.readyState= 'loading’

创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。
遇到link外部css，创建线程加载，并继续解析文档

遇到script外部js，并且没有设置async、defer，阻塞，等待js加载完成并执行该脚本，然后继续解析文档

（并发过程：）遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档。禁止使用doucument.write
async属性的脚本，脚本加载完成后立即执行。
defter属性的脚本==丢置尾部。

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行。

遇到img等，浏览器创建线程加载，并继续解析文档。
document.readyState = 'interactive’

文档已解析完成(dom树已经绘制完成) 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同）

document对象触发DOMContentLoaded事件
document.readyState = 'complete’

当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件。禁止使用doucument.write
以异步响应方式处理用户输入、网络事件等。

本文链接：https://blog.csdn.net/qq_45165908/article/details/102395720

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

poj3083_Children of the Candy Corn__上善若水_的博客-程序员秘密

Children of the Candy CornTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 8508 Accepted: 3729DescriptionThe cornfield maze is a popular Halloween treat. V

多线程中传参错误，以及'list' object is not callable错误解决方法_Goom_y的博客-程序员秘密

最近编写一个多线程爬取的小脚本，遇到’list’ object is not callable这个错误，发觉不对，我并没有list的这个函数啊，怎么会出现这个错误呢，于是Google大法，发现问题所在，在此将解决问题的过程记录下，方便以后查看。错误代码如下：file = open('1.txt','r')threads = []for line in file: thread = thr

FPGA EMMC HS400模式verilog驱动开发_hs400协议_FPGA_Linuxer的博客-程序员秘密

待更新。。

蓝桥杯 ALGO-22算法训练数的划分_蓝桥杯数的划分_柳婼的博客-程序员秘密

问题描述　　将整数n分成k份，且每份不能为空，任意两份不能相同(不考虑顺序)。　　例如：n=7，k=3，下面三种分法被认为是相同的。　　1，1，5; 1，5，1; 5，1，1;　　问有多少种不同的分法。输入格式　　n，k输出格式　　一个整数，即不同的分法样例输入7 3样例输出4 {四种分法为：1，1，5;1，2，4;1，3，3;2，2，3;}数据规模和约定　　6&lt;n&lt;=200，2&lt...

<dl>~<dt>~<dd>_shiliye_csdn的博客-程序员秘密

■ 定义<dl>标签用于定义描述列表(或定义列表)自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号dl代表单词Definition List，意为定义列表dt代表单词Definition Term，意为定义术语dd代表单词Definition Description，意为定义描述■ 使用说明该标签会与<dt>(定义项目/名字)和...

PTA c++ 选择判断题总结_在静态成员函数中可以调用同类的其他任何成员函数_ice_bear-的博客-程序员秘密

不知不觉一年就又结束了，整理完才感叹我已经做过这么多题了吗，希望能帮到你，加油呀（有一些可能有重复）有什么问题记得留言哦