這份性能優化清單，你都作了嗎？

做者：首席填坑官∙蘇南
來源：@IT·平頭哥聯盟
交流羣：912594095、公衆號：honeyBadger8，本文原創，著做權歸做者全部，轉載請註明原連接及出處。

引言

​ 你們好，這裏是@IT·平頭哥聯盟，我是首席填坑官——蘇南(South·Su)，今天是國慶節的次日，這個假期沒有外出(不要問我爲何，本身腦補～😭)，前些天分享了一篇前端面試彙總的文章，有些同窗在羣裏問了其中的一些細節，其中你們最關心的性能優化這塊，今天整理了公司項目中的一些認爲不錯的點，跟你們一塊兒分享，若有理解錯誤，請糾正。

優化歸納

一、 首先最基本的，CSS樣式表放在頁面頭部Head內且link鏈式引入，javascript放在底部body結束標籤前避免阻塞。

二、 js/html/css/圖片都作壓縮合並，圖片預加載、懶加載，也是老生常談了，在這裏推薦一個圖片無損極限壓縮的工具，能壓小60～80%左右,比較麻煩的是每次要手動操做——TinyPNG，有興趣的同窗了能夠了解一下他們的API，本身封裝一個服務調用壓縮，不過免費次數有限制哦。

三、 減小DOM元素數量，減小DOM的操做：

• 減小 DOM 元素數量，合理利用:after、:before等僞類，避免頁面過深的層級嵌套;
• 優化javascript性能,減小DOM操做次數(或集中操做)，能有效規避頁面重繪/重排;
• 如何纔算少？抱歉，這個沒有辦法給出一個標準精確的答案，只能說盡量去作優化，如數據分頁、首屏直出、按需加載等。

四、 靜態資源CDN分發：

• CDN的意圖就是儘量的減小資源在轉發、傳輸、鏈路抖動等狀況下順利保障信息的連貫性；
• 通俗的講就是CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上———曾經人們都說距離產生美，後來變了都說距離產生小三，在這裏距離產生的是用戶跑路了，因此足以說明CDN的重要性；
• CDN採用各節點緩存的機制緩存很嚴重，當咱們項目的靜態資源(只是以前存放在cdn上的資源)修改後，若是CDN緩存沒有作相應更新，則看到的仍是舊的網頁，解決的辦法是刷新緩存，七牛雲、騰訊雲均可單獨針對某個文件/目錄進行刷新；
• 廣告常說：XX酒雖好，可不要貪杯哦，CDN託管也是如此，合理使用：圖片、經常使用js組件、css重置樣式等，即不常改動的文件便可走CDN，包括項目內的一些介紹頁；
• img標籤要設置高寬,一樣這麼作它也能減小頁面重繪/重排，使用 WebP 格式圖片，它能對原圖(png)作到近98%壓縮，固然它也不是完美的：

WebP最初在2010年發佈，目標是減小文件大小，支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於 GIF、JPEG、JPEG2000、PNG 等格式，很是適合用於網絡等圖片傳輸，如今開始已經被愈來愈多的瀏覽器支持，固然 WebP 格式也有它的缺點，算法相對其餘格式更加複雜，會在節省流量資源的同時會佔用計算資源，對計算機形成更大的負擔,WebP支持的像素最大數量是16383x16383。有損壓縮的WebP僅支持8-bit的YUV4:2:0格式。而無損壓縮（可逆壓縮）的WebP支持VP8L編碼與8-bit之ARGB色彩空間。又不管是有損或無損壓縮皆支持Alpha透明通道、ICC色彩配置、XMP詮釋數據，更詳細支持說明:caniuse.com

優點：

• 體積小幾乎能夠絕不誇張的說，已經小的不能再小了；
• 小而美的同時，還質量好，幾乎看不出來與原圖差異；
  
• 曾經的動態圖gif、jpeg壓縮都會不清晰，但如今對它來講都是so easy～。
  

缺點/困難：

• 目前並非全部瀏覽器都支持WebP，所以須要解決瀏覽器適配問題；
  
• 對於已上線的項目，採用WebP須要替換大量圖片，工做量太大(不肯定後臺程序是否能搞定)。

五、 域名拆分：

• 什麼叫拆分域名？不少公司初始項目搭建，都只申請了一個域名，站點的全部內容(html/php/jsp、js、css、img等都放在一個域名下)，域名拆分主要爲了增長瀏覽器資源請求的並行度即併發問題，讓瀏覽器能同時發起更多的請求，也解決了請求默認攜帶的cookie問題，減小了數據傳輸字節；
• 如何拆分？以如今先後端分離式開發爲例，建議分爲三大類：
  • 前端類 - 項目業務自己的htm、css、js、圖標/片等；
  • 靜態類 - 即上述提到的CDN資源類；
  • 動態類 - 可歸爲後端API接口類；

如下爲各瀏覽器請求併發數，數據來源於chorme搜索，珍愛生命，遠離某……🙏：

瀏覽器	HTTP/1.1	HTTP/1.0
Chrome	6	6
火狐	6	6
Safari	4	4
IE11	6	6
IE9	10	10
……	……	……

六、 減小http請求次數

• 是的，你沒有看錯，就是減小http請求次數，節省網絡請求時間，但你可能又會問，前面不是讓拆分域名嗎？？一個是部署拆分，一個是請求減小，沒毛病哦；
• 首先咱們來了解一下http的請求過程（簡單通俗的闡述一下）：

• DNS 域名解析 - 1. 拿出電話，找到某個接頭人的號碼；
• 發起 TCP 的 3 次握手 - 2. 接通後暗號：A)、你好，你好，我是長江一號，請問能聽到嗎？B),你好，我是長江二號，能聽到你講話，你能聽到我說什麼嗎？A)、能聽到，咱們開始講正事吧……;
• 正常數據傳輸中…… - 3. 聊的很嗨；
• 結束傳輸斷鏈的 4 次揮手 - 4. 聊完了，準備告別：A)、(能夠是服務端，也能夠是客戶端)該說的我都說完了，你本身看着辦吧；B)、好的我也說完了；B)、(B緊接着又跟A發了條信息)，再見；A)、而後A收到B的話，而B那邊已經放下手機掛了，A等了一下聽B沒有再說啥，也就掛了(掛個毛啊，婊子無情，戲子無義，陪你嘮嗑這麼久，都不給個好評～😂)；
• 固然，如今的HTTP/2.0的處理有所不一樣，2.0過程還有TLS/SSL的處理，HTTP是超文本傳輸協議，信息是明文傳輸，HTTPS則是具備安全性的SSL(Certificate Authority，申請證書)加密傳輸協議,HTTPS加密傳輸、身份認證的網絡協議,內容傳輸通過完整性校驗、內容通過對稱加密，每一個鏈接生成一個惟一的加密密鑰、第三方沒法僞造服務端(客戶端)身份等衆多優點，同時也有劣勢由於作的事情多了中間對接的次數一樣須要時間，這也是HTTPS更慢的根本緣由。
• 上兩圖吧，這樣你們看着清晰一些，但暫時只列了HTTP/1.0的，HTTP/2.0的圖下次有時間再補，是有一個大佬指點個人哦，說這樣看起來更騷氣，你們會更喜歡，哈哈～：
  
  

結論：從上面的這個過程能夠看出，每一次請求都這麼複雜，減小http的請求次數是否是頗有必要呢？？答案是確定的，咱們會以如下幾個維度來進行優化：

• 合併 JS、CSS 文件；
• 圖片/圖標 sprites 合併，或使用iconfont字體圖標，或者SVG Sprites；什麼是Svg Sprites?；
• 資源按需加載，即當前頁面用到什麼，就加載什麼，避免加載與當前頁面無關的事情，這一點如今的React/Vue/Angular等MVVM框架，基於webpack編譯打包工具，作的很好；
• 前端數據的緩存（如：一個列表頁，進入詳情，再返回，這個用戶的交互行爲是很頻繁的，能夠對列表的數據進度一個緩存，不用每次返回都進行加載，好比5分鐘更新一次。

七、 數據設置緩存，好累寫不動了，http緩存的設置，以前的面試彙總👉如何設置http緩存？吧；
八、 站點服務端開啓Gzip壓縮，固然還能夠了解一下Brotli 或 Zopfli ，聽說 Brotli 比 Gzip 和 Deflate更有效，有興趣的同窗能夠了解一下；
八、 避免重定向，儘可能減小 iframe 使用，它會阻塞主頁面的渲染;
九、 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性);
十、 合理使用dns-prefetch、prefetch、 preload、 defer、async：

• dns-prefetch：使用dns-prefetch對項目中用到的域名進行 DNS 預解析，減小 DNS 查詢，如： ；BAT各大巨頭都是這麼幹的，請看下圖，dns的詳細解析過程今天先不講了，碼字碼不動了，寫分享比加班作項目還累，望體諒～；
• prefetch： 它是一個優先級很是低的資源加載標識，瀏覽器會在空閒時(即主進程資源加載完成後)下載帶有 prefetch標識的資源並緩存到disk，在後續模塊使用到這個文件的時候，會直接從緩存讀取；該功能webpack有個插件，配置後編譯能自動插入到頁面上;
• preload：沒錯，它就是一個能夠預加載資源的屬性，詳細說明請看官方API,通常狀況下咱們可能會對接下來的業務須要的audio、img、font、script等資源進行預先加載（甚至是下一個路由頁面哦），這樣能達到0秒打開頁面的效果！

• 暫時就想到這麼多了，歡迎補充……
  
  
  

總結：

• 推薦幾個工具：WebPagetest、Lighthouse、SpeedCurve、New Relic 等主動/被動監測工具，都能高效幫助咱們分析發現問題的所在，從而對症下藥;
• DNS預解析的是非重要的，它是一個url到解析IP，到查詢根服務器的一個過程，可能會在下一次單獨總結出來分享，有興趣的同窗也能夠自行先了解一下，
• 要把一個項目作好，每個細節都很重要，但願今天的分享能給你們的工做帶來些許幫助，謝謝！

文章分享計劃：

最近一直在思考，如何有規化的分享工做中的積累，國慶這些天也一直看了不少大神寫的博客，最後綜合自身的能力及時間，決定先嚐試寫一個**# 動畫 #**系列文章，動畫可能主要包含（CSS/Canvas）兩部分，歡迎你們持續關注！

　　以上就是今天的分享，新手上路中，我會努力讓本身變得更優秀、寫出更好的文章，文章中有不對之處，煩請各位大神斧正。若是你以爲這篇文章對你有所幫助，請記得關注我哦～。

更多文章：

作完小程序項目、老闆給我加了6k薪資～
面試踩過的坑，都在這裏了～
如何給localStorage設置一個過時時間？
手把手教你如何繪製一輛會跑車
如何用CSS3畫出懂你的3D魔方？
SVG Sprites Icon的使用技巧
immutability因React官方出鏡之使用總結分享！

做者：蘇南 - 首席填坑官

交流：912594095，公衆號：honeyBadger8

本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。