CSS的工做過程

在平時的工做中，可能都是再用一些框架或者是簡單的CSS來修飾咱們的HTML頁面，那麼仔細想一想一個資深的前端從業者，是否須要知道他的工做原理和過程呢，技術這種東西，固然是咱們瞭解的越多，纔會使用的越駕輕就熟。那麼下面，我就爲你們來介紹一下CSS的工做過程把。
有個經典的問題：從你輸入 URL 到看到頁面都發生了什麼？這個問題回答可長可短，回答詳細了扯上大幾千字都不是問題。這裏我從接收到 HTML，CSS，JS 等各類文件以後開始說，前面的都不是本題重點了。
總的來講，過程分如下幾步：

1. 處理 HTML 標記並構建 DOM 樹。
2. 處理 CSS 標記並構建 CSSOM 樹。
3. 將 DOM 與 CSSOM 合併成一個渲染樹。
4. 根據渲染樹來佈局，以計算每一個節點的幾何信息。
5. 將各個節點繪製到屏幕上。

是否是感受很神奇，簡單的幾個過程就能讓咱們的頁面變得好看起來，這仍是屬於很淺的一些內容，更深層次東西在bob老師最近的直播課中常常有講到，你們能夠多多關注哦。不說這些題外話了，咱們下面來畫幾個圖，幫助你們更清楚的理解CSS的工做過程、。

1. 構建 DOM Tree：HTML 文件加載後，瀏覽器開始構建 DOM Tree，DOM Tree 就是描述 HTML 文檔中元素層疊關係的一棵樹，長這樣

​​

1. 構建 CSSOM 樹：與DOM 相似，咱們須要對 CSS 構建樹。首先CSS 字節轉換成字符，接着轉換成令牌和節點，最後連接到一個稱爲「CSS 對象模型」(CSSOM) 的樹結構內，CSSOM 樹長這樣

​​
3.合成渲染樹：將 DOM 樹和 CSSOM 樹合併成一棵渲染樹，長這樣

​​
4.繪製/柵格化：咱們已經知道各個元素的樣式和佈局方式了，接下來就是瀏覽器內核（平時說的 webkit 內核）來計算，將渲染樹中的每一個節點轉換成屏幕上的實際像素。
5.繪製到屏幕。

喜歡的能夠關注小編喲~
工做日每日一更新~