浏览器加载的时间线,CSS以及img对DOMContentLoaded事
分类:新闻中心

图二

img 与css

img必须写在一行
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
width:120px;
height:350px;
border:solid black 1px;
}
</style>

</HEAD>

<BODY>
<div>
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="1.jpg"/><img src="2.jpg"/>
</div>
</BODY>
</HTML>  

六、文档解析完成后

此时dom的解析完成,wanchdocument.readyState = 'interactive',所有设置了defer 的脚本按照顺序执行

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

defer这一布尔属性是告诉浏览器这个script标签需要在文档解析完成后再去执行

美高梅网址 1

怎用JS来改变CSS属性?

onmouseover="this.style.borderColor='red'" onmouseout="this.style.borderColor='grey'"  

前端的纯技术就是对规范的认知 什么是DOMContentLoaded事件? 首先想到的是查看W3C的H...

三、加载到script的外部 JS(1)

如果script标签上没有设置async、defer等表示异步加载的属性,那么浏览器加载,并且阻塞页面、等待它加载完并且执行完这个脚本

Difference

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

async 和 defer的script标签在开始下载时候都不会暂停解析阻塞页面和提供onload时候的回调。async属性的脚本会在下载结束后立即执行,同时也会在window的load时间前执行,所以有可能会出现脚本执行顺序被打乱的情况。相反的,defer则保证了脚本能顺序执行,其执行时间会在页面解析完成后,同时也在DOMContentLoaded执行前。

index.html:

JS、CSS以及img对DOMContentLoaded事件的影响,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>

美高梅网址 2

图一

如果页面中没有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');

美高梅网址 3

图二

如果页面中静态的写有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中添加的记录也可证明其触发时间。

美高梅网址 4

图三

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

实验3:img何时开始解码、绘制?

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

美高梅网址 5

图三

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

实验3:img何时开始解码、绘制?

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

美高梅网址 6

图四

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

美高梅网址 7

图五

美高梅网址 8

图六

美高梅网址 9

图七

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

美高梅网址 10

图八

图八对应的代码:

<!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模拟慢速网络

二、加载到link的外部CSS

创建一个线程加载这个资源,并且继续解析文档

JS下载解析时候会阻塞DOM树的构建,放在HTML顶部 的时候会有可能出现长时间白屏的情况,想让JS解析时候阻塞DOM树构建的话必定会谈到defer和async两个属性,两个究竟是什么和有什么区别呢?

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

一、创建 document 对象

开始解析Web页面。解析HTML元素和它们的文本内容后添加 element 对象和text节点到文档中,这个节点的 document.readyState = 'loading'

1、defer [https://developer.mozilla.org/En/HTML/Element/Script]

图八对应的代码:

八、当所有资源被加载完成后

美高梅网址,例如img等异步标签加载完成后、async脚本加载并执行完毕
document.readyState = complete
window上几个事件的加载顺序

  1. loading
  2. interactive
  3. DOMContentLoaded ,这个事件只能用addEventListener绑定
  4. load
    window 对象触发 load 事件

2、async[HTML5]  [https://developer.mozilla.org/En/HTML/Element/Script]

美高梅网址 11

七、document 对象触发DOMContentLoaded 事件

标志着程序的运行由同步脚本驱动阶段转换成事件驱动阶段
浏览器开始监听输入事件、点击事件等由用户触发的事件了、

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.

async这一布尔属性告诉浏览器在可能得情况下异步执行script标签

什么是DOMContentLoaded事件?

四、加载到script的外部 JS(2)

遇到有async、defer等表示异步加载的属性,创建一个线程加载,不阻塞页面,对于有async 属性的JS,脚本加载完成后就立即执行(异步加载禁止使用document.write等方法)

<!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>

五、遇到img标签

先根据它的宽高正常解析dom结构(给img在文档中占位),而后创建一个线程加载img的资源

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

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

<!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>

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

<!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>

实验3:img何时开始解码、绘制?

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.

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

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

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

图四

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

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

您可能感兴趣的文章:

  • Javascript封装DOMContentLoaded事件实例
  • 浅谈js中startsWith 函数不能在任何浏览器兼容的问题
  • Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)
  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
  • 浅谈解决360兼容模式浏览器的方法
  • JS兼容所有浏览器的DOMContentLoaded事件

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

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.

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

美高梅网址 12

图八

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

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

图七

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

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

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

实验3:img何时开始解码、绘制?

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

index.html:

美高梅网址 13

图三

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

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

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

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

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

图三

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

图一

美高梅网址 14

美高梅网址 15

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

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

美高梅网址 16

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

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

美高梅网址 17

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

图五

图六

美高梅网址 18

本文由美高梅网址发布于新闻中心,转载请注明出处:浏览器加载的时间线,CSS以及img对DOMContentLoaded事

上一篇:JavaScript弹出窗口方法汇总,open用法实例分析 下一篇:没有了
猜你喜欢
热门排行
精彩图文