一次性分清DOMContentLoaded、window.onload、style

标签：list   log   位置   简化   问题   文件加载   方法   cti   输出   

简单来说

1. 当onload事件触发时，页面上所有的DOM，样式表，图片，js等都完全加载完成；
2. 当DOMContentLoaded事件触发时，仅仅是DOM加载完成，但不包括样式表，图片等；
3. 先触发DOMContentLoaded事件，后触发load事件；

看个栗子：

html>
head>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    >
    script type="text/javascript" src="script.js">/script>
    
    
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    >
    
/head>

    
a>
/body>
>

如上代码，我们分别绑定了onload和DOMContentLoaded两个事件，执行结果是先打印出DOMContentLoaded，再输出div1这个节点内容，佐证了以上三点。

为什么会有两种事件?

我们需要给一些元素的事件绑定事件处理函数，但潜在的问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的；

上述这两个事件就是用来避免这种情况的发生，将绑定函数放在两个事件中，保证能在页面的某些元素加载完毕之后再执行事件处理函数。

当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

Jquery中的ready

jq中，我们常常看到以下两种等价的写法

$(document).ready(function(){
  // 在这里写你的代码...
});

$(function($) {    // 简化写法
  // 你可以在这里继续使用$作为别名...
});

在没有出现DOMContentLoaded事件出现以前，jq中的上述写法就是模拟这个事件的方法；

window.onload

window.onload无法注册多个事件处理函数，如下代码无法执行，会出现报错

window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

但是jq的$(document).ready()能同时编写多个，并且都会输出

$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
}); 

样式阻塞

根据文档，该事件仅当在DOM加载完成之后触发，实际上有时并非如此！

一般来说，外部样式文件并不会响到DOMCotentLoaded事件，它并不会等待外部样式文件加载完成。

但是！！！在某些版本的Gecko和Webkit引擎的浏览器中，有些情况会使等待样式表加载完成后才触发DOMContentLoaded事件。最普遍的情况便是将脚本写在样式表后面：

html

"stylesheet"href="stylesheet.css">
    "script.js">


    "element">The element

css

#element { color: red; }

js

document.addEventListener(‘DOMContentLoaded‘,function(){
     alert(getComputedStyle(document.getElementById(‘element‘),null).color);},
false);

如上，脚本是可以读出color属性值的，也就是说触发DOMContentLoaded事件时，样式表也加载完成了，样式表阻塞了DOM的构建！！！

原因是浏览器猜测脚本可能会读取一些样式信息，如位置、颜色，显然脚本就需要等到样式的加载完成了。

这也是为什么我们最好把脚本文件放到HTML文档的最后再加载，而不要把脚本放在head标签里，除非你清楚放在head标签里是必要的。

异步脚本

load与DOMContentLoaded标志着页面上两个重要的时刻：

• DOMContentLoaded：DOM已经完成加载，此时可以为这些DOM元素绑定事件，初始化接口等
• Load：其他外部资源均已加载完成，可以正确读出这些资源的信息，如图片的宽高等

异步的script

当解析器遇到内联标签的脚本时，会阻塞DOM的构建，读取后会立即执行脚本。原因是可能这些脚本会影响DOM，因此需要等到这些脚本都执行完成了，才会触发DOMContentLoaded事件。

阻塞同样对外联脚本有效（），浏览器需要等到加载后再执行完成才可以继续执行。

对于外联的脚本，我们有方法让其延后执行，async和defer属性登场，他们可以让外部脚本延后执行，而不阻塞浏览器解析文档，但他们对内联脚本无效。

async & defer 均可以让浏览器继续完成dom的加载，而不用等待脚本加载完成，他们的区别如下：

参考列表

1. 从onload和DOMContentLoaded谈起
2. https://juejin.im/post/5a36499551882529c70f34b5

一次性分清DOMContentLoaded、window.onload、style

标签：list   log   位置   简化   问题   文件加载   方法   cti   输出   

原文地址：https://www.cnblogs.com/CharmanderS5/p/9057468.html