資訊專欄INFORMATION COLUMN
摘要：和渲染過程一個簡單的頁面如上所示。的主要是為了完成匹配并把附加上上的每個。然后，計(jì)算每個也就是每個的位置，這又叫和過程。將與合并成一個渲染樹。優(yōu)化關(guān)鍵渲染路徑就是指最大限度縮短執(zhí)行上述第步至第步耗費(fèi)的總時間
DOM和CSS渲染過程 DOM
Document
一個簡單的html頁面如上所示。
DOM有兩個概念：
解析
渲染
DOM解析DOM解析：就是把你所寫的各種html標(biāo)簽，生成一個DOM TREE，可以認(rèn)為就是生成了一個最原始的頁面，一點(diǎn)樣式都沒有，毫無CSS修飾。
DOM渲染：瀏覽器會把本身默認(rèn)的樣式+用戶自己寫得樣式整合到一起，形成一個CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 結(jié)合到一起，生成一個Render TREE，呈現(xiàn)出一個帶有樣式的頁面。
1）瀏覽器會解析三個東西：
一個是HTML/SVG/XHTML，事實(shí)上，Webkit有三個C++的類對應(yīng)這三類文檔。解析這三種文件會產(chǎn)生一個DOM Tree。
CSS，解析CSS會產(chǎn)生CSS規(guī)則樹。
Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。注意：
Rendering Tree 渲染樹并不等同于DOM樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。
CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點(diǎn)。也就是所謂的Frame。
然后，計(jì)算每個Frame（也就是每個Element）的位置，這又叫l(wèi)ayout和reflow過程。
3）最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
js 是單線程，但是瀏覽器是多線程的。
瀏覽器會有不同的線程，比如說
GUI 渲染線程
JS 線程
定時器觸發(fā)線程 (setTimeout)
瀏覽器事件線程 (onclick)
http 異步線程
.....
上面的幾個線程，在同一個瞬間，只有一個線程起作用，也就是互斥的。比如說瀏覽器在執(zhí)行GUI 渲染線程呢，那么其他的4個進(jìn)程，都處于掛起的狀態(tài)，在隊(duì)列里面呆著。
DOM的渲染對應(yīng)的就是GUI渲染進(jìn)程；JS的執(zhí)行對應(yīng)的就是JS線程；所以，DOM的渲染與JS代碼的運(yùn)行，在同一瞬間只能有一個執(zhí)行！
阻塞XXX是指讓XXX暫停了。比如JS的執(zhí)行阻塞DOM解析，就是
DOM解析 --> JS執(zhí)行(此時DOM解析暫停) --> JS執(zhí)行完畢 --> DOM繼續(xù)解析
DOM與CSS先看它倆之間的關(guān)系，也就是分析CSS的加載對DOM的解析和渲染的影響。
很明顯，DOM自己在那解析DOM TREE 和 css樣式有啥關(guān)系啊，所以css不影響DOM解析。
也很明顯，DOM渲染就是要生成樣式呢，肯定和css有關(guān)系啊，所以css影響DOM渲染。
結(jié)論：
css的加載不會阻塞DOM的解析
css的加載會阻塞DOM的渲染
DOM與JSJS（加載和執(zhí)行） 都會阻塞 DOM 的解析，因?yàn)镴S中可能會對DOM進(jìn)行操作，可能改變DOM的結(jié)構(gòu)，所以JS的加載和執(zhí)行是會阻塞DOM解析的。
JS（加載和執(zhí)行） 都會阻塞 DOM 的渲染，同上面一樣，因?yàn)镴S中可能對樣式進(jìn)行操作。
注： html中每遇到< script >標(biāo)簽，頁面就會重新渲染一次，因?yàn)橐ＷC標(biāo)簽中的JS代碼拿到的都是最新的樣式。
結(jié)論：
JS的加載和執(zhí)行會阻塞DOM的解析
JS的加載和執(zhí)行會阻塞DOM的渲染
CSS與JS
在線程那里說了，CSS的加載會阻塞JS的執(zhí)行，因?yàn)镃SS的渲染GUI線程和JS運(yùn)行線程互斥。
但是CSS不會阻塞JS的加載（瀏覽器可以預(yù)先掃描并下載）
注1：
CSS、JS之間的加載是否阻塞，這里不考慮，因?yàn)楝F(xiàn)代的瀏覽器都會預(yù)先偷看文檔，并且下載。
注2：
這里的JS引入方式不包括async和defer
結(jié)論：
CSS的加載阻塞JS的運(yùn)行，不阻塞JS的加載
Note: 簡單提一句，請注意 visibility: hidden 與 display: none 是不一樣的。前者隱藏元素，但元素仍占據(jù)著布局空間（即將其渲染成一個空框），而后者 (display: none) 將元素從渲染樹中完全移除，元素既不可見，也不是布局的組成部分。
下面簡要概述了瀏覽器完成的步驟：
處理 HTML 標(biāo)記并構(gòu)建 DOM 樹。
處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據(jù)渲染樹來布局，以計(jì)算每個節(jié)點(diǎn)的幾何信息。
將各個節(jié)點(diǎn)繪制到屏幕上。
優(yōu)化關(guān)鍵渲染路徑_就是指最大限度縮短執(zhí)行上述第 1 步至第 5 步耗費(fèi)的總時間
https://developers.google.com...https://developers.google.com...
https://developers.google.com...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104991.html
摘要：和渲染過程一個簡單的頁面如上所示。的主要是為了完成匹配并把附加上上的每個。然后，計(jì)算每個也就是每個的位置，這又叫和過程。將與合并成一個渲染樹。優(yōu)化關(guān)鍵渲染路徑就是指最大限度縮短執(zhí)行上述第步至第步耗費(fèi)的總時間 DOM和CSS渲染過程 DOM Document 一個簡單的html頁面如上所示。 DOM有兩個概念： 解析 渲染...
摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經(jīng)常是令前端開發(fā)者頭痛的一塊工作。布局系統(tǒng)在這一小節(jié)中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發(fā)布的，而的則是發(fā)布。 作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛好者也...
摘要：分享嘉賓簡介新時代布局的分享者是新加坡的國際知名專家陳慧晶。陳慧晶老師的分享主題介紹如下布局經(jīng)常是令前端開發(fā)者頭痛的一塊工作。布局系統(tǒng)在這一小節(jié)中，慧晶老師主要分享了跟這新時代布局的三大棟梁。的首個公開工作草案是在發(fā)布的，而的則是發(fā)布。 作者：陳大魚頭 github： KRISACHAN 記錄原因：2019年3月30日在深圳舉行了第五屆的CSS Conf，魚頭作為一枚CSS新手以及愛好者也...
摘要：的全稱是統(tǒng)一資源定位符英文，可以這么說，是一種標(biāo)準(zhǔn)，而網(wǎng)址則是符合標(biāo)準(zhǔn)的一種實(shí)現(xiàn)而已。渲染器，將組件渲染到頁面上。 0x000 概述 從這一章開始就進(jìn)入路由章節(jié)了，并不直接從如何使用react-route來講，而是從路由的概念和實(shí)現(xiàn)來講，達(dá)到知道路由的本質(zhì)，而不是只知道如何使用react-route庫的目的，畢竟react-route只是一個庫，是路由的一個實(shí)現(xiàn)而已，而不是路由本身。 ...
閱讀 3953·2023-04-25 19:07
閱讀 3663·2021-11-22 12:02
閱讀 3211·2021-10-12 10:11
閱讀 4261·2021-09-03 10:49
閱讀 2972·2019-08-30 13:21
閱讀 3111·2019-08-30 11:14
閱讀 2165·2019-08-29 15:40
閱讀 2960·2019-08-28 18:29
