自適應加載

之前我們可能都聽說過 “自適應加載” 這個名詞，可能大多數人都停留在對屏幕的大小做出響應上，實際上它還可以指對實際的硬件設備做出響應。

在設備千差萬別的世界中，“一刀切”的體驗可能并不總是奏效。使高端設備上的用戶滿意的網站可能無法在低端設備上使用，特別是在中等水平的移動和桌面硬件以及新興市場上。

如果我們能夠調整頁面的交付方式，以更好地滿足用戶不同設備的限制，會怎么樣呢?

在上一次的 Chrome Dev Summit talk 中，來自 Google 的 Addy Osmani 和來自 Facebook 的 Nate Schloss 討論了 “自適應加載” 這種模式。

•  為所有用戶(包括低端設備)提供快速良好的使用體驗
•  在用戶的網絡和硬件能夠處理的情況下，逐步增加高端功能。

這可以使用戶可以獲得最適合他的體驗。你可以通過 “自適應加載” 解鎖下面的功能：

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

我們可以通過下面幾個信號來實現自適應加載：

•  網絡：微調數據傳輸使用更少的帶寬（通過 navigator.connection.effectiveType）。我們還可以利用用戶的 Data Saver 選項（通過 navigator.connection.saveData）
•  內存：用于減少低端設備上的內存消耗（通過navigator.deviceMemory）
•  CPU核心數：用于限制昂貴的 JavaScript 執(zhí)行并在設備不能很好處理時（通過navigator.hardwareConcurrency）減少CPU密集型邏輯。這是因為 JavaScript 執(zhí)行受 CPU 限制。

在演講中，作者介紹了在 Facebook，eBay，Tinder 等網站上使用的這些想法的真實示例。詳細視頻可以到 https://www.youtube.com/watch?v=puUPpVrIRkc&feature=youtu.be 查看

自適應加載 React Hooks

Google Chrome 團隊還發(fā)布了一組新的（實驗性的）React Hooks＆Utilities，用于在 React 程序中實現自適應加載技術。

https://github.com/GoogleChromeLabs/react-adaptive-hooks

useNetworkStatus React Hook：用于根據網絡狀態(tài)（有效的連接類型）對應用程序進行調整： 

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>  
  );  
}; 

將來，我們希望看到更多的基礎架構的示例，這些示例可以根據用戶的網絡和設備約束自動調整和最優(yōu)的應用程序體驗。

了解更多內容：https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69