自適應(yīng)加載

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

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

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

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

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

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

•  在慢速網(wǎng)絡(luò)上提供低質(zhì)量的圖像和視頻
•  只在高速 cpu 上加載非關(guān)鍵的 JavaScript 進(jìn)行交互
•  限制低端設(shè)備上的動畫幀率
•  避免在低端設(shè)備上進(jìn)行繁重的計(jì)算操作
•  在速度較慢的設(shè)備上阻止第三方腳本

我們可以通過下面幾個(gè)信號來實(shí)現(xiàn)自適應(yīng)加載：

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

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

自適應(yīng)加載 React Hooks

Google Chrome 團(tuán)隊(duì)還發(fā)布了一組新的（實(shí)驗(yàn)性的）React Hooks＆Utilities，用于在 React 程序中實(shí)現(xiàn)自適應(yīng)加載技術(shù)。

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

useNetworkStatus React Hook：用于根據(jù)網(wǎng)絡(luò)狀態(tài)（有效的連接類型）對應(yīng)用程序進(jìn)行調(diào)整： 

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 用于根據(jù)用戶瀏覽器的數(shù)據(jù)保護(hù)選項(xiàng)對程序進(jìn)行調(diào)整： 

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：根據(jù)用戶設(shè)備上的邏輯CPU處理器內(nèi)核數(shù)對程序進(jìn)行調(diào)整的： 

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

將來，我們希望看到更多的基礎(chǔ)架構(gòu)的示例，這些示例可以根據(jù)用戶的網(wǎng)絡(luò)和設(shè)備約束自動調(diào)整和最優(yōu)的應(yīng)用程序體驗(yàn)。

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