網站性能優化

簡要總結：

1.資源壓縮合並，減小http請求

2.非核心代碼異步加載（異步加載方式，異步加載區別）

異步加載到方式

• • 動態腳本加載
  • defer
  • async

異步加載的區別

• • defer是在HTML解析完以後執行，若是有多個，按照加載的順序依次執行
  • async是在加載完當即執行，若是有多個，執行順序和加載順序無關

3.利用瀏覽器緩存（緩存的分類，緩存的原理）

響應頭
1.強緩存
　　Expires: Thu,21 Jan 2017 23:39:02 GMT
　　Cache-Control: max-age=3600. (秒)
2.協商緩存
　　Last-Modified If-Modified-Since（Last-Modified Wed,26 Jan 2017 00:35:11 GMT）
　　Etag If-None-Match （內容hash）
跟緩存相關的http頭

4.使用CDN

5.與解析DNS

　　<mata http-equiv="x-dns-prefetch-control" content="on">   // https 協議下開啓a連接的prefetch(http協議下會默認開啓)

　　<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

 

//=========================================================================

 

• content方面

  1. 減小HTTP請求：合併文件、CSS精靈、inline Image
  2. 減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
  3. 減小DOM元素數量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 對組件使用Gzip壓縮

• Cookie方面

  1. 減少cookie大小

• css方面

  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達式
  3. 使用<link>不使用@import

• Javascript方面

  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不須要的腳本
  5. 減小DOM訪問

• 圖片方面

  1. 優化圖片：根據實際顏色須要選擇色深、壓縮
  2. 優化css精靈
  3. 不要在HTML中拉伸圖片