【內有驚喜】聊一聊前端效能優化！

前端是離使用者最近的戰場，而前端效能直接影響了使用者體驗。可以說，效能優化是初、中級工程師向高階工程師進階的必學知識點，以及核心技能。

效能優化的商業價值

對於mbify而言，主頁載入的速度每提高100ms，轉化率就會增加1.11%，平均年收入就會增加380000美元；
Pinterest重建了他們的頁面以實現效能，使感知等待時間減少了40％，從而將搜尋引擎流量和註冊量提高了15％；
通過將平均頁面載入時間減少850毫秒，COOK發現他們能夠將轉化率提高7％，將跳出率降低7％，並將每個頁面的頁面數量增加10％；

可見前端效能優化對我們的影響和收入直接掛鉤，高效能的網站比表現不佳的網站更好地吸引和留住使用者。

“50%的使用者會放棄訪問載入超過3秒的網站”

如果高效能是一種資產，那麼表現不佳就是一種負擔。效能優化是一個專案發展到一定時期之後繞不開的話題，也是每個工程師心中永遠在撩撥的刺，產品的好壞決定著客戶的體驗，那麼一款產品的好壞有很多因素，其中效能是決定因素。

當使用者能夠在 2 秒以內得到響應時，會感覺系統的響應很快；
當使用者在 2-5 秒之間得到響應時，會感覺系統的響應速度還可以；
當使用者在 5-8 秒以內得到響應時，會感覺系統的響應速度很慢，但是還可以接受；
而當使用者在超過 8 秒後仍然無法得到響應時，會感覺系統糟透了，或者認為系統已經失去響應，而選擇離開這個 Web 站點，或者發起第二次請求。

一個網站的效能好壞是留住使用者和實現變現的基礎，也是我們前端工程師每天都要關注的問題。

兩個方向全解前端效能優化

效能優化的點非常的多，有的小夥伴覺得記起來非常的麻煩，大家可以根據這兩個方向來記憶：

載入時優化：預載入、快取、網路層、頁面解析、靜態資源、
執行時優化：避免強制同步佈局、長列表優化、避免js執行時間過長、平行計算-service worker、Composite分層繪製、滾動事件效能優化、Passive event listeners、動畫

載入時優化

從使用者體驗上面來講，如何讓別人覺得你的網站效能不錯，即使是一個這只是一個假象，那就是白屏時間和首屏時間：

白屏時間是指瀏覽器從響應使用者輸入網址地址，到瀏覽器開始顯示內容的時間。
首屏時間是指瀏覽器從響應使用者輸入網路地址，到首屏內容渲染完成的時間。

影響白屏時間的因素：網路，服務端效能，前端頁面結構設計。
影響首屏時間的因素：白屏時間，資源下載執行時間。

所以我們可以優先載入首屏資源，非首屏資源按需載入或懶載入，以加快首屏渲染速度。

我們可以從這個過程來挖掘優化點：交給DNS域名解析 -> 找到對應的IP地址 -> 然後進行TCP連線 -> 瀏覽器傳送HTTP請求 -> 伺服器接收請求 -> 伺服器處理請求並返回HTTP報文 -> 以及瀏覽器接收並解析渲染頁面通過縮短請求時間，從而去加快網站的訪問速度，提升效能。

這個過程中可以提升效能的優化的點：

DNS解析優化，瀏覽器訪問DNS的時間就可以縮短
使用HTTP2
減少HTTP請求數量
減少http請求大小
伺服器端渲染
靜態資源使用CDN
資源快取，不重複載入相同的資源

執行時效能優化

另一方面我們可以從執行時的效能來優化，執行時效能是指頁面執行時的效能表現，而不是頁面載入時的效能。可以通過chrome開發者工具中的 Performance 皮膚來分析頁面的執行時效能。

減少重繪與重排
避免頁面卡頓
長列表優化
滾動事件效能優化
使用 Web Workers
寫程式碼時的優化點

效能領域專家帶你玩轉前端效能優化

Donald Knuth 有一句名言：「過早優化乃萬惡之源」。目前我們學習和解決前端效能優化問題，往往是在網上的一些教程，再或者就是看一些陳舊的教程文章，這樣學來的知識不但不繫統，而且沒有很好的方法論總結。前端效能優化沒有標準答案，想要面面俱到羅列出來，並非易事，它針對方方面面的資源都有不同的方式。

HeapDump效能社群是國內首個專注效能領域的垂直技術社群,十幾萬開發者在這裡討論和分享效能知識，作為效能領域最重要的一大板塊——大前端效能效能優化，HeapDump效能社群目前已經和前端早早聊社群建立戰略合作，賦能更多前端開發者。

這次帶給大家的是由HeapDump效能社群出品的【大前端效能優化訓練營】，本課程帶你從實際應用角度出發，結合【理論+實踐】講講你最關心的前端效能優化問題！

歷時11天，3位專家，5節直播課程，帶你免費玩轉大前端效能優化。