關於前端性能優化

咱們先來看一張圖來肯定一下頁面性能是由哪些部分組成的

　　

　　域名解析：搜索DNS服務器並解析域名IP所花費的時間，爲5.864ms

　　創建連接：客戶端經過ip地址與web服務器創建連接的時間，爲48.275ms

　　發送請求：客戶端向web服務器端發送請求所花費的時間，爲0.620ms

　　等待響應：服務器端從接受http請求到開始響應客戶端內容所花費的時間，爲273.078ms,這段時間包括數據查詢，頁面轉換爲html格式等

　　接收數據：服務器端的響應內容所有發送到客服端的時間，爲4.55ms

初步診斷網站性能瓶頸：

　　1.首先看一下那個請求花費時間最長，看看這個請求的時間線信息，來肯定是服務器端響應慢了仍是網絡問題

　　2.若是每一個請求花費的時間都沒有明顯高於其餘，那就檢查一下是否是這個頁面發送的http請求次數過多了。由於瀏覽器對單個域名的併發鏈接數有限制的，須要處理完一批請求以後，在發送另一批請求。假如頁面有100個請求，每一個請求花費時間爲1s,瀏覽器最大併發數顯示爲10，那麼處理完全部請求花費時間爲100/10*1s=10s的時間。

關於最大併發數，http1.1的標準是2，而目前主流的瀏覽器IE、FireFox、Chrome爲了提升速度，分別是10,6,6（根據具體版本可能會有變更）

前端性能策略：

　　 一項專門研究網頁性能的工程師發現，一個頁面從請求到加載完成，80%的時間都花在了前端上。事實也是如此，大多數時間都花費在獲取前端靜態文件（html,css,js）上，因此優化網站應該從前端性能着手

高性能的Html:

　　1.避免空鏈接

　　　　什麼是空鏈接？空連接指的就是img,a,script,link,iframe等的src或者href,如（href=""）,通常瀏覽器會把它解析爲blank,可是IE仍是會發送請求的。

　　2.避免標籤的深層次嵌套

　　　　層次越多的節點，在初始化構建時候所佔用內存越大

　　3.減少html文檔大小

　　　　刪除對文本無影響的換行，空格或者註釋，因此大多數網站上線前都會壓縮文件，就是爲了減少文件大小

　　4.避免腳本阻塞加載

　　　　瀏覽器在解析常規script標籤時候，會先等待js下載完畢，在執行後邊的html代碼，因此最好的建議是把script放在頁面的底部

高性能的Css:

　　1.使用css壓縮

　　　　css壓縮其實和html相似，就是把css中的多餘的空格，換行，註釋等刪掉，達到縮減字符的目的，以下圖所示：

　　　　

　　2.抽離，拆分css,不加載全部css

　　　　抽離css就是把一些通用的css放到一個公用的文件裏，而不是寫到各個頁面。這樣其餘頁面用到時候就能夠醫用緩存了，減小了沒必要要的重複下載。

　　　　應用抽離原則，在不少時候咱們把頁面通用的CSS寫到了一個文件，這樣加載一次後就能夠利用緩存，但這樣作並不適合全部場景，之前我寫CSS把一些前端插件用的CSS全寫到了一個頁面，可是有時候頁面只會用一個Dialog、有的頁面只用到了一個TreeView，但卻把十多個插件的CSS都下載到了頁面，這就是問題了，因此雖然把CSS寫道一個文件能夠減小http請求，但像剛纔的這種狀況是不該該這樣作的，對一些全部頁面都會用到的咱們能夠這樣作，因此咱們在抽離和拆分的時候可要想好了

　　3.使用css sprites

　　　　使用sprites，能夠減小Http的請求次數

　　4.css放在head中

　　　　相信作web的同窗都知道這條建議，但爲何CSS放在頁面頂部有利於網頁優化呢？瀏覽器渲染頁面大概是這樣的，當瀏覽器從上到下一邊下載html生成DOMtree一邊根據瀏覽器默認及現有CSS生成render tree來渲染頁面，當遇到新的CSS的時候下載並結合現有CSS從新生成render tree，剛纔的渲染工做就白費了，若是咱們把全部CSS都放到頁面頂部，這樣就沒有從新渲染的過程了

　　5.不要用標籤名限制class規則

小結：

　　Web性能的優化，主要還得根據工具分析來查看，對症下藥，應該主要影響方面進行優化。