瀏覽器渲染頁面、CSS原理及最佳化

在寫css代碼時 做一些簡單的最佳化，這樣css的渲染速率會有一定的提高的。

瀏覽器是如何渲染頁面和載入頁面

為什麼有些網站開啟的時候會載入會很慢，而且是整個頁面同時顯示的，而有些網站是從頂到下逐步顯示出來的？要搞懂這個可以先從下面這個常規流程開始：

1. 瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2. 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3. 如果遇到語義解釋性的標籤嵌入檔案（JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨串連進行下載。
4. 並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。
5. 樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6. JS、CSS中如有重定義，後定義函數將覆蓋前定義函數。
7. 這裡關鍵的是第2-5這三點。渲染效率與下面三點有關：
   1. css選取器的查詢定位效率
   2. 瀏覽器的渲染模式和演算法
   3. 要進行渲染內容的大小

什麼是CSS以及CSS的優點

什麼是CascadingStyleSheets（層疊樣式表）*CSS是CascadingStyleSheets(層疊樣式表)的 簡 稱.*CSS 語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言).*在標準網頁設計中CSS負責網頁內容 (XHTML)的表  現.*CSS檔案也可以說是一個文字檔,它包含了一些CSS標記,CSS檔案必須使用css為檔案名稱尾碼.*可以通過簡單的更改 CSS檔案,改變網頁 的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.*CSS是由W3C的CSS工作群組產生和維護的.

採用CSS+DIV進行網頁重構相對與傳統的TABLE網頁布局而具有以下3個顯著優勢：

1. 表現和內容相分離將設計部分剝離出來放在一個獨立樣式檔案中，HTML檔案中只存放文本資訊。這樣的頁面對搜尋引擎更加友好。
2. 提高頁面瀏覽速度對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的分頁檔容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3. 易於維護和改版你只要簡單的修改幾個CSS檔案就可以重新設計整個網站的頁面。

瀏覽器對CSS的匹配原理

瀏覽器CSS匹配是從右至左進行尋找。比如之前說的div#username p span.red{color:red;}，瀏 覽器的尋找順序如下：先尋找html中所有class=’red’的span元素，找到後，再尋找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為 username的div元素，如果都存在則CSS匹配上。

瀏覽器從右至左進行尋找的好處是為了儘早過濾掉一些無關的樣式規則和元素。firefox稱這種查 找方式為keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。

最佳化你的CSS

一：css 命名 、書寫規範；（好的代碼看上去就很整齊 很有條理性這樣方便日後的維護和管理）
二：css優先順序； 選取器權重：內聯樣式：1000，id選取器：1000， class選取器：10，標籤選取器：1  注意權重的問題。
三：少用濾鏡，少用hack，少用position：absolute；。
四：多用繼承屬性。
五：使用簡寫樣式：例如margin: 10px; 瀏覽器會解釋為上下左右各有10px的外補丁。margin： 0 10px 瀏覽器解析為 左右有10px的外補丁。
六：不要在ID選取器和class選取器前 使用標籤名 例如：div.box { color: #f00; }; 直接 可以 用類名， .box { color:#f00;}  這樣瀏覽器找到這個class後 就不用再匹配是否存在div標籤.從而提高了渲染效率。當然同一級的 有不同的樣式可以這樣寫，但是不建議這樣。
七：css的層級關係不要太深 用class直接代替多餘的層級元素。例如 .box .box-con .box-list li { line-height: 24px; } 這麼長。。。增加代碼量減小開發效率。剛也說了，css渲染是從上到下，從右至左的
所以直接這樣寫就可以了.box-list li { line-height: 24px; };

八：平鋪背景圖片不要過小，影響渲染速率。
九：float使用要謹慎。
十：合理化布局（模組化布局）；可以把樣式劃分為 基類 和擴充類 ;模組化布局 ：模組基本相同的樣式寫在 基類裡，不同的在重新用class來定義稱為擴充類 。

十一： 在css渲染效率中id和class的效率是基本相當的

class最在第一次載入中被緩衝，在層疊中會有更加好的效果，在根部元素採用id會具有更加好（id有微妙的速度優勢）。

在css渲染效率中id和class的效率是基本相當的

class最在第一次載入中被緩衝，在層疊中會有更加好的效果，在根部元素採用id會具有更加好（id有微妙的速度優勢）。