RAIL 是一種以用戶為中心的性能模型咙鞍，提供考慮性能的結(jié)構(gòu)。該模型會(huì)將用戶體驗(yàn)細(xì)分為關(guān)鍵操作（例如點(diǎn)按袖牙、滾動(dòng)、加載）舅锄，并幫助您為每項(xiàng)操作定義性能目標(biāo)鞭达。
**要點(diǎn) **：核心網(wǎng)頁(yè)指標(biāo)是 Google 新推出的一項(xiàng)計(jì)劃，旨在針對(duì)提供優(yōu)質(zhì)網(wǎng)站用戶體驗(yàn)至關(guān)重要的質(zhì)量信號(hào)提供統(tǒng)一指南皇忿。這是通過 RAIL 定義性能目標(biāo)的推薦方法畴蹭，其閾值與此處詳述的閾值不同。
RAIL 表示 Web 應(yīng)用生命周期的四個(gè)不同方面：響應(yīng)鳍烁、動(dòng)畫叨襟、空閑和加載。由于用戶對(duì)每種情境有不同的性能預(yù)期幔荒，因此糊闽，系統(tǒng)會(huì)根據(jù)情境以及關(guān)于用戶如何看待延遲的用戶體驗(yàn)調(diào)研來(lái)確定效果目標(biāo)。
專注于滿足用戶需求
讓用戶成為性能工作的中心爹梁。下表介紹了用戶如何看待性能延遲的關(guān)鍵指標(biāo)：
用戶對(duì)性能延遲的感知
| 時(shí)間 | 感受 |
|---|---|
| 0 至 16 毫秒 | 用戶非常擅長(zhǎng)跟蹤運(yùn)動(dòng)右犹，如果動(dòng)畫不流暢，他們就會(huì)不喜歡姚垃。只要每秒渲染 60 幀念链，這類動(dòng)畫就會(huì)感覺很流暢。也就是每幀 16 毫秒（包括瀏覽器將新幀繪制到屏幕上所需的時(shí)間）积糯，讓應(yīng)用生成一幀大約 10 毫秒掂墓。 |
| 0 至 100 毫秒 | 在此時(shí)間范圍內(nèi)響應(yīng)用戶操作，讓用戶感覺能夠立竿見影看成。時(shí)間再長(zhǎng)君编，操作與反應(yīng)之間的連接就會(huì)中斷。 |
| 100 至 1000 毫秒 | 在此窗口中绍昂，事情感覺像是任務(wù)自然和持續(xù)推進(jìn)的一部分啦粹。對(duì)于網(wǎng)絡(luò)上的大多數(shù)用戶，加載頁(yè)面或更改視圖代表著一個(gè)任務(wù)窘游。 |
| 1000 毫秒或以上 | 一旦超過 1,000 毫秒（1 秒）唠椭，用戶就會(huì)失去專注于他們正在執(zhí)行的任務(wù)的注意力。 |
| 10000 毫秒或更長(zhǎng) | 一旦超過 10,000 毫秒（10 秒）忍饰，用戶就會(huì)感到沮喪贪嫂，并可能放棄任務(wù)。他們以后不一定會(huì)回來(lái)艾蓝。 |
**注意 **：用戶感知到的性能延遲有所不同力崇，具體取決于網(wǎng)絡(luò)條件和硬件斗塘。例如，通過快速 Wi-Fi 連接在功能強(qiáng)大的臺(tái)式機(jī)上加載網(wǎng)站通常會(huì)在 1 秒內(nèi)完成亮靴，并且用戶已經(jīng)習(xí)慣了這種情況馍盟。在 3G 網(wǎng)絡(luò)連接速度較慢的移動(dòng)設(shè)備上加載網(wǎng)站需要更多時(shí)間，因此移動(dòng)用戶通常更有耐心茧吊，在移動(dòng)設(shè)備上 5 秒內(nèi)加載完畢是一個(gè)更切合實(shí)際的目標(biāo)贞岭。
目標(biāo)與準(zhǔn)則
在 RAIL 中，術(shù)語(yǔ)“目標(biāo)”和“指南”具有特定含義：
目標(biāo)搓侄。與用戶體驗(yàn)相關(guān)的關(guān)鍵效果指標(biāo)瞄桨。例如，點(diǎn)按即可在 100 毫秒以內(nèi)完成繪制讶踪。由于人類的感知相對(duì)穩(wěn)定芯侥，因此這些目標(biāo)不太可能很快改變。
指南乳讥≈椋可幫助您實(shí)現(xiàn)目標(biāo)的建議。這些建議可能特定于當(dāng)前的硬件和網(wǎng)絡(luò)連接狀況云石，因此可能會(huì)隨著時(shí)間的推移而變化物赶。
響應(yīng)：在 50 毫秒內(nèi)處理事件
目標(biāo)：在 100 毫秒內(nèi)完成由用戶輸入發(fā)起的轉(zhuǎn)換，讓用戶感覺互動(dòng)是瞬時(shí)完成的留晚。
準(zhǔn)則：
為確保在 100 毫秒內(nèi)獲得可見響應(yīng)，請(qǐng)?jiān)?50 毫秒內(nèi)處理用戶輸入事件告嘲。這適用于大多數(shù)輸入错维，例如點(diǎn)擊按鈕、切換表單控件或啟動(dòng)動(dòng)畫橄唬。這不適用于輕觸拖動(dòng)或滾動(dòng)赋焕。
雖然聽起來(lái)可能有違常理，但立即響應(yīng)用戶輸入并不總是合適的仰楚。您可以使用以下 100 毫秒的窗口執(zhí)行其他開銷較大的工作隆判，但要小心不要阻止用戶。請(qǐng)盡可能在后臺(tái)運(yùn)行僧界。
對(duì)于需要 50 毫秒以上才能完成的操作侨嘀，請(qǐng)始終提供反饋。
50 毫秒還是 100 毫秒捂襟？
我們的目標(biāo)是在 100 毫秒以內(nèi)響應(yīng)輸入咬腕，那么為什么我們的預(yù)算只有 50 毫秒呢？這是因?yàn)樵岷桑溯斎胩幚碇庹枪玻ǔ＿€會(huì)執(zhí)行其他工作纽帖，并且這些工作會(huì)占用可用于獲得可接受輸入響應(yīng)的部分時(shí)間。如果某個(gè)應(yīng)用在空閑時(shí)間內(nèi)以推薦的 50 毫秒分塊執(zhí)行工作举反，則意味著如果輸入在其中一個(gè)工作塊期間發(fā)生懊直，則可能會(huì)排隊(duì)長(zhǎng)達(dá) 50 毫秒』鸨牵考慮到這一點(diǎn)室囊，可以放心地假設(shè)只有剩余的 50 毫秒可用于實(shí)際的輸入處理。下圖直觀顯示了這種影響凝危，該圖顯示了空閑任務(wù)期間接收的輸入如何排隊(duì)波俄，從而縮短了可用的處理時(shí)間：
動(dòng)畫：在 10 毫秒內(nèi)生成一幀
目標(biāo)：
在 10 毫秒或更短的時(shí)間內(nèi)生成動(dòng)畫中的每一幀。從技術(shù)上講蛾默，每一幀的最大預(yù)算為 16 毫秒（1000 毫秒 / 60 幀/秒約 16 毫秒）懦铺，但瀏覽器需要大約 6 毫秒才能渲染每一幀，因此準(zhǔn)則是每幀 10 毫秒支鸡。
力求實(shí)現(xiàn)視覺流暢冬念。當(dāng)幀速率發(fā)生變化時(shí)，用戶會(huì)注意到牧挣。
準(zhǔn)則：
在諸如動(dòng)畫之類的高壓力點(diǎn)中急前，關(guān)鍵是力所能及的方面都做不到，而絕對(duì)最小為不能瀑构。請(qǐng)盡可能利用 100 毫秒響應(yīng)來(lái)預(yù)先計(jì)算開銷非常大的工作裆针，以便最大限度提高達(dá)到 60 fps 的幾率。
如需了解各種動(dòng)畫優(yōu)化策略寺晌，請(qǐng)參閱渲染性能世吨。
注意 ：識(shí)別所有類型的動(dòng)畫。動(dòng)畫不僅僅是精美的界面效果呻征。這些互動(dòng)中的每一種都被視為動(dòng)畫：
- 視覺動(dòng)畫耘婚，例如進(jìn)入和退出、補(bǔ)間動(dòng)畫和加載指示器陆赋。
- 滾動(dòng)沐祷。這包括快速滑動(dòng)，即用戶開始滾動(dòng)攒岛，然后松開赖临，頁(yè)面會(huì)繼續(xù)滾動(dòng)。
- 正在拖動(dòng)灾锯。動(dòng)畫通常出現(xiàn)在用戶互動(dòng)之后思杯，例如平移地圖或雙指張合進(jìn)行縮放。
空閑：最大限度地延長(zhǎng)空閑時(shí)間
目標(biāo)：最大限度地延長(zhǎng)空閑時(shí)間，以提高網(wǎng)頁(yè)在 50 毫秒內(nèi)響應(yīng)用戶輸入的幾率色乾。
準(zhǔn)則：
利用空閑時(shí)間完成推遲的工作誊册。例如，對(duì)于初始網(wǎng)頁(yè)加載暖璧，請(qǐng)盡可能少加載數(shù)據(jù)案怯，然后使用空閑時(shí)間加載其余數(shù)據(jù)。
在空閑時(shí)間不超過 50 毫秒時(shí)執(zhí)行工作澎办。如果時(shí)間更長(zhǎng)嘲碱，則可能會(huì)干擾應(yīng)用在 50 毫秒內(nèi)響應(yīng)用戶輸入的能力。
如果用戶在空閑時(shí)間工作期間與頁(yè)面交互局蚀，則用戶互動(dòng)應(yīng)始終具有最高優(yōu)先級(jí)麦锯，并中斷空閑時(shí)間工作。
加載：提交內(nèi)容并在 5 秒內(nèi)實(shí)現(xiàn)互動(dòng)
如果網(wǎng)頁(yè)加載速度緩慢琅绅，用戶的注意力就會(huì)分散扶欣，用戶就會(huì)認(rèn)為任務(wù)無(wú)法正常工作。網(wǎng)站加載速度快千扶，平均會(huì)話數(shù)更長(zhǎng)料祠、跳出率更低、廣告可見度更高澎羞。
目標(biāo)：
根據(jù)用戶的設(shè)備和網(wǎng)絡(luò)功能進(jìn)行優(yōu)化髓绽，以實(shí)現(xiàn)快速加載性能。目前妆绞，在 3G 網(wǎng)速較慢的中端移動(dòng)設(shè)備上加載網(wǎng)頁(yè)并可在 5 秒或更短的時(shí)間內(nèi)加載網(wǎng)頁(yè)是一個(gè)不錯(cuò)的目標(biāo)顺呕。
對(duì)于后續(xù)加載，最好在 2 秒內(nèi)加載頁(yè)面括饶。
**注意 **：這些目標(biāo)可能會(huì)隨時(shí)間而變化塘匣。
準(zhǔn)則：
對(duì)用戶共用的移動(dòng)設(shè)備和網(wǎng)絡(luò)連接測(cè)試負(fù)載性能。您可以使用 Chrome 用戶體驗(yàn)報(bào)告來(lái)了解用戶的連接分布情況巷帝。如果無(wú)法為您的網(wǎng)站提供相關(guān)數(shù)據(jù)，可以參閱 The Mobile Economy 2019 報(bào)告扫夜，全球基準(zhǔn)數(shù)據(jù)最好是中端 Android 手機(jī)（如 Moto G4）和速度較慢的 3G 網(wǎng)絡(luò)（定義為 400 毫秒 RTT 和 400 kbps 的傳輸速度）楞泼。可以在 WebPageTest 上提供這種組合笤闯。
請(qǐng)注意堕阔，雖然典型移動(dòng)用戶的設(shè)備可能會(huì)聲稱其使用的是 2G、3G 或 4G 連接颗味，但實(shí)際上超陆，由于數(shù)據(jù)包丟失和網(wǎng)絡(luò)變化，有效連接速度往往會(huì)明顯變慢。
您無(wú)需在 5 秒內(nèi)加載所有內(nèi)容张漂，才能產(chǎn)生加載完畢的感覺〗髂龋考慮延遲加載圖片航攒、代碼拆分 JavaScript 軟件包，以及 web.dev 上建議的其他優(yōu)化趴梢。
**注意 **：
確定影響網(wǎng)頁(yè)加載性能的因素：
- 網(wǎng)速和延遲
- 硬件（例如運(yùn)行速度較慢的 CPU）
- 緩存逐出
- L2/L3 緩存的差異
- 解析 JavaScript
用于測(cè)量 RAIL 的工具
有幾種工具可以幫助您自動(dòng)進(jìn)行 RAIL 測(cè)量漠畜。具體使用哪種方法取決于您需要什么類型的信息以及偏好的工作流類型。
Chrome DevTools
Chrome 開發(fā)者工具可以對(duì)頁(yè)面加載或運(yùn)行時(shí)發(fā)生的一切進(jìn)行深入分析坞靶。請(qǐng)參閱分析運(yùn)行時(shí)性能入門憔狞，熟悉性能面板界面。
開發(fā)者工具的以下功能尤為相關(guān)：
限制 CPU 以模擬性能較低的設(shè)備彰阴。
限制網(wǎng)絡(luò)速度以模擬較慢的連接瘾敢。
查看主線程活動(dòng)，以了解錄制期間主線程上發(fā)生的每個(gè)事件硝枉。
在表格中查看主線程活動(dòng)廉丽，根據(jù)用時(shí)最多的活動(dòng)對(duì)活動(dòng)進(jìn)行排序。
分析每秒幀數(shù) (FPS) 以衡量動(dòng)畫是否真正順暢運(yùn)行妻味。
您可以使用 Performance Monitor 實(shí)時(shí)監(jiān)控 CPU 使用情況正压、JS 堆大小、DOM 節(jié)點(diǎn)數(shù)责球、每秒布局?jǐn)?shù)等等焦履。
使用網(wǎng)絡(luò)部分直觀呈現(xiàn)錄制視頻時(shí)產(chǎn)生的網(wǎng)絡(luò)請(qǐng)求。
在錄制時(shí)截取屏幕截圖雏逾，以準(zhǔn)確回放頁(yè)面在加載頁(yè)面或動(dòng)畫被觸發(fā)等情況下的顯示效果嘉裤。
查看互動(dòng)記錄：可讓您快速了解用戶在與網(wǎng)頁(yè)互動(dòng)后網(wǎng)頁(yè)上發(fā)生了什么。
通過在有潛在問題的監(jiān)聽器觸發(fā)時(shí)突出顯示網(wǎng)頁(yè)栖博，實(shí)時(shí)發(fā)現(xiàn)滾動(dòng)性能問題屑宠。
實(shí)時(shí)查看繪制事件，以確定可能會(huì)降低動(dòng)畫性能的高開銷繪制事件仇让。
燈塔
Lighthouse 可在 Chrome 開發(fā)者工具典奉、PageSpeed Insights、Chrome 擴(kuò)展程序丧叽、Node.js 模塊和 WebPageTest 中使用卫玖。您為其提供一個(gè)網(wǎng)址，它會(huì)模擬 3G 連接速度較慢的中端設(shè)備踊淳，在網(wǎng)頁(yè)上運(yùn)行一系列審核假瞬，然后為您提供負(fù)載性能報(bào)告以及有關(guān)如何改進(jìn)的建議。
以下審計(jì)工作尤為相關(guān)：
答案
Max Potential First Input Delay。根據(jù)主線程的空閑時(shí)間脱茉，估計(jì)應(yīng)用響應(yīng)用戶輸入所需的時(shí)間剪芥。
Total Blocking Time芦劣。 衡量頁(yè)面被阻止響應(yīng)用戶輸入（例如鼠標(biāo)點(diǎn)擊粗俱、屏幕點(diǎn)按或鍵盤按壓）的總時(shí)長(zhǎng)。
可交互時(shí)間虚吟。衡量用戶何時(shí)能以一致的方式與所有頁(yè)面元素互動(dòng)寸认。
加載
不注冊(cè)用于控制網(wǎng)頁(yè)和 start_url 的 Service Worker。Service Worker 可以在用戶設(shè)備上緩存通用資源串慰，從而減少通過網(wǎng)絡(luò)提取資源所花費(fèi)的時(shí)間偏塞。
消除阻塞渲染的資源邦鲫。
推遲屏幕外圖片灸叼。延遲加載屏幕外圖片，等到需要時(shí)再加載庆捺。
適當(dāng)調(diào)整圖片大小古今。請(qǐng)勿提供明顯大于移動(dòng)設(shè)備視口中呈現(xiàn)的尺寸的圖片。
啟用文本壓縮你画。
避免 DOM 規(guī)模過大。通過僅提供渲染網(wǎng)頁(yè)所需的 DOM 節(jié)點(diǎn)來(lái)減少網(wǎng)絡(luò)字節(jié)坏匪。
WebPageTest
WebPageTest 是一種網(wǎng)頁(yè)性能工具拟逮，它使用真實(shí)的瀏覽器訪問網(wǎng)頁(yè)并收集時(shí)間指標(biāo)。在 webpagetest.org/easy 上輸入一個(gè)網(wǎng)址适滓，以獲取頁(yè)面在 3G 網(wǎng)速較慢的實(shí)際 Moto G4 設(shè)備上的加載性能的詳細(xì)報(bào)告敦迄。您還可以對(duì)其進(jìn)行配置，使其包含 Lighthouse 審核凭迹。
摘要
RAIL 是一個(gè)鏡頭罚屋，用于將網(wǎng)站的用戶體驗(yàn)視為由不同互動(dòng)組成的歷程。了解用戶如何看待您的網(wǎng)站蕊苗，以便制定能夠最大限度地影響用戶體驗(yàn)的效果目標(biāo)。
專注于滿足用戶需求沿彭。
100 毫秒以內(nèi)響應(yīng)用戶輸入朽砰。
在設(shè)置動(dòng)畫效果或滾動(dòng)時(shí)，在 10 毫秒以內(nèi)生成幀。
最大限度地延長(zhǎng)主線程空閑時(shí)間瞧柔。
在 5000 毫秒內(nèi)加載互動(dòng)式內(nèi)容漆弄。
