衡量高性能網站的幾個標準
- 頁面加載時間
- 瀏覽器性能發揮
- 網絡性能
- 開發效率
瀏覽器渲染html原理
首先，HTML被解析成一棵DOM樹，也叫做文檔對象模型。這就是爲什麼瀏覽器要在第一時間下載頁面的HTML的原因之一，另外一個原因是HTML包含了展示頁面所需要的其他所有資源（樣式、圖片、腳本等）。然後第二棵樹是DOM樹和CSS樣式表結合起來構成的渲染樹。其中CSS樣式表不僅包含你自定義的，也包含瀏覽器默認的樣式。根據這棵樹，瀏覽器開始了由上、右、下到左的順時針元素繪製。
不同的瀏覽器對CSS、JavaScript和HTML的部分API支持不一樣。
根據上面的介紹我們不難得出結論：
- 減少HTML中元素數量（不要濫用HTML，做到最少量但必須的HTML去佈局）
- 減少重繪（如果在執行腳本時動態的更改DOM結構和CSS樣式都會引發瀏覽器重新繪製，例如在用js操作一個div的多個樣式屬性時，建議將div的更改後的樣式定義爲一個CSS類，然後用js直接操作div的class屬性即可）
- 在書寫CSS代碼時，注意書寫的順序（例子：不要padding-bottom:1px;padding-top:1px;遵循順時針）
- 編寫漸近式增強代碼（什麼意思呢，就是編寫代碼的時候首先滿足所有瀏覽都支持的寫法，再嘗試往後疊加新的方法來滿足新的瀏覽器）
性能優化準則
下面的先後順序對網站性能的影響是由高到低的，所以在進行網站性能優化的時候可以按照這樣的順序來進行優化。
- 減少http請求
- 使用CDN加速
- 避免空的src和href屬性值
- 增加資源文件過期頭
- 應用GZIP壓縮
- 把CSS放到頭部
- 把JavaScript代碼放到尾部
- 刪除不使用的CSS語句
- 對JavaScript、CSS進行壓縮
- 減少重繪
下面具體講一下上面幾個準則的實際應用方法
減少http請求
減少http請求主要從以下三個方面下手：
- 並行連接
現在的瀏覽器大都支持並行連接，根據此特性我們可以把資源文件放到 不同的域名下，可以提高加載效率，但是DNS的查詢是要耗時的，如果域 名過多，又會讓網頁加載變慢。
這個具體介紹了不同瀏覽器的並行連接數https://blog.csdn.net/williham/article/details/7251091
- 合併資源文件
根據並行連接理論我們可以得處一個道理，數量少體積大的文件要比數量多體積小的文件加載速度更快，因此如果可以合併資源，減少http請求，贏得時間給頁面渲染。實際操作中我們可以合併css文件爲一個文件合併JavaScript文件爲一個文件。 - 使用精靈圖
精靈圖是針對大型網站有大量使用圖片和圖標的網站而準備的，就是把各個圖標繪製到一張圖上，根據css的去定位使用具體的位置。
使用CDN加速
CDN是一個擁有很多很多服務器、經過策略性部署的可以覆蓋全球的網絡系統。只要有人訪問你的網站它就會從最近的一個節點取數據給它。但是這些節點緩存的數據是不易改動的，所以你最好在CSDN上存放靜態資源文件。特別是在處理時間等信息的時候很難以控制。
避免空的src和href值
在頁面加載的過程中，一個空的src屬性的img元素被JavaScript動態的賦值。這樣做的問題是，在腳本執行倩元素就被瀏覽器渲染了，所以瀏覽器依然會發起一個http請求，這雖然不影響加載時間，但是會對服務器產生不必要的流量和壓力，嚴重的以至於影響整個用戶體驗，修正href裏沒有值的操作
<a href="javascript:;">Trigger</a>
增加過期頭
Expires headers是服務端返回的頭信息，它可以告知瀏覽器某一個文件的過期時間，瀏覽器會根據這個時間來決定是否從服務器下載該文件，還是從本地緩存裏獲取這個文件。
Expires headers的工作內容相當簡單，它會告知某個文件在瀏覽器緩存目錄中保留多久，這樣後續頁面中有這個文件就不需要重新下載了。
壞處：當你想讓用戶得到最新的而不是緩存的數據時，就必須更改文件名，所以最好是有一套文件名版本控制機制。
開啓GZIP壓縮
在配置GZIP壓縮的時候要注意，不要壓縮圖片，因爲圖片本身就是一個壓縮文件，這會導致壓縮機制把原有圖片體積變大，適得其反。
把CSS的引用放到頭部
如果把css的樣式文件放到頁面的底部，那麼瀏覽器就會等所有文件都加載完成了之後纔會去渲染頁面。
把JavaScript放到尾部使用defer屬性
腳本會阻止並行加載，換句話說，當瀏覽器加載一個腳本時，它不會去加載其他文件，如果腳本在頭部，它就會阻止頁面的渲染，開始的時候用戶什麼也看不到。當然在使用defer屬性的時候，就意味着JavaScript代碼中沒有dom操作，帶defer屬性的JavaScript的引用會異步加載。
避免使用CSS表達式
例如下面的案例：
Object.style.left=(document.body.clientWidth/2)-(Object.offsetWidth/2);
以上代碼在打包壓縮後會比正常的css長的多，用css表達式簡直一點兒意義也沒有。而且css表達式有一個致命的缺點是執行的頻率超乎你想象，只要頁面一滾動它就會重複執行，甚至鼠標移動的時候也會執行。
移除不必要的css或者JavaScript代碼
目前大多數的瀏覽器樣式引擎都是通過遍歷css規則來尋找匹配的元素，不使用的css語句會增大css文件體積，拖慢加載時間，耗費帶寬。
對css和JavaScript代碼進行壓縮
網上有很多代碼壓縮工具，可自行百度。
減少重繪
- 規定圖片的寬高，不規定寬高瀏覽器預留的區域不確定，容易導致重繪
- 不要用表格佈局
- 定義字符集，大多數瀏覽器會根據head的標籤裏的字符集來渲染頁面
- 不要重組DOM
以上就是分享給大家的網站性能優化方法，觀點可能存在問題，歡迎大家留言討論。如果大家希望瞭解的更深一點兒，可以去了解一下瀏覽器的運行機制。