web效能常見優化技巧

Dragan發表於2022-02-17
Web優化

常見技巧

輸入網址後瀏覽器的做了什麼：

1.DNS域名解析；
2.建立TCP連線；
3.傳送HTTP請求；
4.伺服器處理請求；
5.返回響應結果；
6.關閉TCP連線；
7.瀏覽器解析HTML；
8.瀏覽器佈局渲染；

思路：儘量優化每一步。

優化：

  1. DNS 服務
  2. 自行配置 host，可以省去 DNS 查詢這個步驟。
  3. 花錢提高頻寬
  4. 後端優化 sql 語句的查詢速度，使其更快的返回給前端資料.
  5. 連線複用，後端設定 keep-alive
  6. 後端開啟 gzip 程式碼壓縮，瀏覽器會自動解壓縮
  7. 先載入 css 再載入 JS，讓使用者先看到頁面，再實現互動。
  8. 懶載入，先載入使用者看到的第一頁，再記載其餘的頁面。
  9. 預載入，比如看小說提前載入下一頁
  10. http 快取 css/js/圖片，後端設定快取時間，使用 hash 值判斷需要更新的檔案。cache-control
  11. 使用2個以上但不超過4個的域名，因為域名限制最大併發請求數(CDN 域名)
  12. cookie-free，將需要 cookie 請求和不需要 cookie 請求的分開多個域名請求，加快不需要 cookie 的請求速度。

以下為轉載內容：

當聊起前端效能優化我們要聊什麼

背景

在前端的整個學習生涯中，我們總是能一次次聽到“效能”和“體驗”這兩個詞。前端效能優化不僅是前端工程師工作中時刻需要關注的現實問題，也是前端面試中屢屢被問到的點。面試官之所以愛問，是因為偷懶。只需問這一個問題，就能在一定程度考察面試者的知識廣度、知識深度、總結能力、表達能力，還能沿著這條線繼續問其他問題。

當被突然問到效能這個問題時，大部分人會突然一愣。總覺得有很多要說的東西，但又感覺雜亂無章一下子不知從何說起。經過一番思索，腦子裡慢慢翻出早年面試刷題時看到的“雅虎效能優化N條軍規”，抓耳撓腮說上七八條。面試官面無表情的問了句“還有嗎？”，此刻又不得不把腦仁像擠海綿一樣瘋狂壓榨，再多滴出兩三條似是而非的油水。心裡面滿是苦惱，抱怨自己的記憶力不夠好。

其實就算是全背下來一口氣說個幾十條，面試官也不見得多滿意。原因之一是條目太多沒有主次聽著容易讓人煩，面試官自己都記不住你說了什麼。二是這種方式的回答明顯給人一種死記硬背做題家的感覺。（面試官真欠抽）

我們要聊什麼

回答效能問題有兩個思路。順著這兩個思路，不需要過多記憶就能自然而然的並且“很有見地”的回答十幾條甚至幾十條優化方案，當然前提是這些優化方案你平時真的用過。

思路一、從日常接觸到的前端效能場景出發

效能瓶頸主要出現在三個場景

  1. 在開發時每次修改程式碼打包需要幾分鐘，太慢（開發構建階段）
  2. 開啟網站，等了幾十秒才看到頁面，太慢（資源載入和頁面渲染階段）
  3. 頁面展現後，頁面上動畫不流暢。滾動頁面或者拖拽元素卡頓感嚴重，甚至頁面會崩潰（操作體驗階段）

一、開發構建階段（常見問題：如何讓Webpack打包更快）

  • 併發：使用多程式打包
  • 快取：打包時利用快取
  • 打包量要小：縮小檔案搜尋範圍，減小不必要的編譯工作

二、資源載入階段

核心思路是：傳輸量要小、距離要近、並行傳輸、資源複用、預先載入。

傳輸量要小

  • 構建時HTML壓縮
  • 構建時CSS壓縮合並
  • 構建時JavaScript壓縮合並
  • 構建時圖片的壓縮
  • 使用SVG sprite 或者字型圖示代替圖片ICON
  • 服務端開啟Gzip，資料在傳輸之前再次壓縮
  • 構建時是使用TreeShaking，減少不必要的程式碼引入
  • 單頁應用路由懶載入，減少首次載入的資源體積
  • 元件懶載入，減少首次載入的資源體積
  • 圖片懶載入，減少首次載入的資源體積

距離要近

  • 靜態資源部署到CDN

並行傳輸

  • 升級到 HTTP2.0 （常見問題：HTTP2.0相比HTTP1.x做了哪些升級？多路複用；二進位制分幀；服務端推送；資料流優先順序；頭部壓縮）

資源複用

  • 服務端配置靜態資源快取（常見問題：HTTP快取策略？Cache-Control？keep-alive？304？ETag？）
  • 打包時分包複用

預先載入

  • 瀏覽器在空閒的時間偷偷預先載入， <link rel="prefetch" href="url">

三、頁面渲染階段

  • CSS在上、JS在下
  • 載入CSS推薦用 link 少用 @import
  • 不重要的外接引入的JS使用defer或者async屬性非同步載入

四、操作體驗階段

  • 動畫流暢
    • 儘量使用 transition 和 animation來實現CSS動畫，而不是JS實現動畫（執行在主執行緒對動畫的流暢度有影響）
    • 動畫儘量多用transfrom 和 opacity （無需重繪和迴流，效能最好）
    • translateZ/translate3d 開啟硬體加速
    • JS動畫使用requestAnimationFrame少用setInterval
  • 滾動/移動/操作流暢
    • DOM增刪操作要少(虛擬長列表、DOM Diff)
    • 高頻操作使用防抖和節流
  • 密集型計算
    • 計算密集型操作可以交給WebWorker併發處理

img來自若愚@飢人谷

思路二、從生活角度聊前端效能

假設你是公司的CTO，現在有一個產品需要在儘可能短的時間內上線，在現有團隊不加班不996的前提下如何做？方案無外乎是：

  1. 壓縮需求，迭代開發——壓縮
  2. 多用舊輪子(程式碼、方案、架構)少造新輪子——快取
  3. 增加人手——併發

和前端效能優化做對應

  • 壓縮需求，迭代開發：靜態資源的壓縮合並、Gzip、各種懶載入、開發打包時的縮小檔案搜尋範圍
  • 多用舊輪子(程式碼、方案、架構)少造新輪子：資源請求時HTTP快取、開發打包時配置使用快取、打包時配置分包複用
  • 增加人手：資源請求時使用HTTP2實現併發請求、開發打包時配置使用併發能力、WebWorker

從以上兩個思路入手，對於有經驗的你來說自然才思泉湧，輕輕鬆鬆讓自己和麵試官興奮起來，甚至能在一定程度上左右後續的提問。

提到效能，大腦裡需要浮現6字箴言：壓縮、快取、併發。後面的都交給小腦自由發揮吧。

一次性弄懂效能優化

www.yuque.com/hvvsva/xcxoqg/gugadximg

相關文章