引言
大家好，這裏是@IT·平頭哥聯盟，我是首席填坑官——蘇南(South·Su)，今天是國慶節的第二天，這個假期沒有外出(不要問我爲什麼，自己腦補～😭)，前些天分享了一篇前端面試彙總的文章，有些同學在羣裏問了其中的一些細節，其中大家最關心的性能優化這塊，今天整理了公司項目中的一些認爲不錯的點，跟大家一起分享，如有理解錯誤，請糾正。
優化概括
1、首先最基本的，CSS樣式表放在頁面頭部Head內且link鏈式引入，javascript放在底部body結束標籤前避免阻塞。
2、js/html/css/圖片都做壓縮合並，圖片預加載、懶加載，也是老生常談了，在這裏推薦一個圖片無損極限壓縮的工具，能壓小60～80%左右,比較麻煩的是每次要手動操作——TinyPNG，有興趣的同學了可以瞭解一下他們的API，自己封裝一個服務調用壓縮，不過免費次數有限制哦。
3、減少DOM元素數量，減少DOM的操作：
- 減少 DOM 元素數量，合理利用:after、:before等僞類，避免頁面過深的層級嵌套;
- 優化javascript性能,減少DOM操作次數(或集中操作)，能有效規避頁面
重繪/重排; - 如何纔算少？抱歉，這個沒有辦法給出一個標準精確的答案，只能說儘可能去做優化，如數據分頁、首屏直出、按需加載等。
4、靜態資源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需要替換大量圖片，工作量太大(不確定後臺程序是否能搞定)。
5、域名拆分：
- 什麼叫拆分域名？很多公司初始項目搭建，都只申請了一個域名，站點的所有內容(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 |
…… | …… | …… |
6、 減少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的圖下次有時間再補，是有一個大佬指點我的哦，說這樣看起來更騷氣，大家會更喜歡，哈哈～：![]()
本文由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享 - 三次握手
結論：從上面的這個過程可以看出，每一次請求都這麼複雜，減少http的請求次數是不是很有必要呢？？答案是肯定的，我們會以以下幾個維度來進行優化：合併
JS、CSS文件； 圖片/圖標 sprites 合併，或使用iconfont字體圖標，或者SVG Sprites；什麼是Svg Sprites?； 資源按需加載，即當前頁面用到什麼，就加載什麼，避免加載與當前頁面無關的事情，這一點現在的React/Vue/Angular等MVVM框架，基於webpack編譯打包工具，做的很好； 前端數據的緩存（如：一個列表頁，進入詳情，再返回，這個用戶的交互行爲是很頻繁的，可以對列表的數據進度一個緩存，不用每次返回都進行加載，比如5分鐘更新一次。
7、 數據設置緩存，好累寫不動了，http緩存的設置，之前的面試彙總👉如何設置http緩存？吧；
8、 站點服務端開啓Gzip壓縮，當然還可以瞭解一下Brotli 或 Zopfli ，據說 Brotli 比 Gzip 和 Deflate更有效，有興趣的同學可以瞭解一下；
8、 避免重定向，儘量減少 iframe 使用，它會阻塞主頁面的渲染;
9、 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性);
10、 合理使用dns-prefetch、prefetch、 preload、 defer、async：
dns-prefetch：使用dns-prefetch對項目中用到的域名進行 DNS 預解析，減少 DNS 查詢，如： <link rel="dns-prefetch" href="//honeybadger8.github.io"/>；BAT各大巨頭都是這麼幹的，請看下圖，dns的詳細解析過程今天先不講了，碼字碼不動了，寫分享比加班做項目還累，望體諒～；prefetch： 它是一個優先級非常低的資源加載標識，瀏覽器會在空閒時(即主進程資源加載完成後)下載帶有prefetch標識的資源並緩存到disk，在後續模塊使用到這個文件的時候，會直接從緩存讀取；該功能webpack有個插件，配置後編譯能自動插入到頁面上;preload：沒錯，它就是一個可以預加載資源的屬性，詳細說明請看官方API,一般情況下我們可能會對接下來的業務需要的audio、img、font、script等資源進行預先加載（甚至是下一個路由頁面哦），這樣能達到0秒打開頁面的效果！- 暫時就想到這麼多了，歡迎補充……
![]()
阿里巴巴的天貓首頁 ![]()
京東首頁 ![]()
首席填坑官∙蘇南 的react-redux入門示例
總結：
- 推薦幾個工具：WebPagetest、Lighthouse、SpeedCurve、New Relic 等主動/被動監測工具，都能高效幫助我們分析發現問題的所在，從而對症下藥;
- DNS預解析的是非重要的，它是一個url到解析IP，到查詢根服務器的一個過程，可能會在下一次單獨總結出來分享，有興趣的同學也可以自行先了解一下，
要把一個項目做好，每一個細節都很重要，希望今天的分享能給大家的工作帶來些許幫助，謝謝！
文章分享計劃：
最近一直在思考，如何有規化的分享工作中的積累，國慶這些天也一直看了很多大神寫的博客，最後綜合自身的能力及時間，決定先嚐試寫一個# 動畫 #系列文章，動畫可能主要包含（CSS/Canvas）兩部分，歡迎大家持續關注！
以上就是今天的分享，新手上路中，我會努力讓自己變得更優秀、寫出更好的文章，文章中有不對之處，煩請各位大神斧正。如果你覺得這篇文章對你有所幫助，那就請關注下方的 公衆號吧。
熱門推薦
作者：蘇南 - 首席填坑官
交流羣：912594095，公衆號：
honeyBadger8本文原創，著作權歸作者所有。商業轉載請聯繫
@IT·平頭哥聯盟獲得授權，非商業轉載請註明原鏈接及出處。