對於網站SEO概年不清除的同學請看 WEB頁面SEO —— 網站TDK優化細節 ；
外聯CSS以及JS 使用延遲加載只需要將這些外聯鏈接寫在body底部即可。接下來講解dns-prefetch，preconnect，prefetch和prerender。
這些屬性的定義鏈接：https://www.iana.org/assignments/link-relations/link-relations.xhtml
1、dns-prefetch
定義：用於指示將用於獲取鏈接上下文所需資源的源，並且用戶代理應儘早解析。
其實意思也很容易理解，dns-prefetch就是一項使瀏覽器主動去執行域名解析的功能。
一般的形式如下，href屬性值就是需要DNS預解析的host
<link rel="dns-prefetch" href="//example.com">
2、preconnet
瀏覽器要建立一個連接，一般需要經過DNS查找，TCP三次握手和TLS協商（如果是https的話），這些過程都是需要相當的耗時的，所以preconnet，就是一項使瀏覽器能夠預先建立一個連接，等真正需要加載資源的時候就能夠直接請求了。
而一般形式就是
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
瀏覽器會進行以下步驟：
- 解釋href的屬性值，如果是合法的URL，然後繼續判斷URL的協議是否是http或者https否則就結束處理
- 如果當前頁面host不同於href屬性中的host,crossorigin其實被設置爲anonymous(就是不帶cookie了)，如果希望帶上cookie等信息可以加上crossorign屬性,corssorign就等同於設置爲use-credentials
3、prefetch
定義：預取鏈接關係類型用於標識下一次從鏈接上下文進行導航時可能需要的資源，以及用戶代理應該獲取的資源，這樣用戶代理可以在將來請求資源時提供更快的響應。
能夠讓瀏覽器預加載一個資源（HTML，JS，CSS或者圖片等），可以讓用戶跳轉到其他頁面時，響應速度更快。
一般形式就是
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">
雖然是預加載了，但是頁面是不會解析或者JS是不會直接執行的。
4、prerender
定義：用於標識下一次從鏈接上下文進行導航時可能需要的資源，以及用戶代理應該獲取和執行的資源，這樣用戶代理可以在將來請求資源時提供更快的響應。
而prerender不僅會加載資源，還會解執行頁面，進行預渲染，但是這都是根據瀏覽器自身進行判斷。
瀏覽器可能會
- 分配少量資源對頁面進行預渲染
- 掛起部分請求直至頁面可見時
- 可能會放棄預渲染，如果消耗資源過多
等等情況。。。
一般形式
<link rel="prerender" href="//example.com/next-page.html">
5、pr屬性
dns-prefetch，preconnect，prefetch和prerender都支持一個pr屬性（0.0到1.0範圍的值），就是讓瀏覽器能夠判斷優先加載那些資源，畢竟瀏覽器內部是有可用的連接池的，資源緊張的情況下只能加載優先級更高的資源。
總結：
dns-prefetch和preconnect的存在可以讓瀏覽器在解析文檔的同時可以預先進行DNS解析或者預先建立一個鏈接，接下來加載CDN的其他資源時就可以更加快速，文檔並沒有說瀏覽器應該在那個階段進行，只是說儘可能早。因爲DNS解析和TCP三次握手都是相當消耗時間，當然也有其他手段去在其他方面去優化例如持久鏈接和多路複用，不用每次請求都建立建立一個新的鏈接，但是建立一個鏈接所必要的消耗是優化不了。所以在解析文檔的同時做好這些事情，頁面整體加載速度可以有一定程度上的優化。
prefetch和prerender可以告訴瀏覽器用戶下個跳轉的頁面的地址，瀏覽器可以預加載這些頁面資源到緩存或者預渲染好，用戶就以後體驗頁面秒開，當然了不一定是頁面，其他資源例如圖片，js和css等等也是可以預加載到緩存裏面。
參考資料：
Github項目：https://github.com/joshbuchea/HEAD
Segmentfault： https://segmentfault.com/a/1190000011065339