css之提高渲染性能的寫法

css之提高渲染性能的寫法

最近今天在看web標準，看到了一條css樣式表要用外聯的形式，這樣可以提高渲染速度。對於渲染速度，（css3渲染速度快，頁面顯示的快）上網看了很多帖子與論壇，總結了一些，如有不足，歡迎大家補充。

1.不要使用*{} 類似的通配符

        這種方法雖然寫起來簡單，但是渲染起來，瀏覽器引擎要遍歷所有的標籤，很影響效率。爲了對瀏覽器友好，可以把自己經常用的標籤進行重置操作。

2.css選擇器的嵌套不要太多

        絕對沒有比用後代選擇器更改糟糕的做法了，因爲瀏覽器讀取css選擇器有一個很重要的原則，那就是從右到左讀取。所以儘量避免使用後代選擇器，要去除不必要的祖先元素，可以考慮使用類選擇器來替換後代選擇器

3.不要在樣式表中書寫不存在的class

4.儘量少用絕對定位

         雖然絕對定位可以很簡潔的實現很棒的效果，但是由於瀏覽器的渲染機制，網頁中如果用過多的絕對定位，會讓網頁加載速度變得很慢。

5.讓屬性儘可能多的去繼承，而不是覆蓋。

6.儘量不去用濾鏡

          濾鏡的使用不僅存在瀏覽器兼容的問題，還很耗費資源。如果一定要達到濾鏡的效果，可以考慮用圖片去實現

7.避免使用css表達式

        css表達式盡在ie瀏覽器下才起作用，ie8後不推薦使用，因爲他會嚴重影響頁面性能。任何時候，不管任何一個事件被觸發，例如窗口的resize事件，鼠標的移動等等，css表達式都會重新計算一遍。

8.把css文件放在頁面頂部

       把外聯或內聯樣式表放在body部分會影響頁面渲染的速度，因爲瀏覽器只有在所有樣式表下載完成後纔會繼續下載其他頁面內容。另外內聯樣式表有可能會引起頁面重新渲染或顯示隱藏頁面中的某些元素，所以建議使用外聯樣式表，不要使用內聯樣式表

9.頁面頭部表名文檔編碼

        html文檔是以包含文檔編碼信息的數據流方式在網絡間傳輸。頁面的編碼信息一般會在http對應的頭部信息或在文檔內的html標記中指明。客戶瀏覽器只有在確定的頁面編碼後才能正確的渲染頁面，所以在繪製頁面前，大部分瀏覽器會緩衝一定字節的數據來從中尋找編碼信息。不同的瀏覽器預緩衝的字節數是不一樣的，如果瀏覽器接收到了設定的預緩衝數據量信息後還沒有找到頁面的編碼信息，便會根據各自制定的默認編碼渲染頁面。如果此時再獲取到頁面編碼信息，和現在所用的不一致，那麼整個頁面就得重新渲染，使渲染速度大大降低。所以要習慣指定編碼信息，而且給頁面指定的編碼要符合頁面實際編碼；如果在http頭部和html標記中同時指定了編碼，需要保證編碼信息一致

        （PS:看css渲染的時候，看到了頁面渲染，下面，就再寫一點關於頁面渲染的）

        頁面渲染就是瀏覽器將自己通過http等協議向服務器請求返回的頁面資源基於一定的規則（css語句，JS語句，瀏覽器自身的一些規則等）完成頁面佈局及繪製的過程。就是瀏覽器將HTML編程人眼看到圖像的全過程。在某論壇看到一條回覆，說的很形象，你要吃菜，你找到廚師說，我要尖椒肉絲。廚師就去翻菜譜，說，炒給你吃。在這裏，你是瀏覽者，菜是你將看到的頁面，廚師是瀏覽器，菜譜是頁面代碼，炒菜的過程就是頁面渲染。頁面渲染中包含了css渲染，同時還有html渲染，js渲染