JS、CSS以及img对DOMContentLoaded事件的影响

前端的纯技术就是对规范的认知

什么是DOMContentLoaded事件？

首先想到的是查看W3C的HTML5规范，DOMContentLoaded事件在什么时候触发：

Once the user agent stops parsing the document, the user agent must run the following steps:
1. Set the current document readiness to “interactive” and the insertion point to undefined.
Pop all the nodes off the stack of open elements.
2. If the list of scripts that will execute when the document has finished parsing is not empty, run these substeps:
2.1 Spin the event loop until the first script in the list of scripts that will execute when the document has finished parsing has its “ready to be parser-executed” flag set and the parser's Document has no style sheet that is blocking scripts.
2.2 Execute the first script in the list of scripts that will execute when the document has finished parsing.
2.3 Remove the first script element from the list of scripts that will execute when the document has finished parsing (i.e. shift out the first entry in the list).
2.4 If the list of scripts that will execute when the document has finished parsing is still not empty, repeat these substeps again from substep 1.
3. Queue a task to fire a simple event that bubbles named DOMContentLoaded at the Document.

规范总是那么的晦涩，但至少有一点是可以明确了的，就是在JS（不包括动态插入的JS）执行完之后，才会触发DOMContentLoaded事件。

接下来看看MDN上有关DOMContentLoaded事件的文档：

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading
Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will not finish parsing – and DOMContentLoaded will not fire – until the stylesheet is loaded.

这么看来，至少可以得出这么一个理论：DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
它的触发时机是：加载完页面，解析完所有标签（不包括执行CSS和JS），并如规范中所说的设置 interactive 和执行每个静态的script标签中的JS，然后触发。
而JS的执行，需要等待位于它前面的CSS加载（如果是外联的话）、执行完成，因为JS可能会依赖位于它前面的CSS计算出来的样式。

实践是检验真理的唯一标准

实验1：DOMContentLoaded事件不直接等待CSS文件、图片的加载完成

index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="./css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <p>Content</p>
  <img src="./img/chrome-girl.jpg">
</body>
</html>

图一

如果页面中没有script标签，DOMContentLoaded事件并没有等待CSS文件、图片加载完成。

Chrome开发者工具的Timeline面板可以帮我们记录下浏览器的一举一动。图一中红色小方框中的蓝线，表示DOMContentLoaded事件，它右边的红线和绿线分别表示load事件和First paint，鼠标hover在这些线露出灰色方框下面的一小部分时就会出现带有说明文字的tips（这交互够反人类的对吧！）。

实验2：DOMContentLoaded事件需要等待JS执行完才触发

index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    console.timeStamp('Inline script before link in head');
    window.addEventListener('DOMContentLoaded', function(){
      console.timeStamp('DOMContentLoaded event');
    });
  </script>
  <link rel="stylesheet" type="text/css" href="./css/main.css" rel="external nofollow" rel="external nofollow" >
  <script type="text/javascript">
    console.timeStamp('Inline script after link in head');
  </script>
</head>
<body>
  <p>Content</p>
  <img src="./img/chrome-girl.jpg">
  <script type="text/javascript" src="./js/main.js"></script>
</body>
</html>

main.js:
console.timeStamp('External script after link in body');

图二

如果页面中静态的写有script标签，DOMContentLoaded事件需要等待JS执行完才触发。

而script标签中的JS需要等待位于其前面的CSS的加载完成。

console.timeStamp() 可以向Timeline中添加一条记录，并对应上方的一条黄线。

从图二中可以看出，在CSS之前的JS立刻得到了执行，而在CSS之后的JS，需要等待CSS加载完后才执行，比较明显的是main.js早就加载完了，但还是要等main.css加载完才能执行。而DOMContentLoaded事件，则是在JS执行完后才触发。滑动Timeline面板中表示展示区域的滑块，如图三，放大后即可看到表示DOMContentLoaded事件的蓝线（之前跟黄线和绿线靠的太近了），当然，通过 console.timeStamp() 向TimeLine中添加的记录也可证明其触发时间。

图三

现代浏览器会并发的预加载CSS, JS，也就是一开始就并发的请求这些资源，但是，执行CSS和JS的顺序还是按原来的依赖顺序（JS的执行要等待位于其前面的CSS和JS加载、执行完）。先加载完成的资源，如果其依赖还没加载、执行完，就只能等着。

实验3：img何时开始解码、绘制？

从图三中我们可以发现一个有趣的地方：img的请求老早就发出了，但延迟了一段时间才开始解码。如图二、图三中的红框所示，截图中只框出了一部分表示解码的记录，而实际上这些表示解码的记录一直持续到img加载结束，如图四所示，img是一边加载一边解码的：

图三

现代浏览器会并发的预加载CSS, JS，也就是一开始就并发的请求这些资源，但是，执行CSS和JS的顺序还是按原来的依赖顺序（JS的执行要等待位于其前面的CSS和JS加载、执行完）。先加载完成的资源，如果其依赖还没加载、执行完，就只能等着。

实验3：img何时开始解码、绘制？

从图三中我们可以发现一个有趣的地方：img的请求老早就发出了，但延迟了一段时间才开始解码。如图二、图三中的红框所示，截图中只框出了一部分表示解码的记录，而实际上这些表示解码的记录一直持续到img加载结束，如图四所示，img是一边加载一边解码的：


图四

抱着“猜想——验证”的想法，我猜想这是因为img这个资源是否需要展现出来，需要等 所有的JS和CSS的执行完 才知道，因为main.js可能会执行某些DOM操作，比如删除这个img元素，或者修改其src属性，而CSS可能会将其 display: none 。


图五


图六


图七

图五中没有JS和CSS，img的数据一接收到就马上开始解码了。
图六中没有JS，但img要等到CSS加载完才开始解码。
图七的代码跟图六的代码唯一的区别是CSS把img给 display: none; ，这使得img虽然请求了，但根本没有进行解码。
这说明，img是否需要解码、绘图（paint）出来，确实需要等CSS加载、执行完才能知道。也就是说，CSS会阻塞img的展现！那么JS呢？


图八

图八对应的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    console.timeStamp('Inline script in head');
    window.addEventListener('DOMContentLoaded', function(){
      console.timeStamp('DOMContentLoaded event');
    });
  </script>
</head>
<body>
  <p>Content</p>
  <img src="./img/chrome-girl.jpg">
  <script type="text/javascript" src="./js/main.js"></script>
</body>
</html>

非常令人惊讶，在有JS而没有CSS的页面中，img居然能够在收到数据后就立刻开始解码、绘图（paint)，也就是说，JS并没有阻塞img的展现！这跟我们以前理解的JS会阻塞img资源的传统观念不太一样，看来Chrome对img的加载和展现做了新的优化。

我们常用的jQuery的 $(document).ready() 方法，就是对DOMContentLoaded事件的监听（当然，其内部还会通过模拟DOMContentLoaded事件和监听onload事件来提供降级方案）。通常推荐在DOMContentLoaded事件触发的时候为DOM元素注册事件。所以尽快的让DOMContentLoaded事件触发，就意味着能够尽快让页面可交互：

减小CSS文件体积，把单个CSS文件分成几个文件以并行加载，减少CSS对JS的阻塞时间

次要的JS文件，通过动态插入script标签来加载（动态插入的script标签不阻塞DOMContentLoaded事件的触发）

CSS中使用的精灵图，可以利用对img的预加载，放在html中跟CSS文件一起加载

在做实验的过程中，感觉Chrome开发者工具的Timeline面板非常强大，浏览器的一举一动都记录下来。以前我们前端开发要想理解、探索浏览器的内部行为，或者摸着石头过河的做黑盒测试，或者事倍功半的研究浏览器源码，唯一高效点的做法就是学习别人的研究经验，看老外的文章，但浏览器的发展日新月异（比如这次实验发现的JS不阻塞img的展现），别人的经验始终不是最新、最适合的，关键是要结合自己的业务、需求场景，有针对性的做分析和优化。

PS.
以上测试环境为windows/chrome，并用Fiddler模拟慢速网络

赞 (0)

相关推荐

  • DOM3中的js textInput文本事件

    与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace). 可看到textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符. 示例 DOM3 event textInput function addEvent(el,type,fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.att

  • JavaScript DOM事件(笔记)

    第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件处理程序 2-1 HTML事件处理程序 //缺点:HTML和JS代码紧密的耦合在一起; <input type="button" value="按钮" onclick="showMessage()"&g

  • Javascript Event事件中IE与标准DOM的比较

    1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流) DOM事件模型: body-&g

  • Javascript封装DOMContentLoaded事件实例

    最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加window.onload事件,主要是为了在DOM加载完后可以使用getElementById,getElementsByTagName等方法选取DOM元素进行操作,但是window.load会等到加载完DOM.脚本.CSS,最后加载完图片甚至是iframe中的所有资源才会触发,很多时候网页的图片较多

  • js学习总结之dom2级事件基础知识详解

    js学习总结之dom2级事件基础知识详解

    我们使用的DOM2事件绑定,其实是让box通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法实现的. DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法,第二次绑定的会把前面的覆盖掉. DOM2:可以给某一个元素的同一个行为绑定多个不同的方法 box.addEventListener('click',function(e){ console.log(1) },false) box.addEventListener('click',functio

  • 一些主流JS框架中DOMReady事件的实现小结

    原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片.脚本.样式表甚至是iframe中所有资源的下载后才触发的.这对于很多 实际的应用而言有点太"迟"了,比较影响用户体验.为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该 方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载.Webkit引擎从版本525(Webkit nightly 1/20

  • javascript 删除dom对象的事件函数代码

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

  • JS中dom0级事件和dom2级事件的区别介绍

    dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

  • JavaScript DOM 添加事件

    因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件! 而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式!这样我们就可以直接调用addEvent()方法来给对象添加事件了! 这不是更方便?!呵呵-- 让我们来看看吧! /** * 注册一个监听事件到元素 * @param {Object} node 所要添加事件的对象 * @param {Object} type

随机推荐