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