Preload、Prefetch 與 Preconnect 的差異

KeyCDN 的「Resource Hints – What is Preload, Prefetch, and Preconnect?」這篇文章介紹了 Preload、Prefetch 與 Preconnect 這三者的差異。

Preconnect 從字面上看就很好理解,而 Preload 與 Prefetch 最大的差異:

Preload is different from prefetch in that it focuses on current navigation and fetches resources with high-priority.

主要在 priority 的差異。

HTML 的 preconnect

在「Preconnect」這邊看到 Preconnect 這個功能,目前在 Mozilla FirefoxGoogle Chrome 以及 Opera 都有支援,用法也很簡單:

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

感覺如果要用的話,可以先送出 head 的部分,打 flush 讓瀏覽器先收到後再送出其他部分?不過對 MVC 架構來說好像變複雜了,不知道有什麼設計比較好...

另外一個是 Prerender,目前是 IE11+、Google Chrome 以及 Opera 有支援,看起來也頗有趣的...