RAIL 是一種以用戶為中心的性能模型白华。每個(gè)網(wǎng)絡(luò)應(yīng)用均具有與其生命周期有關(guān)的四個(gè)不同方面脏榆，且這些方面以不同的方式影響著性能：
TL;DR
- 以用戶為中心；最終目標(biāo)不是讓您的網(wǎng)站在任何特定設(shè)備上都能運(yùn)行很快吮旅，而是使用戶滿意亿柑。
- 立即響應(yīng)用戶；在 100 毫秒以內(nèi)確認(rèn)用戶輸入肮柜。
- 設(shè)置動(dòng)畫(huà)或滾動(dòng)時(shí)陷舅，在 10 毫秒以內(nèi)生成幀。
- 最大程度增加主線程的空閑時(shí)間审洞。
- 持續(xù)吸引用戶蔑赘；在 1000 毫秒以內(nèi)呈現(xiàn)交互內(nèi)容。
以用戶為中心
讓用戶成為您的性能工作的中心预明。用戶花在網(wǎng)站上的大多數(shù)時(shí)間不是等待加載缩赛，而是在使用時(shí)等待響應(yīng)。了解用戶如何評(píng)價(jià)性能延遲：
響應(yīng)：在 100 毫秒以內(nèi)響應(yīng)
在用戶注意到滯后之前您有 100 毫秒的時(shí)間可以響應(yīng)用戶輸入撰糠。這適用于大多數(shù)輸入酥馍，不管他們是在點(diǎn)擊按鈕、切換表單控件還是啟動(dòng)動(dòng)畫(huà)阅酪。但不適用于觸摸拖動(dòng)或滾動(dòng)旨袒。
如果您未響應(yīng)，操作與反應(yīng)之間的連接就會(huì)中斷术辐。用戶會(huì)注意到砚尽。
盡管很明顯應(yīng)立即響應(yīng)用戶的操作，但這并不總是正確的做法辉词。使用此 100 毫秒窗口執(zhí)行其他開(kāi)銷大的工作必孤，但需要謹(jǐn)慎，以免妨礙用戶瑞躺。如果可能敷搪，請(qǐng)?jiān)诤笈_(tái)執(zhí)行工作。
對(duì)于需要超過(guò) 500 毫秒才能完成的操作幢哨，請(qǐng)始終提供反饋赡勘。
動(dòng)畫(huà)：在 10 毫秒內(nèi)生成一幀
動(dòng)畫(huà)不只是奇特的 UI 效果。例如捞镰，滾動(dòng)和觸摸拖動(dòng)就是動(dòng)畫(huà)類型闸与。
如果動(dòng)畫(huà)幀率發(fā)生變化毙替，您的用戶確實(shí)會(huì)注意到。您的目標(biāo)就是每秒生成 60 幀践樱，每一幀必須完成以下所有步驟：
從純粹的數(shù)學(xué)角度而言厂画，每幀的預(yù)算約為 16 毫秒（1000 毫秒 / 60 幀 = 16.66 毫秒/幀）。 但因?yàn)闉g覽器需要花費(fèi)時(shí)間將新幀繪制到屏幕上映胁，只有 10 毫秒來(lái)執(zhí)行代碼。
在像動(dòng)畫(huà)一樣的高壓點(diǎn)中甲雅，關(guān)鍵是不論能不能做解孙，什么都不要做，做最少的工作抛人。 如果可能弛姜，請(qǐng)利用 100 毫秒響應(yīng)預(yù)先計(jì)算開(kāi)銷大的工作，這樣您就可以盡可能增加實(shí)現(xiàn) 60fps 的可能性妖枚。
如需了解詳細(xì)信息廷臼，請(qǐng)參閱渲染性能。
空閑：最大程度增加空閑時(shí)間
利用空閑時(shí)間完成推遲的工作绝页。例如荠商，盡可能減少預(yù)加載數(shù)據(jù)，以便您的應(yīng)用快速加載续誉，并利用空閑時(shí)間加載剩余數(shù)據(jù)莱没。
推遲的工作應(yīng)分成每個(gè)耗時(shí)約 50 毫秒的多個(gè)塊。如果用戶開(kāi)始交互酷鸦，優(yōu)先級(jí)最高的事項(xiàng)是響應(yīng)用戶饰躲。
要實(shí)現(xiàn)小于 100 毫秒的響應(yīng)，應(yīng)用必須在每 50 毫秒內(nèi)將控制返回給主線程臼隔，這樣應(yīng)用就可以執(zhí)行其像素管道嘹裂、對(duì)用戶輸入作出反應(yīng)，等等摔握。
以 50 毫秒塊工作既可以完成任務(wù)寄狼，又能確保即時(shí)的響應(yīng)。
加載：在 1000 毫秒以內(nèi)呈現(xiàn)內(nèi)容
在 1 秒鐘內(nèi)加載您的網(wǎng)站氨淌。否則例嘱，用戶的注意力會(huì)分散，他們處理任務(wù)的感覺(jué)會(huì)中斷宁舰。
側(cè)重于優(yōu)化關(guān)鍵渲染路徑以取消阻止渲染拼卵。
您無(wú)需在 1 秒內(nèi)加載所有內(nèi)容以產(chǎn)生完整加載的感覺(jué)。啟用漸進(jìn)式渲染和在后臺(tái)執(zhí)行一些工作蛮艰。將非必需的加載推遲到空閑時(shí)間段（請(qǐng)參閱此網(wǎng)站性能優(yōu)化 Udacity 課程腋腮，了解更多信息）。
關(guān)鍵 RAIL 指標(biāo)匯總
要根據(jù) RAIL 指標(biāo)評(píng)估您的網(wǎng)站，請(qǐng)使用 Chrome DevTools Timeline 工具記錄用戶操作即寡。然后根據(jù)這些關(guān)鍵 RAIL 指標(biāo)檢查 Timeline 中的記錄時(shí)間徊哑。
