什麼是 RAIL Model？

圖片來源：Performance RAIL's

RAIL Model 是由 Google 所提出，針對效能、以使用者為中心的模式，目標是讓使用者體驗可以更好。

RAIL Model 分別代表 4 個單字如下：

• Response
• Animation
• Idle
• Load

Response： 在 100 毫秒內回應

根據研究顯示，人類從操作到感知反應有 100 毫秒的間隔，也就是說使用者注意到延遲之前，我們有 100 毫秒的時間去回應使用者的行為。

從點擊到回饋的反應時間需小於 0.1 秒（例如：點擊按鈕、導覽列、切換表單的操作）

大家可以到 HUMAN BENCHMARK 網站，，畫面變綠色的時候要趕快點擊，可以看到自己的反應時間 ＸＤ

Animation： 每幀在 10 毫秒以內

The pixel pipeline:

JavaScript => style => layout => paint => composite

Animation 透過 JavaScript 去做操作，會改變 DOM 的 style，這時有可能會影響到 layout，必須重新排版並重新繪製，最後交會的組合才完成。

60 frames per second
所有的步驟必須在 16 ms 內完成（滾動也是一種動畫）還有使用者滾動頁面、收合行為、透過手指拖拉的方式、重新刷新頁面或者是 carousel 的切換等。

盡量不要操作會影響 Layout 的 CSS 屬性，像是 width、height，來減少繪製路徑。 可參考 CSS Triggers

Delay 0 - 0.1 秒為瞬間，而 0.1 - 0.3 秒則為輕微可以被察覺的延遲，盡量讓程式在背景執行，不要影響使用者瀏覽。

Idle： 最大利用空閒時間

利用空閒時間來做延遲的工作，像是把必要的資料限縮到最小並先顯示畫面，再利用接下來的空閒時間做其他的資料載入。

我們應該把各個延遲的工作分成不同的區塊(chunks)，並且每一區塊要能夠在 50ms 以內完成載入，這樣使用者在操作時，我們才可以優先處理使用者的行為。如此一來我們就能最佳的利用空閒時間並同時確保使用者的即時互動。

Load： 載入小於 1 秒

網站載入時間應該小於 1 秒，如果高於 1 秒的話，將會破壞使用者對手上任務的注意力，
不必在 1 秒內載完所有東西，而是需要在 1 秒內產生載入完成的感知。使用漸進式的渲染，並延遲一些不必要的工作在背景下完成。

當然載入時間要小於 1 秒的牽涉範圍非常廣，像是 Domain 的查詢、伺服器的位置、後端程式的反應時間，以及當前的網路速度，影響因素非常多，但我們之後會用 Service Worker 來降低這些因素的影響，並用前端的技術讓載入時間盡可能的小於 1 秒。

以下是 Paul Irish & Paul Lewis 在 Chrome Dev Summit 2015 裡介紹 RAIL 的影片。

參考文件

• Measure Performance with the RAIL Model

• Performance RAIL's

• Introducing RAIL: A User-Centric Model For Performance

Day 08、要分享『關鍵渲染路徑(critical render path)』

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝