從上圖，我們能看到這幾點：
瀏覽器會解析
解析完成後，瀏覽器引擎會通過dom tree 和 css rule tree 來構造 render tree（渲染樹）。注意：render tree 渲染樹並不等於dom樹，因為head元素和一些display:none的元素沒有放在渲染樹中
有下面的html示例如下：
這是乙個
大錯誤
這也是乙個
非常大的錯誤錯誤
另乙個錯誤
/*1.*/ div
/*2.*/ .err
/*3.*/ .big
/*4.*/ div span
/*5.*/ ＃div1
/*6.*/ #div2
注意：css匹配html元素是乙個相當複雜和有效能問題的事情。所以，你就會在n多地方看到很多人都告訴你，dom樹要小，css盡量用id和class，千萬不要過渡層疊下去，……
通過這兩個樹，我們可以得到乙個叫style context tree，也就是下面這樣（把css rule結點attach到dom tree上）：
這個時候就有必要說下這個css選擇器特性了
css選擇器由css2規範定義如下：
連線四個數字abcd（在具有大基數的數字系統中）具有特異性。
這個四個數字保持的優先順序是：a>b>c>d
您需要使用的數字基數由您在其中乙個類別中的最高數量定義。
例如，如果a = 14，您可以使用十六進製制基數。在不太可能的情況下，您將需要乙個17位數的基數。後來的情況可能會發生在這樣的選擇器：html body div div p ...（你的選擇器中的17個標籤不太可能）。
一些例子：
* {} / * a = 0 b = 0 c = 0 d = 0 - > specificity = 0,0,0,0 * /
li {} / * a = 0 b = 0 c = 0 d = 1 - >specificity= 0,0,0,1 * /
li：first-line {} / * a = 0 b = 0 c = 0 d = 2 - > specificity = 0,0,0,2 * /
ul li {} / * a = 0 b = 0 c = 0 d = 2 - > specificity = 0,0,0,2 * /
ul ol + li {} / * a = 0 b = 0 c = 0 d = 3 - > specificity = 0 ，0,0,3 * /
h1 + * [rel = up] {} / * a = 0 b = 0 c = 1 d = 1 - > specificity = 0,0,1,1 * /
ul ol li.red {} / * a = 0 b = 0 c = 1 d = 3 - > specificity = 0,0,1,3 * /
li.red.level {} / * a = 0 b = 0 c = 2 d = 1 - > specificity = 0,0,2,1 * /
＃test {} / * a = 0 b = 1 c = 0 d = 0 - > specificity = 0,1,0,0 * /
style =「」/ * a = 1 b = 0 c = 0 d = 0 - > specificity = 1,0,0,0 * /
css2規範
瀏覽器渲染原理解析
頁面為什麼會慢？那是因為瀏覽器要花時間 花精力去渲染，尤其是當它發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，內行稱這個回退的過程叫reflow。reflow問題是可以優化的，我們可以儘量減少不必要的reflow。比如開頭的例子中的 載入問題，這其實就是乙個可以避免的reflow 給設定寬...
瀏覽器原理
網上找了些資料，記錄下部落格連線 how browsers work behind the scenes of modern web browsers 瀏覽器執行機制 回流 重繪 關鍵渲染路徑 學習筆記。請參看分享的文章先。瀏覽器資訊部分 記錄點 1主流瀏覽器有五個 internet explore...
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...