再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞。两个很明显的阻塞就是:脚本执行时对其他线程的阻塞和脚本加载时对其他线程的阻塞。

这两个阻塞发生在HTML页面初次解析时,它们对性能的影响较大,原因是:

document对象绑定了一个事件:DOMContentLoaded。这个事件会在DOM解析完成之后触发。这个事件触发之后(而不是window.load事件),会进入异步事件驱动阶段(另一个线程控制)。也就是说,DOM解析工作不完成,用户与页面的很多(并不是所有)事件交互就无法进行。这时候浏览器的忙指示(那个页面上方的烦人的旋转的圆圈)不会消失。

DOMContentLoaded什么时候触发?

DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。

DOMContentLoaded的触发时机是:加载完页面,解析完所有标签(不包括执行CSS和JS),但是JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成,因为JS可能会依赖位于它前面的CSS计算出来的样式。所以:

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

如果页面中静态的写有script标签,DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。

注:现代浏览器会并发的预加载CSS、JS、IMG(例如:当 HTML 解析器(HTML Parser)被脚本阻塞时,解析器虽然会停止构建 DOM,但仍会识别该脚本后面的资源,并进行预加载)。但是,执行CSS和JS的顺序还是按原来的依赖顺序(JS的执行要等待位于其前面的CSS和JS加载、执行完)——先加载完成的资源,如果其依赖还没加载、执行完,就只能等着。

所以就造成外部资源阻塞渲染,如CSS 与 JavaScript

默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。

JavaScript 不仅可以读取和修改 DOM 属性,还可以读取和修改 CSSOM 属性。

默认情况下,CSS 被视为阻塞渲染的资源,存在阻塞的 CSS 资源时,浏览器会延迟 JavaScript 的执行和 DOM 构建,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。

总结如下:

css加载不会阻塞DOM树的解析

css加载会阻塞DOM树的渲染

css加载会阻塞后面js语句的执行

css会阻塞js,同理,css也会阻塞img解码、paint(浏览器认为你的CSS没有加载完毕,不确定图片的样式到底如何,牵扯到重绘资源问题),js不会阻塞img的解码、paint(估计chrome做了优化,具体本人还不知,希望客官补充)。

css阻塞优化:

还可以用媒体类型(media type)和媒体查询(media query)来解除对渲染的阻塞。

media=“print",会加载,但不会阻塞;media="(min-width:320px)",会在符合查询条件下阻塞(适配css会执行)

大css文件拆分成多个小css文件,并发加载

因为渲染线程和js线程与资源进行加载的线程并不互斥,不会互斥意味着:资源的加载可以和UI渲染、重排,事件响应,或者JavaScript代码的执行的并发进行。

所以资源加载器线程会一直进行并发加载。

这里还有一个知识点:下载的最大并行数指的是从一个主机上下载的最大并行数,如果从多个主机下载资源,这个数量会翻倍,但是由于对DNS的解析也是一个性能优化的点,故而一般策略是:不应设置超过4个主机,最好只设置2个主机。

但是操蛋的就是,如果浏览器解析DOM时需要下载脚本资源,那么下载这个资源的线程就是阻塞其他下载线程以及渲染线程,导致渲染速度变慢。

但是假设该脚本下载的速度较慢,而且多个脚本非并发下载,并且假如多个内脚本执行时间较长的话,DOM解析工作还是会一直完不成。

故而我们需要无阻塞加载脚本的技术。

js阻塞优化

因为:脚本执行和渲染DOM的并发可能会引发严重的冲突(脚本可以修改DOM)

所以:JavaScript引擎和渲染引擎所在的两个线程被设计为互斥的!

这就意味着:在执行中内容时,浏览器会切换到JavaScript引擎所在的线程,此时渲染引擎所在的线程会阻塞,故其后元素的解析和渲染会暂停。这时候如果脚本执行时间太长的话,不仅后面的元素会一直看不到,对DOM的解析工作也会一直完不成。用户会陷入焦急的等待中。

为了防止javascript阻塞,我们会

1、把放到紧跟之前的位置

        这样就不会影响需要放到页面上的UI元素的解析了。这样的好处就是,用户能即使看到页面上的UI元素,而防止出现了浏览器白屏等现象。

2、动态脚本元素-不重要的js动态插入。

        因为document.createElement("script")的async属性默认为true,而document.head.appendChild代码之后,由于没有触发渲染树的重绘,切换回的渲染线程会将剩下的DOM解析并渲染完毕。同时新插入的中的资源也会并发的下载。

var script=document.createElement("script");

console.log(script.async);//true

        同理:用XHR对象下载代码,并注入到页面也可以达到同样的效果

        如果需要同步执行,需要将async属性设置为fasle

3、h5时代,script添加defer或asyn两个属性(html4.0中定义了defer;html5.0中定义了async)

如果 script 标签中包含 defer,那么这一块脚本将不会影响 HTML 文档的解析,而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。即:整个 document 解析完毕且 defer-script 也加载完成之后(这两件事情的顺序无关),会执行所有由 defer-script 加载的 JavaScript 代码,然后触发 DOMContentLoaded 事件。defer不会改变script中代码执行顺序

如果 script 标签中包含 async,则 HTML 文档构建不受影响,不需要等待 async-script 执行。但是,async-script 加载完成后,就会立即执行!如果页面还是没有解析完成,就会停下来(阻塞页面)等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行,但一定在 load 触发之前执行。而且:多个 async-script 的执行顺序是不确定的。

document.readyState

说道DOMContentLoaded,不得不提readystatechange,通过document.readyState值来更进一步来判断文档状态:

uninitiated:xml 对象被产生,但没有任何文件被加载。

loading:document正在下载,文件尚未开始解析。

loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。

interactive:document完成了解析,但是资源还在下载,对象模型是有效但只读的。

complete:代表加载成功,文档加载完成,并且所有resource都加载完毕

通过下面代码验证,在chrome上貌似只有  interactive和complete。

document.addEventListener("DOMContentLoaded",function () {

    console.log("DOMContentLoaded"+new Date())

});

        document.addEventListener("readystatechange",function () {

            console.log("B_____"+new Date());

            console.log(document.readyState)

//            switch (document.readyState){

//                case "loading":

//                    console.log("LOADING"+new Date());

//                    break;

//                case "loaded":

//                    console.log("loaded"+new Date());

//                    break;

//                case "interactive":

//                    console.log("interactive"+new Date());

//                    break;

//                case "complete":

//                    console.log("complete"+new Date());

//                    break;

//            }

        });

        console.time("A")

A: 5.89208984375ms

B_____Thu May 17 2018 10:23:36 GMT+0800 (CST)

interactive

DOMContentLoadedThu May 17 2018 10:23:36 GMT+0800 (CST)

B_____Thu May 17 2018 10:23:36 GMT+0800 (CST)

complete

但是,今天看了:你不知道的 DOMContentLoaded

这里又有疑问:interactive DOMContentLoaded  complete onload三个先后顺序是什么呢?

DOMContentLoaded和interactive:表示文档解析完成,且资源未完全加载完成。区别呢?执行顺序呢?

验证表明:interactive 》DOMContentLoaded 》 complete 》 onload

但是,DOMContentLoaded触发时候,document.readyState一般是interactive,也有可能complete。而当页面有大量的二进制文件(页面加载的时长大于阻塞的时长的时候),document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况)

我觉得onreadystatechange这个不是很靠谱,一般用DOMContentLoaded判断页面解析完全。希望哪位大牛提供这方面的补充,感激不尽!

在图片上,也有onload跟complete

document.getElementById('load').onclick = function() { 

    var img = new Image(); 

    if(img.complete) { 

        console.log('dd'); 

    } 

    img.onload = function() { 

        console.log('ff') 

    } 

    img.src="images/1-logo.png"; 


}

这里顺带提下img加载相关 属性

onload:表示加载好,换言之,没有加载好不会执行;

onAbort:图片加载的时候,用户通过点击停止加载时出发

onerror:如果图片不存在(网络很不通畅,也可能触发 onerror事件)

complete:图片显示出来以后为true,

转载请注明来源:再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

文有不妥之处,请告知,谢谢!

参考文章:

你不知道的 DOMContentLoaded

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

浏览器线程阻塞和无阻塞加载脚本的理解

css加载会造成阻塞吗?

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容