Categories
程式開發

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


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

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

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

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

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

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

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

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

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

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

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

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

我們還發布了一組新的(實驗性)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 = 如何提升低端設備的Web性能?試試自適應加載模式 4;
      break;
    case '3g':
      media = 如何提升低端設備的Web性能?試試自適應加載模式 5;
      break;
    case '4g':
      media = ;
      break;
    default:
      media = ;
      break;
  }

  return 
{media}
; };

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

import React from 'react';

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

const MyComponent = () => {
  const { saveData } = useSaveData();
  return (
    
{ saveData ? 如何提升低端設備的Web性能?試試自適應加載模式 6 : }
); };

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

import React from 'react';

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

const MyComponent = () => {
  const { numberOfLogicalProcessors } = useHardwareConcurrency();
  return (
    
{ numberOfLogicalProcessors <= 4 ? 如何提升低端設備的Web性能?試試自適應加載模式 6 : }
); };

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

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

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

了解更多內容:

作者介紹:

Addy Osmani是Chrome團隊的工程主管,致力於創造更快的Web體驗。

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