如何提升低端設備的Web性能？試試自適應加載模式

任何用戶都可能有過運行緩慢的體驗。這個世界的設備千差萬別，“一種規格”走天下的體驗可能並不是哪裏都行得通。一些網站滿足了使用高端設備的用戶，但在低端設備上卻可能卡得沒法用。特別是在普通的移動設備和桌面硬件，以及新興市場的主流設備上尤爲明顯。那麼我們能不能調整交付頁面的方式，更好地適應用戶的約束條件呢？🤔

自適應加載：不僅要根據屏幕大小做出響應，還要適應實際的設備硬件。

在Chrome開發者峯會的演講中，我和Facebook的Nate Schloss討論了自適應加載模式，即：

• 爲所有用戶（包括低端設備用戶）提供快速的核心體驗；
• 如果用戶的網絡和硬件有足夠的處理能力，則逐步添加僅限於高端硬件的功能。

這使用戶可以獲得最適合他們自身約束條件的使用體驗。

自適應加載解鎖的用戶場景包括：

• 在慢速網絡上提供低質量的圖像和視頻；
• 僅在高速CPU上加載非關鍵的JavaScript交互功能；
• 限制低端設備上動畫的幀速率；
• 避免在低端設備上進行繁重的運算；
• 在速度較慢的設備上阻止第三方腳本。

針對自適應加載，我們有很多信號可用，具體包括：

• 網絡：用於微調數據傳輸以減少帶寬佔用（通過navigator.connection.effectiveType），還可以利用用戶的“流量節省程序”首選項（通過navigator.connection.saveData）。
• 內存：用於減少低端設備上的內存消耗（通過navigator.deviceMemory）。
• CPU核心數：用於限制開銷較大的JavaScript執行，並在設備處理能力不足時減少CPU密集型邏輯（通過navigator.hardwareConcurrency）。這是因爲JavaScript的執行主要受CPU性能約束。

在演講中，我們介紹了在Facebook、eBay和Tinder等網站上應用這些理念的真實案例。可以從演講第24分鐘開始看起，Nate介紹了Facebook如何在生產環境中通過設備分組來實踐這一理念：

我們還發布了一組新的（實驗性）React Hooks和實用工具，可以在你的React應用程序中添加自適應加載技術。

我們的hooks/實用工具包括useNetworkStatus React hook，用來根據網絡狀態（有效的連接類型）做出調整適應：

import React from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();

  let media;
  switch(effectiveConnectionType) {
    case '2g':
      media = <img src='medium-res.jpg'/>;
      break;
    case '3g':
      media = <img src='high-res.jpg'/>;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }

  return <div>{media}</div>;
};

還有useSaveData實用工具，用來根據用戶瀏覽器的流量節省程序首選項進行調整適應：

import React from 'react';

import { useSaveData } from 'react-adaptive-hooks/save-data';

const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    <div>
      { saveData ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

……以及useHardwareConcurrency實用工具，用來根據用戶設備上的CPU處理器邏輯內核數進行調整適應：

import React from 'react';

import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';

const MyComponent = () => {
  const { numberOfLogicalProcessors } = useHardwareConcurrency();
  return (
    <div>
      { numberOfLogicalProcessors <= 4 ? <img src='...' /> : <video muted controls>...</video> }
    </div>
  );
};

未來，我們希望看到更多的基礎架構示例，可以根據用戶的網絡和設備約束自動提供最優化的代碼包。在上面提到的這些客戶端提示和客戶端API中間，可能已經有一些構建塊可用來在這個領域中構建出一些引人注目的成果了。

我們希望自適應加載能夠成爲漸進增強工具箱中一項有用的新工具。具體請查看演講以瞭解更多信息。

瞭解更多內容：

• React自適應加載hooks和實用工具；
• Tinder Web工程使用的複雜自適應加載策略；
• Angular的連接感知組件；
• 在Vue和Web組件中，使用網絡信息API爲自適應組件提供服務；
• 基於網絡質量的自適應服務。

作者介紹：
Addy Osmani是Chrome團隊的工程主管，致力於創造更快的Web體驗。

原文鏈接：
https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69