我們先來看乙個瀑布圖來確定乙個頁面效能問題是由哪些項造成的。chorome自帶開發人員工具
圖中每一行表示乙個http請求，每乙個請求都有一條時間線，用於標識這個請求所花費的時間。如果將滑鼠放到某一條時間線上，可以看到以下資訊
網域名稱解析：搜尋dns伺服器並解析網域名稱為ip位址所花費的事件，這裡是0ms建立連線：客戶端通過ip位址與web伺服器簡歷連線所花費的時間，這裡是562ms傳送請求：客戶端向web服務端傳送請求所花費時間等待響應：伺服器從接收http請求到開始響客戶端傳送內容所花費事件，這裡是391ms，這段事件通常包括資料庫查詢，頁面轉換為html等操作 接收資料：伺服器的響應內容全部傳送到客戶端時間，這裡是94ms1）首先看一下哪個請求花費的時間比較長，看看這個請求的時間線資訊，確定是伺服器響應慢了還是網路的問題。
2）如果每個請求所花費的時間都沒有明顯高於其他，那麼就看一下是不是頁面的http請求總數太多了。因為瀏覽器對單個網域名稱的併發連線數是有限制的，需要處理完一批請求再傳送另一批請求。假設頁面有100個請求，每個請求花費1s，瀏覽器最大併發數限制為10個，那麼處理完所為請求就需要100/10*1s=10s的時間。
關於最大併發數，http1.1的標準是2，而目前主流的瀏覽器ie、firefox、chrome為了提高速度，分別修改為10、6、6（根據具體版本可能有所變化）。
一項專門研究就網頁效能的工程師發現，乙個頁面從請到載入完成，80%的時間花在前端上。事實也是如此，以圖一為例，整個頁面完全載入完成花費12s，伺服器響應事件只有391ms，其他事件都花費在獲取頁面靜態檔案（js，css，上），所以優化**應從前端效能優化下手
避免空連線屬性 空連線指：img，link script和iframe元素的src或href屬性的值為空（如：src=)，一般瀏覽器會將空解析為blank，付傳送請求。但是ie還是會傳送請求的
避免節點深層次巢狀 層級越深的節點在初始化構建時，所占用記憶體越多
縮減html文件大小 刪除對執行結果無影響的空行和注釋
避免指令碼阻塞載入
瀏覽器在解析常規script標籤時，會等待script**完成後，才解析執行，之後的html**就只能等待，所以應將指令碼放在文件末尾
使用css壓縮 css壓縮並不是什麼高階姿態，但是很有用，其原理很簡單，就是把我們css中沒用的控台符號刪去，達到縮減字元的目的。我們有這樣一段css指令碼.test經過壓縮後變成這樣
.test
抽離，拆分css，不加在所有css
抽離css是指把一些通用的css放到乙個檔案內，而不是寫道各個頁面，這樣一次**後，其它頁面用到的時候就可以利用快取了，減少不必要的重複**。
應用抽離原則，在很多時候我們把頁面通用的css寫到了乙個檔案，這樣載入一次後就可以利用快取，但這樣做並不適合所有場景，以前我寫css把一些前端外掛程式用的css全寫到了乙個頁面，但是有時候頁面只會用乙個dialog、有的頁面只用到了乙個treeview，但卻把十多個外掛程式的css都**到了頁面，這就是問題了，所以雖然把css寫道乙個檔案可以減少http請求，但像剛才的這種情況是不應該這樣做的，對一些所有頁面都會用到的我們可以這樣做，所以我們在抽離和拆分的時候可要想好了
使用css sprites 使用sprites，可以減少http的請求次數
css放在head中
相信做web的同學都知道這條建議，但為什麼css放在頁面頂部有利於網頁優化呢？瀏覽器渲染頁面大概是這樣的，當瀏覽器從上到下一邊**html生成domtree一邊根據瀏覽器預設及現有css生成render tree來渲染頁面，當遇到新的css的時候**並結合現有css重新生成render tree，剛才的渲染工作就白費了，如果我們把所有css都放到頁面頂部，這樣就沒有重新渲染的過程了
不要用標籤名限制class規則web效能的優化，主要還得根據工具分析來檢視，對症下藥，應該主要影響方面進行優化。
Web效能優化
我們先來看乙個瀑布圖來確定乙個頁面效能問題是由哪些項造成的。chorome 自帶開發人員工具 圖中每一行表示乙個 請求，每乙個請求都有一條時間線，用於標識這個請求所花費的時間。如果將滑鼠放到某一條時間線上，可以看到以下資訊 1 首先看一下哪個請求花費的時間比較長，看看這個請求的時間線資訊，確定是伺服...
web效能優化
可以用gulp的gulp uglify gulp minify css模組完成 還可以用webpack的uglifyjsplugin壓縮外掛程式完成。通過css sprites將多個整合到乙個中，在用css來定位。伺服器在處理大流量的資料是十分困難的，這最終導致頁面載入速度變慢。cdn是位於全球不同...
web 效能優化
優化方向有兩個 http 請求 js 載入 開啟瀏覽器控制台的網路，可以看到從拉取模版開始到首次渲染中間到底在載入什麼，如果中間某些資源載入速度過慢，則可以從這方面入手，否則的話有可能是解析 js 速度過慢導致。請求優化 合理使用快取 合理使用快取，降低請求等待的時間，可以通過達到效能優化 cdn ...