自適應(yīng)加載
之前我們可能都聽(tīng)說(shuō)過(guò) “自適應(yīng)加載” 這個(gè)名詞，可能大多數(shù)人都停留在對(duì)屏幕的大小做出響應(yīng)上，實(shí)際上它還可以指對(duì)實(shí)際的硬件設(shè)備做出響應(yīng)。
在設(shè)備千差萬(wàn)別的世界中，“一刀切”的體驗(yàn)可能并不總是奏效。使高端設(shè)備上的用戶滿意的網(wǎng)站可能無(wú)法在低端設(shè)備上使用，特別是在中等水平的移動(dòng)和桌面硬件以及新興市場(chǎng)上。
如果我們能夠調(diào)整頁(yè)面的交付方式，以更好地滿足用戶不同設(shè)備的限制，會(huì)怎么樣呢?
在上一次的 Chrome Dev Summit talk 中，來(lái)自 google 的 Addy Osmani 和來(lái)自 Facebook 的 Nate Schloss 討論了 “自適應(yīng)加載” 這種模式。
- 為所有用戶(包括低端設(shè)備)提供快速良好的使用體驗(yàn)
- 在用戶的網(wǎng)絡(luò)和硬件能夠處理的情況下，逐步增加高端功能。
這可以使用戶可以獲得最適合他的體驗(yàn)。你可以通過(guò) “自適應(yīng)加載” 解鎖下面的功能：
- 在慢速網(wǎng)絡(luò)上提供低質(zhì)量的圖像和視頻
- 只在高速 cpu 上加載非關(guān)鍵的 JAVAScript 進(jìn)行交互
- 限制低端設(shè)備上的動(dòng)畫(huà)幀率
- 避免在低端設(shè)備上進(jìn)行繁重的計(jì)算操作
- 在速度較慢的設(shè)備上阻止第三方腳本
我們可以通過(guò)下面幾個(gè)信號(hào)來(lái)實(shí)現(xiàn)自適應(yīng)加載：
- 網(wǎng)絡(luò)：微調(diào)數(shù)據(jù)傳輸使用更少的帶寬（通過(guò) navigator.connection.effectiveType）。我們還可以利用用戶的 Data Saver 選項(xiàng)（通過(guò) navigator.connection.saveData）
- 內(nèi)存：用于減少低端設(shè)備上的內(nèi)存消耗（通過(guò)navigator.deviceMemory）
- CPU核心數(shù)：用于限制昂貴的 JavaScript 執(zhí)行并在設(shè)備不能很好處理時(shí)（通過(guò)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)（有效的連接類型）對(duì)應(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)對(duì)程序進(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ù)對(duì)程序進(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>
);
};
將來(lái)，我們希望看到更多的基礎(chǔ)架構(gòu)的示例，這些示例可以根據(jù)用戶的網(wǎng)絡(luò)和設(shè)備約束自動(dòng)調(diào)整和最優(yōu)的應(yīng)用程序體驗(yàn)。
