css、js阻塞

gxyz 發(fā)布于2019-08-23 14:13 / 3027人閱讀

摘要：例如，當(dāng)解析器被腳本阻塞時，解析器雖然會停止構(gòu)建，但仍會識別該腳本后面的資源，并進(jìn)行預(yù)加載。也就是說，會阻塞頁面的渲染但是，并不會阻塞的解析。的加載不會阻塞頁面的渲染和資源的加載，一旦加載到就會立刻執(zhí)行。

大家是不是會遇到這樣的一個問題，頁面加載速度過慢，瀏覽器老在轉(zhuǎn)圈圈，頁面部分內(nèi)容需要花費較多的時間才能加載出來？

要明白上述問題，我們需要知道是什么在阻塞頁面的渲染？

1、瀏覽器如何渲染？

1.1、渲染引擎介紹
要先說明：Firebox 的渲染引擎是 Geoko，chrome的渲染引擎是wekit。本文使用的是chrome瀏覽器

1.2、渲染的主要過程

簡單介紹
瀏覽器解析 DOM 生成 DOM Tree, 結(jié)合CSS 生成的 CSS Tree, 最終組成 Render Tree,再渲染頁面。因此在此過程 css 不會阻塞 DOM 解析。

詳細(xì)介紹

流程示意圖

幾個概念：

DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)
CSS Rule Tree：瀏覽器將 CSS 解析成樹形的數(shù)據(jù)結(jié)構(gòu)
Render Tree：DOM 和 CSSOM 合并后生成 Render Tree
layout：有了Render Tree, 瀏覽器已經(jīng)知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系，從而去計算出每個節(jié)點在屏幕中的位置
painting：按照算出來的規(guī)則，把內(nèi)容畫到屏幕上
reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局，需要倒回去重新渲染，這個過程稱為 reflow。reflow 會從這個 root frame 開始遞歸往下，依次計算所有的結(jié)點尺寸和位置。reflow 是無法避免的。目前界面上流行的一些效果，比如樹狀目錄的折疊、展開（實質(zhì)上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。鼠標(biāo)滑過、點擊等等... 只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內(nèi)部、周圍甚至整個頁面的重新渲染
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。

注意：
（1）display:none 的節(jié)點不會被加入Render Tree, 而 visibility:hidden則會；所以，如果某個節(jié)點最開始是不顯示的，設(shè)為display:none 是更優(yōu)的。
（2）display:none 會觸發(fā)reflow, 而 visibility:hidden 只會觸發(fā)repaint,因為位置沒有變化
（3）有些情況下，比如修改了元素的樣式瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次 reflow，這叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁面默認(rèn)的字體等。對于這些操作，瀏覽器會馬上進(jìn)行reflow。

webkit 的主要流程：

Geoko 的主要流程：

完整流程解析：
（1）瀏覽器將 HTML 解析成DOM 樹，當(dāng)前節(jié)點的所有子節(jié)點都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點的下一個兄弟節(jié)點。
（2）將CSS 解析成 CSS Rule Tree
（3）根據(jù)DOM 樹和 CSSOM 構(gòu)造 Render Tree。注意，display:none 不會被掛載到 Render Tree 上面
（4）計算出每個節(jié)點在屏幕中的位置
（5）繪制！
注意：渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render tree。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容

展示一下。display:none 與 visibility:hidden 在瀏覽器上的區(qū)別

display:none

visibility:hidden

2、阻塞渲染：CSS 與 javascript

討論資源的阻塞時，我們要清楚，現(xiàn)代瀏覽器總是并行加載資源。例如，當(dāng)HTML解析器（HTML Parser） 被腳本阻塞時，解析器雖然會停止構(gòu)建DOM，但仍會識別該腳本后面的資源，并進(jìn)行預(yù)加載。

同時，由于下面兩點：

默認(rèn)情況下，CSS 被視為阻塞渲染的資源，這意味著瀏覽器不會渲染任何已處理的內(nèi)容，直至CSSOM構(gòu)建完畢

javascript 不僅可以讀取和修改DOM 屬性，還可以讀取和修改CSSOM 屬性

存在阻塞的 CSS 資源時，瀏覽器會延遲javascript 的執(zhí)行和 Render Tree 構(gòu)建。

另外

當(dāng)瀏覽器遇到一個script標(biāo)記時，DOM 構(gòu)建將暫停，直至腳本完成執(zhí)行。

javascript 可以查詢和修改 DOM 與 CSSOM

CSSOM 構(gòu)建時，javascript 執(zhí)行將暫停，直至 CSSOM 就緒。

所以，script 標(biāo)簽的位置很重要。實際使用時，可以遵循下面2個原則

CSS 優(yōu)先：引入順序上，CSS 資源優(yōu)于javascript資源

javascript 應(yīng)盡量少影響 DOM 的構(gòu)建

2.1、CSS 會阻塞渲染嗎？

從瀏覽器的渲染原理來看，渲染引擎會將css 構(gòu)建成 CSSOM Tree 然后再渲染頁面。也就是說，CSS 會阻塞頁面的渲染！但是，CSS 并不會阻塞 DOM 的解析。（因為需要具有 DOM 以及 CSSOM 才會構(gòu)建渲染樹）

2.2、JS 會阻塞渲染嗎?

看以下代碼：



    
        
        
        
    
    
        dsaffffdadas

下面這段代碼會在瀏覽器上面顯示一個綠色的盒子

第2個例子，在頭部引入JS

// new_file.js
let arr = []
for    (let i = 0; i < 10000000; i++) {
    arr.push(i);
    arr.splice(i%3, i%7 ,i %5);
}
let div= document.querySelector("div");
console.log(div);

瀏覽器會先轉(zhuǎn)圈圈，最后在顯示盒子

也就是說，為什么大部分程序都會將 js 放在底部，css 放在頂部就是為了加速頁面的渲染

3、我們?nèi)绾胃淖冏枞F(xiàn)狀？defer 與 async

3.1、defer 與 async 的介紹

defer：js的加載不會阻塞頁面的渲染和資源的加載，defer 會按照原本js的順序執(zhí)行。
async：js 的加載不會阻塞頁面的渲染和資源的加載，一旦加載到就會立刻執(zhí)行。如果js前后有依賴性，最好不要用async。

3.2、defer 與 async的區(qū)別
3.2.1、相同點：

加載文件時不阻塞頁面渲染

// new_file.js
let arr = []
for    (let i = 0; i < 10000000; i++) {
    arr.push(i);
    arr.splice(i%3, i%7 ,i %5);
}
let div= document.querySelector("div");
console.log(div);

會在一運行的時候，就在頁面中顯示2個盒子,因此不阻塞

對于inline的script（內(nèi)聯(lián)腳本）無效

瀏覽器按順序打印！

使用這兩個屬性的腳本中不能調(diào)用document.write 方法

// new_file.js
let arr = []
for    (let i = 0; i < 10000000; i++) {
    arr.push(i);
    arr.splice(i%3, i%7 ,i %5);
}
let div= document.querySelector("div");
console.log(div);
document.write("asdadasas");

有腳本的onload 事件回調(diào)

3.2.2、不同點：

每一個async 屬性的腳本都在它下載結(jié)束后之后立刻執(zhí)行，同時會在window的load事件之前執(zhí)行。

每一個defer屬性的腳本都是在頁面解析完畢之后，按照原本的屬性執(zhí)行，同時會在document的DOMContentLoader之前執(zhí)行

參（抄）考（襲）文章：
https://juejin.im/post/59c606... 原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的

https://juejin.im/entry/59e1d... 瀏覽器的渲染：過程與原理

https://juejin.im/post/5a1229... script中defer和async的區(qū)別

https://www.cnblogs.com/Bonni... load/domContentLoaded事件、異步/延遲Js 與DOM解析

云服務(wù)器 GPU云服務(wù)器阻塞js js中阻塞 js怎么讓方法阻塞 +css+js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100293.html

發(fā)表評論

登陸后可評論

0條評論

gxyz

男|高級講師

我要關(guān)注我要私信

TA的文章

C語言進(jìn)階：程序預(yù)處理

閱讀 1852·2021-10-09 09:44
如何控制云主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

閱讀 2723·2021-09-22 15:38
【C語言進(jìn)階】C語言實現(xiàn)通訊錄升級版 { 含動態(tài)擴(kuò)容/銷毀/信息保存功能 }（強(qiáng)烈建議收藏食用）

閱讀 2529·2021-09-09 09:33
iNeuOS工業(yè)互聯(lián)平臺，增加OPC UA驅(qū)動，同步和訂閱方式讀取數(shù)據(jù)

閱讀 734·2021-09-07 09:58
題目：基于Java畢設(shè)項目“e博士”高考志愿輔助填報系統(tǒng)

閱讀 1847·2021-09-02 15:41
css居中總結(jié)

閱讀 2568·2019-08-30 15:55
畢業(yè)后的第一次總結(jié)。

閱讀 1821·2019-08-30 15:55
HTML 分享頁面到QQ/微信、微博等平臺

閱讀 578·2019-08-30 15:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css、js阻塞

相關(guān)文章

css加載會造成阻塞嗎？

css加載會造成阻塞嗎？

css加載會造成阻塞嗎？

css加載會造成阻塞嗎

css加載會造成阻塞嗎

css加載會造成阻塞嗎

發(fā)表評論

0條評論

gxyz

男|高級講師

TA的文章

C語言進(jìn)階：程序預(yù)處理

如何控制云主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

【C語言進(jìn)階】C語言實現(xiàn)通訊錄升級版 { 含動態(tài)擴(kuò)容/銷毀/信息保存功能 }（強(qiáng)烈建議收藏食用）

iNeuOS工業(yè)互聯(lián)平臺，增加OPC UA驅(qū)動，同步和訂閱方式讀取數(shù)據(jù)

題目：基于Java畢設(shè)項目“e博士”高考志愿輔助填報系統(tǒng)

css居中總結(jié)

畢業(yè)后的第一次總結(jié)。

HTML 分享頁面到QQ/微信、微博等平臺

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css、js阻塞

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

css、js阻塞