什么是js加载时间线？ 浏览器在开始运行一个页面的时候，首先它会初始化js功能，当js发挥它的功能时候，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序，谁在谁之前发生，谁在谁之后发生。
js时间线主要步骤：[创建document对象开始——>文档解析完——>文档加载完并执行完]
1、创建Document对象，开始解析web页面。这个阶段document.readyState = 'loading'.
代码验证：
<script type="text/javascript">
console.log(document.readyState);
</script>
执行结果：
2、遇到 link 外部 css，创建线程，进行异步加载，并继续解析文档。
3、遇到 script 外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。
4、遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程异步加载，并继续解析文档。（异步禁止使用 document.write()）
注意：
1、async 属性的脚本，脚本加载完成后立即执行。defer属性脚本要等到dom解析完成后再执行。
2、（异步禁止使用 document.write()，因为当你整个文档解析到差不多，再调用 document.write()，会把之前所有的文档流都清空，用它里面的文档代替，除了异步禁止，而且当内容全部加载完毕后也要禁止使用document.write()，也就是window.onload，document.write任何情况下都不要用，其实也没啥用）
代码验证：
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
document.write('hello world')
</script>
</body>
执行结果：
在window.onload后再次验证：
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
window.onload = function(){
document.write('hello world')
}
</script>
</body>
执行结果：
5、遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档。看到标签直接生产 dom 树，不用等着 img 加载完 src。
6、当文档解析完成（domTree 建立完毕，不是加载完毕，解析在加载之前），document.readyState = 'interactive'。
代码验证：
<body>
<script type="text/javascript">
//document创建时候的状态
console.log(document.readyState);
//当dom解析完成后的状态（dom树建立完成后）
document.onreadystatechange = function () {
console.log(document.readyState);
}
</script>
</body>
执行结果：
7、文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同,但同样禁止使用 document.write()）;
8、文档解析完成后，document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
代码验证：
<body>
<script type="text/javascript">
//document创建时候的状态
console.log(document.readyState);
//当dom解析完成后的状态（dom树建立完成后）
document.onreadystatechange = function () {
console.log(document.readyState);
}
//这里要注意DOMContentLoaded比较特殊，必须绑定在addEventListener上好使
document.addEventListener('DOMContentLoaded',function(){
console.log('来呀！快活呀！');
},false)
</script>
</body>
执行结果：
注意：
我们要注意的是DOMContentLoaded事件比较特殊，它必须绑定在addEventListener上好使，用onDOMContentLoaded绑定没用.
在jquery中有一个$(document).ready(function(){ })方法 ，这个方法就是当dom解析完就执行的部分。
//当dom解析完就执行的部分
$(document).ready(function(){
//这里面写着主函数体
})
这个ready方法经常会在面试中问到，ready和window.onload的区别？
区别就是ready方法快，window.onload慢，因为ready是dom解析完就执行，而window.onload则是加载完再执行。ready方法的底层原理就是依据document.readyState变成interactive和DOMContentLoaded事件
9、当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行加载完之后），document.readyState = 'complete'，window 对象触发 load 事件。
10、从此，以异步响应方式处理用户输入、网络事件等。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！