本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。
網站開發可以大方向的分前端與後端，而其前端使用者體驗這回事中「速度」又更是貫穿核心的議題。
因為網站設計（開發），真的不是一個門檻高的專業，所以大部分的情況會是前端寫好套後端，至於速度很慢？
後端的問題！伺服器要加強！網路速度要快！
不能說錯也不能說正確，但絕不是一個良好的合作情境。
前端比你想的還要工程
如何善用文件（DOM）與閱讀器（Broswer）的組合，強化很多行為提升效能，才會是從初始圖像設計到工程面的進階。
請到一個資深前端工程師絕對是公司與專案的最好開始
這邊回到主題，參考這篇文章「5 HTML5 Features you need to know」，其中網頁文件載入時瀏覽器會去解析引用資源，解析的過程如果請求來自於很多不同位址那就會產生一些額外的「DNS 查詢」，錙銖必較的高流量網站，能避免就應該會避免，這時候使用 dns-prefetch 會是一個不錯的做法。
再來就是支援度還沒這麼廣的 prerender 屬性，但這效果實在令人驚艷，可以前往這個測試站試試。
概念上就是支援此特性的瀏覽器會接收到指令後在背後先行「預讀」那指定頁面的動作，等點擊到該連結後瀏覽器會切換（hot-swap）畫面過去，使用者體驗上就是「咻～」（自行想像ＸＤ）
看到這邊的你，有可能會想到：那我把全頁的連結都開啟這個功能好了！
經過我測試的答案是：會失靈！！ 然後這項服務會花一些時間處理完請求後才會重新開啟
以Chrome為例，可以前往設定觀看目前狀態：chrome://net-internals#prerender
過多的請求對瀏覽器也是個負擔，這做法要玩得漂亮還是得透過良好的體驗設計，將動線規劃好後針對幾個連結的請求來設定，效果會大大提升。
綜合上述特性，一個流量大的內容站勢必透過 dns-prefetch 來先將幾個 CDN 位置載入，而後再針對延伸閱讀想推廣曝光的部分加上 prerender ，至於頁面中的圖片資源，基於沒瀏覽到就無需先預載的做法，使用 lazyload 就可以達到從架構上與後端合作的「加速與節流工程」
btw, 開發中的網站可能會將 DNS 的 TTL 秒數設定過短減少切換主機的快取時間，上線後這設定若無修正也會導致零碎閱讀的使用者載入感受有停頓感。