js时间线

最新推荐文章于 2024-09-20 20:23:02 发布

竹节虫T

最新推荐文章于 2024-09-20 20:23:02 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/88919397

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

js加载时间线

创建Documen对象开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading' 。
遇到link外部css,创建线程加载，井继续解析文档。
遇到script外部js，并且没有设置async，defer, 浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
遇到script外部js.并且设置有async， defer, 浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。(异步禁止使用document.write()，因为它会清除文档流）
遇到img等，先正常解析dom结构，然后浏览器异步加载src,并继续解析文档。
当文档解析完成，document.readyState = 'Interactive'。
文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意 async的不同，但同样禁止使用document.wite()) ;
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
当所有async的脚本加载完成井执行后。img等加载完成后，document.readyState = 'complete', window对象触发load事件。
从此，以异步响应方式处理用户输入，网络事件等。

<body>
    <div style="width:100px;height:100px;background-color:red;"></div>
    <script>
        window.onload = function () {
            document.write('a');
        }//这个时候页面就只会输出a，div就被清除了
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
 <script>
        console.log(document.readyState);//loading  因为解析web页面的时候，script标签也是dom元素，所以它也要识别
<script>
</body>
</html>

<body>
<script>
      console.log(document.readyState);//loading  
       document.onreadystatechange = function (){//用状态码改变才能检测文档解析到哪个状态了。
          console.log(document.readyState);// interactive   complete
      }
<script>
</body>

DOMContentLoaded事件只有用addEventListener绑定才有效

document.addEventListener('DOMContentLoaded',function(){ console.log('a')},false);
//正常的情况下，当文档加载（解析文档，就是构成dom树，然后再加载dom元素）完毕后，才执行js代码，
//但是document对象触发DOMContentLoaded事件可以当dom解析完了(dom树构建完成，还没加载完毕的时候)就去执行js代码

// 就像jquery里面的
当dom解析完就执行的部分
$(document).ready(function (){
.............
})
   </script>

现在用document对象触发DOMContentLoaded事件放在head里面，照样可以拿到div（下面的代码就是的），因为它是在dom树构建完成之后就调用事件的那个处理函数，不用等到文档全部加载完毕。而window.onload()就是要等到文档全部加载完毕了(像img的src的图片加载完成了)，它才会执行window.onload()里面的js。这样看来window.onload()太憨了。

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            var div = document.getElementsByTagName('div')[0];
            console.log(div);
        },false);
    </script>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red"></div>
</body>
</html>