CSS的工作過(guò)程

CarterLi 發(fā)布于2019-08-30 15:43 / 1729人閱讀

摘要：總的來(lái)說(shuō)，過(guò)程分以下幾步處理標(biāo)記并構(gòu)建樹(shù)。不說(shuō)這些題外話了，我們下面來(lái)畫(huà)幾個(gè)圖，幫助大家更清楚的理解的工作過(guò)程。

在平時(shí)的工作中，可能都是再用一些框架或者是簡(jiǎn)單的CSS來(lái)修飾我們的HTML頁(yè)面，那么仔細(xì)想想一個(gè)資深的前端從業(yè)者，是否需要知道他的工作原理和過(guò)程呢，技術(shù)這種東西，當(dāng)然是我們了解的越多，才會(huì)使用的越得心應(yīng)手。那么下面，我就為大家來(lái)介紹一下CSS的工作過(guò)程把。
有個(gè)經(jīng)典的問(wèn)題：從你輸入 URL 到看到頁(yè)面都發(fā)生了什么？這個(gè)問(wèn)題回答可長(zhǎng)可短，回答詳細(xì)了扯上大幾千字都不是問(wèn)題。這里我從接收到 HTML，CSS，JS 等各種文件之后開(kāi)始說(shuō)，前面的都不是本題重點(diǎn)了。
總的來(lái)說(shuō)，過(guò)程分以下幾步：

處理 HTML 標(biāo)記并構(gòu)建 DOM 樹(shù)。

處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹(shù)。

將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)。

根據(jù)渲染樹(shù)來(lái)布局，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息。

將各個(gè)節(jié)點(diǎn)繪制到屏幕上。

是不是感覺(jué)很神奇，簡(jiǎn)單的幾個(gè)過(guò)程就能讓我們的頁(yè)面變得好看起來(lái)，這還是屬于很淺的一些內(nèi)容，更深層次東西在bob老師最近的直播課中經(jīng)常有講到，大家可以多多關(guān)注哦。不說(shuō)這些題外話了，我們下面來(lái)畫(huà)幾個(gè)圖，幫助大家更清楚的理解CSS的工作過(guò)程、。

構(gòu)建 DOM Tree：HTML 文件加載后，瀏覽器開(kāi)始構(gòu)建 DOM Tree，DOM Tree 就是描述 HTML 文檔中元素層疊關(guān)系的一棵樹(shù)，長(zhǎng)這樣

構(gòu)建 CSSOM 樹(shù)：與DOM 類似，我們需要對(duì) CSS 構(gòu)建樹(shù)。首先CSS 字節(jié)轉(zhuǎn)換成字符，接著轉(zhuǎn)換成令牌和節(jié)點(diǎn)，最后鏈接到一個(gè)稱為“CSS 對(duì)象模型”(CSSOM) 的樹(shù)結(jié)構(gòu)內(nèi)，CSSOM 樹(shù)長(zhǎng)這樣

??
3.合成渲染樹(shù)：將 DOM 樹(shù)和 CSSOM 樹(shù)合并成一棵渲染樹(shù)，長(zhǎng)這樣

??
4.繪制/柵格化：我們已經(jīng)知道各個(gè)元素的樣式和布局方式了，接下來(lái)就是瀏覽器內(nèi)核（平時(shí)說(shuō)的 webkit 內(nèi)核）來(lái)計(jì)算，將渲染樹(shù)中的每個(gè)節(jié)點(diǎn)轉(zhuǎn)換成屏幕上的實(shí)際像素。
5.繪制到屏幕。

喜歡的可以關(guān)注小編喲~
工作日每日一更新~