資訊專欄INFORMATION COLUMN
摘要：總的來說，過程分以下幾步處理標記并構建樹。不說這些題外話了，我們下面來畫幾個圖，幫助大家更清楚的理解的工作過程。
在平時的工作中，可能都是再用一些框架或者是簡單的CSS來修飾我們的HTML頁面，那么仔細想想一個資深的前端從業者，是否需要知道他的工作原理和過程呢，技術這種東西，當然是我們了解的越多，才會使用的越得心應手。那么下面，我就為大家來介紹一下CSS的工作過程把。
有個經典的問題：從你輸入 URL 到看到頁面都發生了什么？這個問題回答可長可短，回答詳細了扯上大幾千字都不是問題。這里我從接收到 HTML，CSS，JS 等各種文件之后開始說，前面的都不是本題重點了。
總的來說，過程分以下幾步：
處理 HTML 標記并構建 DOM 樹。
處理 CSS 標記并構建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據渲染樹來布局，以計算每個節點的幾何信息。
將各個節點繪制到屏幕上。
是不是感覺很神奇，簡單的幾個過程就能讓我們的頁面變得好看起來，這還是屬于很淺的一些內容，更深層次東西在bob老師最近的直播課中經常有講到，大家可以多多關注哦。不說這些題外話了，我們下面來畫幾個圖，幫助大家更清楚的理解CSS的工作過程、。
構建 DOM Tree：HTML 文件加載后，瀏覽器開始構建 DOM Tree，DOM Tree 就是描述 HTML 文檔中元素層疊關系的一棵樹，長這樣
??
構建 CSSOM 樹：與DOM 類似，我們需要對 CSS 構建樹。首先CSS 字節轉換成字符，接著轉換成令牌和節點，最后鏈接到一個稱為“CSS 對象模型”(CSSOM) 的樹結構內，CSSOM 樹長這樣
??
3.合成渲染樹：將 DOM 樹和 CSSOM 樹合并成一棵渲染樹，長這樣
??
4.繪制/柵格化：我們已經知道各個元素的樣式和布局方式了，接下來就是瀏覽器內核（平時說的 webkit 內核）來計算，將渲染樹中的每個節點轉換成屏幕上的實際像素。
5.繪制到屏幕。
喜歡的可以關注小編喲~
工作日每日一更新~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54796.html
摘要：的主要組件包含了一個全新的引擎，稱為量子，也稱為。這個新引擎集成了四種不同瀏覽器的最新創新技術，創造出一個全新的超級引擎。這可以發生在多個圖層上。最終，擁有最高特異性的規則會勝出。 原文：Inside a Super Fast CSS Engine: Quantum CSS(Aka Stylo), Lin Clark 注：原文發布于 2017 年 8 月，本文翻譯于 2018 年 4 ...
摘要：問預處理器的出現是否意味著開發者社區對有所不滿你認為有哪些地方需要改變定義了可以做什么，而其他人制造工具讓變得更好用。對于現在流行的預處理器，哪一個最好并沒有共識，但是是使用更加廣泛的一個。 非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/article/124049 Charles Wyke-Smith一直從事與線上應...
摘要：它制定了整個平臺的規則，監督整個進程。特邀專家指的是被邀請參與標準制定的開發者，都是一些技術大牛。備注數據來源于揭秘三制定過程制定過程是公開透明的，內部交流都是公開的。 W3C的標準規范是怎么制定出來的？瀏覽器廠商是收到來自w3c的規范標準才結合自己的瀏覽器進行開發更新以支持新特性嗎？一直很好奇，搜集了一些資料，主要參考了W3C CSS工作組特邀專家Lea Verou寫的《CSS揭秘》...
閱讀 2929·2021-10-14 09:43
閱讀 2867·2021-10-14 09:42
閱讀 4640·2021-09-22 15:56
閱讀 2355·2019-08-30 10:49
閱讀 1587·2019-08-26 13:34
閱讀 2370·2019-08-26 10:35
閱讀 591·2019-08-23 17:57
閱讀 2023·2019-08-23 17:15
