網路連線的快慢,是前端效能的瓶頸之一,在這裡我們能做些什麼呢,下面介紹幾個通過瀏覽器特性來很容易提高資源載入速度的方法:
dns prefetching
dns解析的速度可用通過下面的標籤來進行預解析:
1
<
link
rel
=
"dns-prefetch"
href
=
""
>
preconnect
和dns預解析差不多,preconnect還會做tcp握手和tls negotiation:
1
<
link
rel
=
"preconnect"
href
=
""
>
prefetching
如果我們猜測使用者接下來將要訪問哪個具體的資源,那就可以用prefetching來預載入確定的資源了:
1
<
link
rel
=
"prefetch"
href
=
"image.png"
>
prerendering pages
預先渲染頁面,這是更牛的預載入方式了,它的作用就類似開啟乙個隱藏的tab差不多:
1
<
link
rel
=
"prerender"
href
=
""
>
新特性:preloading 1
<
link
rel
=
"preload"
href
=
"image.png"
>
合理利用以上標籤,可以一定程度上提高使用者體驗。
前端效能優化 預載入
1.什麼是預載入 資源預載入是另乙個效能優化技術,我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預載入簡單來說就是將所有所需的資源提前請求載入到本地,這樣後面在需要用到時就直接從快取取資源。2.為什麼要用預載入 在網頁全部載入之前,對一些主要內容進行載入,以提供給使用者更好的體驗,...
前端效能優化 資源預載入
預載入是瀏覽器對將來可能被使用資源的一種暗示,一些資源可以在當前頁面使用到,一些可能在將來的某些頁面中被使用。作為開發人員,我們比瀏覽器更加了解我們的應用,所以我們可以對我們的核心資源使用該技術。預載入可以拆分成很多小點 dns prefetch,subresource,prefetch,preco...
前端效能優化 資源預載入
預載入是瀏覽器對將來可能被使用資源的一種暗示,一些資源可以在當前頁面使用到,一些可能在將來的某些頁面中被使用。作為開發人員,我們比瀏覽器更加了解我們的 應用,所以我們可以對我們核心資源使用該技術。當提到前端效能優化時,我們首先會聯想到檔案的合併,壓縮,檔案快取和開啟服務端的gzip壓縮等,這使得頁面...