如何調試前端：優化網絡資源

時間 2019-11-16

標籤如何調試前端優化網絡資源简体版

原文原文鏈接

原文地址：How to debug front-end: optimising network assets

原文做者：Michał Witkowski

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：stormluke

校對者：Starrier、allenlongbaobao

網絡性能能夠決定 web app 的成敗。最初 app 很新很小時，不多有開發者會持續關注 app 到底用了多長時間發送了多少兆字節給用戶。css

若是你從未測量過本身 app 的性能，那極可能會有一些改進餘地。問題是，你須要改善多少才能讓用戶注意到。html

在下面的研究中，你能夠找到有關多長的加載時間差別能夠被人們明顯地感覺到的信息。若是你想讓用戶注意到你的努力，那就要超過 20% 這個門檻。閱讀更多前端

這篇文章中，我會介紹（TL;DR）：android

經過 Chrome Devtool Audit 來測量性能
圖像優化
Web 字體優化
JavaScript 優化
渲染阻塞資源時的優化
其餘性能測量應用/擴展

若是你正在努力解決這以外的一些問題，請在評論告訴所咱們 —— 咱們的團隊和讀者們很樂意提供幫助。webpack

這篇文章是《如何調試前端》系列的一部分：ios

衡量 app 的性能

Chrome Devtools Audits

因爲整篇文章都是關於 Chrome Devtools 的，咱們就先從 Audit 標籤頁開始（其自己使用了 Lighthouse）git

打開 Chrome Devtools > Audits > Perform an audit... > Run auditgithub

我決定檢查性能（Performance）和最佳實踐（Best practices），但咱們此次暫不涉及漸進式 Web 應用（Progressive Web App）或無障礙性（Accessibility）主題。web

不錯。一段時間後，咱們完成了性能評估，並知道了一些改進這些性能指標的可行方法。若是 Audit 把屏幕分辨率調成了「移動設備」，請沒必要擔憂，由於對於 Chrome 來講這是正常的。我強烈建議你用 Chrome 金絲雀版（Canary）來執行評估。金絲雀版有個能夠評估桌面版網頁的選項，而且增長了網絡限速功能 —— 看看下面的圖片。npm

指標

指標（Metrics）選項卡收集了基本的測量結果，而且提供了頁面加載時間的整體概況。

首次有意義繪圖（First meaningful paint） —— audit 肯定用戶首次看到主要內容所需的時間。請儘量保持在 1 秒如下。閱讀更多

首次可交互（First interactive） —— 指首次用戶看到可交互 UI 元素而且頁面能夠響應所需的時間。

感知速度指數（Perceptual Speed Index） —— 指顯示頁面可見部分的平均時間。它以毫秒錶示並取決於視口的大小。請儘可能保持在 1250 毫秒如下。閱讀更多

預估輸入延遲（Estimated Input Latency） —— 應用響應用戶輸入的時間，以毫秒爲單位。

改進點

改進點（Opportunities） —— 是一個更詳細的部分，收集了有關圖片、CSS 和響應時間的信息。我會介紹每一個項目，並加上一些如何加速的小提示。

減小阻塞渲染（render-blocking）的樣式表

CSS 文件被視爲渲染阻塞資源。意味着瀏覽器會等待它們徹底加載完畢，以後纔開始渲染。最簡單的方法就是不加載沒必要要的 CSS 文件。若是你使用 bootstrap，也許你不須要整個庫來樣式化你的頁面 —— 尤爲是在項目剛開始時。

其次，你能夠考慮針對不一樣屏幕尺寸進行優化。要下降加載 CSS 的數量級，可使用條件加載，它只加載特定屏幕分辨率所需的 CSS 文件。下面有個例子。

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="print.css" rel="stylesheet" media="print">
複製代碼

若是對你來講還不夠，Keith Clark 提出了一個不阻塞頁面渲染的加載 CSS 的好主意。訣竅是對媒體查詢（media query）使用帶有無效值的連接元素。當媒體查詢結果爲 false 時，瀏覽器仍然會下載樣式表，但不會延遲渲染頁面。您能夠將剩餘的沒必要要的 CSS 分離出來並稍後下載。閱讀更多

保持較低的服務響應時間

雖然這部分多是不言自明的，但仍值得咱們提醒本身它的做用。爲了減小服務器響應時間，你能夠考慮爲某些資源使用 CDN。也能夠採用 HTTP2，或簡單地刪除沒必要要的請求，並在渲染頁面後延遲加載它們。

合適尺寸的圖片（Properly size Images）、離屏圖片（Offscreen images）和下一代格式（next-gen formats）

這三部分都與一個主題緊密相關 —— 圖片。要準確瞭解你正在加載哪些圖片以及它們所佔的時間比重，請進入 Chrome Devtools 的網絡選項卡並經過 IMG 選項進行過濾。經過查看大小和時間這兩行，看看你是否滿意這些結果。關於每一個圖片的大小比重並無通常性的規則。這很大程度上取決於你的客戶端設備、客戶端羣以及更多隻有你本身才瞭解的狀況。

我想在這裏更多地談談圖片優化。在 Audit 結果中這個主題屢次出現。

圖像優化

圖片光柵圖和矢量圖。光柵圖由像素組成。咱們一般將它們用於照片和複雜的動畫。擴展名：jpg、jpeg、gif。

矢量圖由幾何圖像組成。咱們將它們用於徽標和圖標，由於它們能夠隨意縮放不失真。擴展名：svg。

SVG

SVG 從一開始就相對較小，但用這些優化器可使它更小。

光柵圖

這裏有點棘手，由於光柵圖像可能很是大。有幾種技術可使它們保持較大的分辨率但仍有較小的文件大小。

多張圖片

首先準備多個版本的圖像。你並不想在手機上加載視網膜級大小的圖像，對嗎？嘗試製做 3 到 4 個版本的圖片。手機版、平板版、桌面版和視網膜版。它們的大小取決於你的目標設備。若是你有任何疑問，請查看連接中的標準查詢。

Srcset 屬性

當你的圖像準備好後，src 屬性有助於定義什麼時候加載哪些圖像。

<img src="ing.jpg" srcset="img.jpg, img2x.jpg 2x" alt="img">
複製代碼

src 給不支持 srcset 的瀏覽器用 srcset 給支持的瀏覽器用 img2x.jpg 給像素縮放比爲 2.0 的設備用（視網膜）

<img src="img.jpg" srcset="img1024.jpg 1024w, img2048.jpg 2048w" alt="img">
複製代碼

src 給不支持 srcset 的瀏覽器用 srcset 給支持的瀏覽器用 img1024 給寬度爲 1024 時使用，等等.

上面的例子來自於 Developer Mozilla

媒體查詢

你還能夠建立上面提到過的媒體查詢和樣式，例如平板或手機。這種方法與 CSS 預處理器同時使用時特別有效。

srcset 屬性的替代品是媒體查詢，它的規則不在 HTML 中，而是在 CSS 文件裏。對於純 CSS，這種方法很是耗時，不值得花時間去作。但在這裏，預處理器能夠經過混入（mixins）和變量來解決問題。有了預處理器後，媒體查詢與 srcset 不相上下。決定權在你。

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}
複製代碼