自適應加載
之前我們可能都聽說過 “自適應加載” 這個名詞，可能大多數人都停留在對屏幕的大小做出響應上，實際上它還可以指對實際的硬件設備做出響應。
在設備千差萬別的世界中，“一刀切”的體驗可能并不總是奏效。使高端設備上的用戶滿意的網站可能無法在低端設備上使用，特別是在中等水平的移動和桌面硬件以及新興市場上。
如果我們能夠調整頁面的交付方式，以更好地滿足用戶不同設備的限制，會怎么樣呢?
在上一次的 Chrome Dev Summit talk 中，來自 google 的 Addy Osmani 和來自 Facebook 的 Nate Schloss 討論了 “自適應加載” 這種模式。
- 為所有用戶(包括低端設備)提供快速良好的使用體驗
- 在用戶的網絡和硬件能夠處理的情況下，逐步增加高端功能。
這可以使用戶可以獲得最適合他的體驗。你可以通過 “自適應加載” 解鎖下面的功能：
- 在慢速網絡上提供低質量的圖像和視頻
- 只在高速 cpu 上加載非關鍵的 JAVAScript 進行交互
- 限制低端設備上的動畫幀率
- 避免在低端設備上進行繁重的計算操作
- 在速度較慢的設備上阻止第三方腳本
我們可以通過下面幾個信號來實現自適應加載：
- 網絡：微調數據傳輸使用更少的帶寬（通過 navigator.connection.effectiveType）。我們還可以利用用戶的 Data Saver 選項（通過 navigator.connection.saveData）
- 內存：用于減少低端設備上的內存消耗（通過navigator.deviceMemory）
- CPU核心數：用于限制昂貴的 JavaScript 執行并在設備不能很好處理時（通過navigator.hardwareConcurrency）減少CPU密集型邏輯。這是因為 JavaScript 執行受 CPU 限制。
在演講中，作者介紹了在 Facebook，eBay，Tinder 等網站上使用的這些想法的真實示例。詳細視頻可以到 https://www.youtube.com/watch?v=puUPpVrIRkc&feature=youtu.be 查看
自適應加載 React Hooks
Google Chrome 團隊還發布了一組新的（實驗性的）React Hooks＆Utilities，用于在 React 程序中實現自適應加載技術。
https://github.com/GoogleChromeLabs/react-adaptive-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>
);
};
將來，我們希望看到更多的基礎架構的示例，這些示例可以根據用戶的網絡和設備約束自動調整和最優的應用程序體驗。
