關於頁面渲染

最近在學習公司的產品時發現在開啟報表設計頁面時，頁面的渲染和載入較慢.於是我想到了關於頁面渲染的優化.下面是關於如何優化頁面渲染的建議:

一，寫出高效的css**

首先弄清瀏覽器解析html**的過程：構建乙個dom樹，頁面要顯示的各元素都會建立到這個dom樹當中。每當乙個新元素加入到這個dom樹當中，瀏覽器便會通過css引擎查遍css樣式表，找到符合該元素的樣式規則應用到這個元素上。css引擎查詢樣式表，對每條規則都按從右到左的順序去匹配。

了解過程後，我們可以看出可以從兩方面優化我們的css**：1，定義的css樣式規則條數越少越好，所以趕緊刪除css檔案中不必要的樣式定義；2，優化每條規則的選擇符書寫方式，盡量讓css引擎一看就知道這個規則是否需要應用到當前這個元素上，讓引擎少走不必要的彎路。

優化建議：

避免使用萬用字元；

讓css引擎快速辨別該規則是否適用於當前元素：多用id或class選擇符，少用標籤選擇符；

不要畫蛇添足把id和class或標籤和class等連著寫；

盡量避免使用後代選擇符，去除不必要的祖先元素，可以考慮使用class選擇符來替換後代選擇符；

避免給非連線標籤新增 :hover 偽類。

盡量在http頭部資訊中標明頁面編碼（這個需要在伺服器端設定）。像firefox瀏覽器，如果在http頭部資訊就獲取到了編碼資訊，便會預緩衝更少的資料從而減少不必要的資料緩衝時間；

在html的部分標明編碼資訊；

要習慣給文件指定編碼；

給頁面指定的編碼要符合頁面實際編碼；如果你在http頭部資訊和html標記中同時指定了編碼，需確保編碼資訊一致。