頁面性能優化

有著名的Yslow 23條優化規則：
1. 減小HTTP請求次數儘可能合併圖片、CSS、JS。好比加載一個頁面，若是有5個css文件的話，那麼會發出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而若是把這個5個文件合成一個的話，就只須要發出一次http請求，節省網絡請求時間，加快頁面的加載。
2. 使用CDN網站上靜態資源即css、js全都使用cdn分發，圖片亦然。
3. 避免空的src和href當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值，從而把頁面的內容加載進來做爲它們的值。因此要避免犯這樣的疏忽。
4. 爲文件頭指定Expires
Exipres是用來設置文件的過時時間的，通常對css、js、圖片資源有效。 他可使內容具備緩存性，這樣下回再訪問一樣的資源時就經過瀏覽器緩存區讀取，不須要再發出http請求。以下例子：<img src="https://pic1.zhimg.com/50/bfa4b58630eec8492318aa88cbb23378_hd.jpg" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width="1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.jpg">新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.5. 使用gzip壓縮內容gzip可以壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部網頁上的資源加載時從上網下順序加載的，因此css放在頁面的頂部可以優先渲染頁面，讓用戶感受頁面加載很快。
7. 把JS放到底部 加載js時會對後續的資源形成阻塞，必須得等js加載完纔去加載後續的文件 ，因此就把js放在頁面底部最後加載。

8. 避免使用CSS表達式舉個css表達式的例子 font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );這個表達式會持續的在頁面上計算樣式，影響頁面的性能。而且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中目的是緩存文件，能夠參考原則4。 但有時候爲了減小請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。

10. 權衡DNS查找次數減小主機名能夠節省響應時間。但同時，須要注意，減小主機會減小頁面中並行下載的數量。IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。因此新浪會搞N個二級域名來放圖片。下面是新浪微博的圖片域名，咱們能夠看到他有多個域名，這樣能夠保證這些不一樣域名可以同時去下載圖片，而不用排隊。不過若是當使用的域名過多時，響應時間就會慢，由於不用響應域名時間不一致。<img src="https://pic2.zhimg.com/50/1b3b00a1c147fc9211b6a90d55788a22_hd.jpg" data-rawwidth="599" data-rawheight="62" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic2.zhimg.com/1b3b00a1c147fc9211b6a90d55788a22_r.jpg">
11. 精簡CSS和JS這裏就涉及到css和js的壓縮了。好比下面的新浪的一個css文件，把空格回車所有去掉，減小文件的大小。如今的壓縮工具備不少，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉有種現象會比較坑爹，看起來沒什麼差異，其實屢次了一次頁面跳轉。好比當URL本該有斜槓（/）卻被忽略掉時。例如，當咱們要訪問 http://baidu.com 時，實際上返回的是一個包含301代碼的跳轉，它指向的是 http://baidu.com/（注意末尾的斜槓）。在nginx服務器可使用rewrite；Apache服務器中可使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。另外一種是不用域名之間的跳轉， 好比訪問 http://baidu.com/bbs 跳轉到http://bbs.baidu.com/。那麼能夠經過使用Alias或者mod_rewirte創建CNAME（保存一個域名和另一個域名之間關係的DNS記錄）來替代。

13. 刪除重複的JS和CSS重複調用腳本，除了增長額外的HTTP請求外，屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存，它們都存在重複運算JavaScript的問題。
14. 配置ETags它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具備彈性，例如某個文件在1秒內修改了10次，Etag能夠綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用，可取後兩個參數。使用ETags減小Web應用帶寬和負載
15. 可緩存的AJAX異步請求一樣的形成用戶等待，因此使用ajax請求時，要主動告訴瀏覽器若是該請求有緩存就去請求緩存內容。以下代碼片斷, cache:true就是顯式的要求若是當前請求有緩存的話，直接使用緩存 $.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){
}
}）
16. 使用GET來完成AJAX請求當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，而後才發送數據。所以使用GET獲取數據時更加有意義。

17. 減小DOM元素數量這是一門大學問，這裏能夠引伸出一堆優化的細節。想要具體研究的能夠看後面推薦書籍。總之大原則減小DOM數量，就會減小瀏覽器的解析負擔
18. 避免404好比外鏈的css或者js文件出現問題返回404時，會破壞瀏覽器對文件的並行加載。而且瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分看成JavaScript代碼來執行。
19. 減小Cookie的大小Cookie裏面別塞那麼多東西，由於每一個請求都得帶着他跑
20. Cook使用無cookie的域好比CSS、js、圖片等，客戶端請求靜態文件的時候，減小了ie 的反覆傳輸對主域名的影響。
21. 不要使用濾鏡IE獨有屬性AlphaImageLoader用於修正7.0如下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器加載圖片時它會終止內容的呈現而且凍結瀏覽器。在每個元素（不只僅是圖片）它都會運算一次，增長了內存開支，所以它的問題是多方面的。徹底避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工做。若是你確實須要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。

22. 不要在HTML中縮放圖片好比你須要的圖片尺寸是50* 50<img width=」50″ height=」50″ src=「hahah.jpg」 alt=」hahaha」 />那就不用用一張500*500的大尺寸圖片，影響加載
23. 縮小favicon.ico並緩存

推薦：
《高性能網站建設指南（第二版》

https://www.zhihu.com/question/33032042/answer/141739483

http://www.w3cui.com/?p=271

最終總結：
====>>>>
1. 減小HTTP請求次數儘可能合併圖片、CSS、JS。好比加載一個頁面，若是有5個css文件的話，那麼會發出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而若是把這個5個文件合成一個的話，就只須要發出一次http請求，節省網絡請求時間，加快頁面的加載。

11. 精簡CSS和JS這裏就涉及到css和js的壓縮了。好比下面的新浪的一個css文件，把空格回車所有去掉，減小文件的大小。如今的壓縮工具備不少，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。

12：刪除重複腳本

2. 使用CDN網站上靜態資源即css、js全都使用cdn分發，圖片亦然。

6. 把CSS放到頂部網頁上的資源加載時從上網下順序加載的，因此css放在頁面的頂部可以優先渲染頁面，讓用戶感受頁面加載很快。
7. 把JS放到底部 加載js時會對後續的資源形成阻塞，必須得等js加載完纔去加載後續的文件 ，因此就把js放在頁面底部最後加載。

9. 將CSS和JS放到外部文件中目的是緩存文件，能夠參考原則4。 但有時候爲了減小請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。

8.GZIP 壓縮文件
9.使用ajax緩存

10.減小DNS查詢

11.避免重定向

4. 爲文件頭指定Expires
Exipres是用來設置文件的過時時間的，通常對css、js、圖片資源有效。 他可使內容具備緩存性，這樣下回再訪問一樣的資源時就經過瀏覽器緩存區讀取，不須要再發出http請求。以下例子：<img src="https://pic1.zhimg.com/50/bfa4b58630eec8492318aa88cbb23378_hd.jpg" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width="1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.jpg">新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.5. 使用gzip壓縮內容gzip可以壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。

13.配置ETag
14.避免使用css表達式

 

 https://blog.csdn.net/an1090239782/article/details/78166983#%E4%B8%89%E6%B7%BB%E5%8A%A0expires%E5%A4%B4