【DailyENJS第5期】如何使用preload、preconnect、prefetch提升Web性能

DailyENJS 致力於翻譯優秀的前端英文技術文章，爲技術同窗帶來更好的技術視野。

今天讓我展現能夠讓你的網站快速加載的簡單技術。

首先，咱們須要知道什麼是Preload，Preconnect和Prefetch。

Preload: 當咱們在 link 標籤中使用 preload 時，它會提早請求資源。主要用於獲取當前路由中使用的高優先級資源。

Preconnect: 解決 DNS 和 TCP 握手問題

DNS-Preconnect: 僅解決 DNS 問題

Prefetch: 提早獲取資源將其置於緩存中，使用資源時從緩存中獲取而不是發出另外一個請求。

你可能會懷疑preload和prefetch之間有什麼區別。preload用於高優先級資源，prefetch用於低優先級資源。

如今讓咱們看一下Vuejs網站的實例。

默認狀況下，vuejs網站不使用上述任何一種方法。

讓咱們使用chrome audits面板來檢查vue站點的Web性能。

我電腦上的 performance 是 43%

在我使用 preconnect 和 preload後

performance 是 79%

這是例子，你能夠在本身的電腦查看。

如今讓咱們看看哪些大型網站正在使用上面這些技巧。

亞馬遜

Github

NetFlix

原文：codeburst.io/how-to-impr…

最後照舊是一個廣告貼，最近新開了一個分享技術的公衆號，歡迎你們關注👇（目前關注人數可憐🤕）