提升瀏覽器渲染頁面速度

時間 2019-11-09

原文原文鏈接

怎樣儘量的縮短瀏覽器上頁面渲染的時間，能夠從如下幾方面着手：javascript

寫出高效的css代碼
避免使用css表達式
把css文件放在頁面頂部
指定頁面圖片的尺寸
頁面頭部標明文檔編碼

一，寫出高效的css代碼css

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

瞭解過程後，咱們能夠看出能夠從兩方面優化咱們的css代碼：1，定義的css樣式規則條數越少越好，因此趕忙刪除css文件中沒必要要的樣式定義；2，優化每條規則的選擇符書寫方式，儘可能讓css引擎一看就知道這個規則是否須要應用到當前這個元素上，讓引擎少走沒必要要的彎路。java

如如下幾種效率不高的css書寫方式：瀏覽器

  
  
  
  
   
   
   
   body * {...} 
   
   
   
   hide-scrollbars * {...}

b, 用標籤作關鍵選擇符服務器

  
  
  
  
   
   
   
   ul li a {...} 
   
   
   
   #footer h3 {...} 
   
   
   
   * html #atticPromo ul li a {...}

c, 多此一舉的寫法markdown

  
  
  
  
   
   
   
   ul#top_blue_nav {...} 
   
   
   
   form#UserLogin {...}

d, 給非鏈接標籤添加 :hover 僞類，這會對用了strict doctype的頁面在IE7和IE8下變的很慢。網絡

  
  
  
  
   
   
   
   h3:hover {...} 
   
   
   
   .foo:hover {...} 
   
   
   
   #foo:hover {...} 
   
   
   
   div.faa :hover {...}

優化建議：dom

a, 避免使用通配符；ide

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

c, 不要多此一舉把id和class或標籤和class等連着寫；

d, 儘可能避免使用後代選擇符，去除沒必要要的祖先元素，能夠考慮使用class選擇符來替換後代選擇符；

  
  
  
  
   
   
   
   /*給無序和有序的li定義不一樣顏色，你可能會這樣寫：*/ 
   
   
   
   ul li {color: blue;} 
   
   
   
   ol li {color: red;} 
   
   
   
   /*給li添加class，這樣定義效率會更高：*/ 
   
   
   
   .unordered-list-item {color: blue;} 
   
   
   
   .ordered-list-item {color: red;}

e, 避免給非鏈接標籤添加 :hover 僞類。

二，避免使用css表達式

css表達式僅在ie瀏覽器下才起做用，微軟已在ie8後不推薦使用，由於它會嚴重影響頁面性能：任什麼時候候，無論任何一個事件被觸發，例如窗口的 resize 事件，鼠標的移動等等，css表達式都會從新計算一遍。

三，把css文件放在頁面頂部

把外聯或內聯樣式表放在body部分會影響頁面渲染的速度，由於瀏覽器只有在全部樣式表下載完成後纔會繼續下載頁面其餘內容。另外，內聯樣式表（放在<style>內的樣式）有可能會引發頁面從新渲染或顯示隱藏頁面中的某些元素，建議不要使用內聯樣式表。

四，指定頁面圖片的尺寸

指定頁面圖片尺寸，要符合圖片的真實尺寸（不要經過指定尺寸來縮放圖片），能夠避免尺寸改變致使的頁面結構效果的變化，因此對加快頁面渲染速度有益。

五，頁面頭部標明文檔編碼

HTML文檔是以包含文檔編碼信息的數據流方式在網絡間傳輸。頁面的編碼信息通常會在HTTP響應的頭部信息或在文檔內的HTML標記中指明。客戶端瀏覽器只有在肯定了頁面編碼後才能正確的渲染頁面，因此在繪製頁面或執行任何的javascript代碼前，大部分的瀏覽器（ie六、ie七、ie8除外）都會緩衝必定字節的數據來從中查找編碼信息，不一樣的瀏覽器當中預緩衝的字節數是不同的。若是瀏覽器在接收到了設定的預緩衝數據量後尚未找到頁面的編碼信息，便會根據各自指定的默認編碼開始渲染頁面，若是這時再獲取到頁面編碼信息，而又跟如今所用編碼不一致，那整個頁面就得從新渲染，某些狀況下甚至須要從新獲取數據。因此，對於大小超過1KB的頁面（根據在各瀏覽器的測試狀況，預緩衝數據量最多的也就1KB）應當儘早標明編碼信息。

優化建議：

a, 儘可能在HTTP頭部信息中標明頁面編碼（這個須要在服務器端設置）。像Firefox瀏覽器，若是在HTTP頭部信息就獲取到了編碼信息，便會預緩衝更少的數據從而減小沒必要要的數據緩衝時間；

b, 在HTML的 <head> 部分標明編碼信息；

c, 要習慣給文檔指定編碼；

d, 給頁面指定的編碼要符合頁面實際編碼；若是你在HTTP頭部信息和HTML標記中同時指定了編碼，需確保編碼信息一致。

原文連接：http://www.wufangbo.com/browser-page-rendering-speed/