提升低端設(shè)備的 Web 性能
提示：文末有福利！
自適應(yīng)加載
之前我們可能都聽說過 “自適應(yīng)加載” 這個名詞，可能大多數(shù)人都停留在對屏幕的大小做出響應(yīng)上，實際上它還可以指對實際的硬件設(shè)備做出響應(yīng)。
在設(shè)備千差萬別的世界中，“一刀切”的體驗可能并不總是奏效。使高端設(shè)備上的用戶滿意的網(wǎng)站可能無法在低端設(shè)備上使用，特別是在中等水平的移動和桌面硬件以及新興市場上。
如果我們能夠調(diào)整頁面的交付方式，以更好地滿足用戶不同設(shè)備的限制，會怎么樣呢?
在上一次的 Chrome Dev Summit talk 中，來自 Google 的 Addy Osmani 和來自 Facebook 的 Nate Schloss 討論了 “自適應(yīng)加載” 這種模式。
為所有用戶(包括低端設(shè)備)提供快速良好的使用體驗 在用戶的網(wǎng)絡(luò)和硬件能夠處理的情況下，逐步增加高端功能。
這可以使用戶可以獲得最適合他的體驗。你可以通過 “自適應(yīng)加載” 解鎖下面的功能：
在慢速網(wǎng)絡(luò)上提供低質(zhì)量的圖像和視頻 只在高速 cpu上加載非關(guān)鍵的JavaScript進行交互限制低端設(shè)備上的動畫幀率 避免在低端設(shè)備上進行繁重的計算操作 在速度較慢的設(shè)備上阻止第三方腳本
我們可以通過下面幾個信號來實現(xiàn)自適應(yīng)加載：
網(wǎng)絡(luò)：微調(diào)數(shù)據(jù)傳輸使用更少的帶寬（通過 navigator.connection.effectiveType）。我們還可以利用用戶的Data Saver選項（通過navigator.connection.saveData）內(nèi)存：用于減少低端設(shè)備上的內(nèi)存消耗（通過 navigator.deviceMemory）CPU核心數(shù)：用于限制昂貴的 JavaScript執(zhí)行并在設(shè)備不能很好處理時（通過navigator.hardwareConcurrency）減少CPU密集型邏輯。這是因為JavaScript執(zhí)行受CPU限制。
在演講中，作者介紹了在
Facebook，eBay，Tinder等網(wǎng)站上使用的這些想法的真實示例。詳細視頻可以到 https://www.youtube.com/watch?v=puUPpVrIRkc&feature=youtu.be 查看
自適應(yīng)加載 React Hooks
Google Chrome 團隊還發(fā)布了一組新的（實驗性的）React Hooks＆Utilities，用于在 React 程序中實現(xiàn)自適應(yīng)加載技術(shù)。
https://github.com/GoogleChromeLabs/react-adaptive-hooks
useNetworkStatus React Hook：用于根據(jù)網(wǎng)絡(luò)狀態(tài)（有效的連接類型）對應(yīng)用程序進行調(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?=?;
??????break;
????case?'3g':
??????media?=?;
??????break;
????case?'4g':
??????media?=?...;
??????break;
????default:
??????media?=?...;
??????break;
??}
??return?{media};
};
useSaveData 用于根據(jù)用戶瀏覽器的數(shù)據(jù)保護選項對程序進行調(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ù)對程序進行調(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)用程序體驗。
了解更多內(nèi)容：https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69
更多相關(guān)閱讀
Tinder Web 工程的復雜自適應(yīng)加載策略：https://medium.com/@roderickhsiao/sophisticated-adaptive-loading-strategies-7118341fcf91基于網(wǎng)絡(luò)質(zhì)量的自適應(yīng)服務(wù)：https://web.dev/adaptive-serving-based-on-network-quality