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

性能優化的商業價值

• 對於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節直播課程，帶你免費玩轉大前端性能優化。

訓練營亮點

高質量直播與講師面對面實時互動、加深理解；還提供相關作業練習、鞏固你的學習成果。

豐富的教輔資料實時上傳更新，講師課件、直播回放、技術文檔等教材完全開放給你，以備你不時之需，隨時查看。

本課程中遇到的疑難問題都可在【訓練營交流羣】內隨時提問，講師將耐心詳細解答，更有小夥伴一起交流互動，共同進步！

海量禮品等你來

報名入羣即可參與抽獎，課堂參與互動更有豪禮相送！完成課程學習還有機會贏cherry鍵盤！

課程安排

11天，5節課程，各種實踐作業，從入門到精通，與各路專家玩轉大前端性能優化。入羣還能和其他小夥伴一起學習知識，精進技術！

名師介紹

報名鏈接

https://www.heapdump.cn/train...

立即掃碼加入

微信掃一掃，免費報名，入羣有禮