Page Rendering Requirement

Web Site Performance

每一秒都很重要 Every second counts 由下圖可以看到如果網頁超過 4 seconds才呈現，增加 25% 使用者離開的機率。

先用一張圖說明Browser內部的運作時序:

First Bytes:

收到的第一個回應封包的時間。 The First Byte time (often abbreviated as TTFB)
DOMContentLoaded:

當document被完整的讀取跟解析後就會被觸發,不會等待 stylesheets, 圖片和subframes完成讀取 (load事件可以用來作為判斷頁面已經完整讀取的方法).
Load Time:

這是指 Window 發出的事件，這事件只所有的資源都已經下載並且顯示完成。 The load event is fired when a resource and its dependent resources have finished loading, which includes images, iframe, fonts, etc.
```
<script>
window.addEventListener("load", function(event) {
console.log("All resources finished loading!");
});
</script>
```
User Interactive:

通常是指 Browser 已經完成了 Javascript的解義，使用者可以Scroll，或者是可以點Links了。這點很重要，不要讓使用者的滑動和連結卡住。

如下圖所示：

在Chrome當中你可以看到藍色和紅色線：