站長資訊平臺

如何通過預加載器提升網頁加載速度

2019-03-25 來源：葡萄城控件技術團隊博客

預加載器(Pre-loader)可以說是提高瀏覽器性能最重要的舉措。Mozilla 官方發(fā)布數(shù)據(jù)，通過預加載器技術網頁的加載性能提升了19%，Chrome測試了 Alexa 排名前2000名網站，性能有20%的提升。

它并不是一門新技術，有人認為只有 Chrome 才具備這個功能。也有人認為它是有史以來提升瀏覽器性能最有效的方法。如果你第一次接觸預加載器，也許心中已經有了無數(shù)個問號。什么是預加載器？它是如何提升瀏覽器性能的？

首先需要了解瀏覽器是如何加載網頁的

一個網頁的加載依賴于腳本文件、CSS樣式文件。讓我們看看瀏覽器加載網頁的過程。

首先，瀏覽器下載 HTML 并開始解析。如果瀏覽器發(fā)現(xiàn)外部CSS資源鏈接則發(fā)送下載請求。瀏覽器可以在下載CSS資源的同時，并行解析HTML文件，但是，一旦發(fā)現(xiàn)有腳本文件的引用，則必須等待腳本文件完成下載并且執(zhí)行后才能繼續(xù)解析。腳本文件完成下載并且執(zhí)行后，瀏覽器可以繼續(xù)解析HTML工作，如果遇到非阻塞資源 i.e. 圖片瀏覽器會發(fā)送下載請求并且繼續(xù)解析。

即使瀏覽器可以并行執(zhí)行多個請求，但是無法與針對腳本文件的操作并行執(zhí)行。

可以通過IE7打開鏈接中的網頁進行測試。我們可以看到，網頁head標簽內包含2個樣式文件和2個腳本文件。在body 中，包含3個圖片、1個腳本文件。

通過瀑布流我們可以查看資源加載的過程：

腳本文件的下載和執(zhí)行，會阻斷其他資源文件的下載，無疑將大大降低瀏覽器性能。

預加載器如何提高網絡利用率

2008 年，IE、WebKit和Mozilla都實現(xiàn)了預加載器功能，來提升網絡的利用率，改善腳本文件對其他資源文件的阻塞現(xiàn)狀。

當瀏覽器被腳本文件阻塞時，另一個輕量級的解析器會繼續(xù)瀏覽剩余的標記，尋找需要下載的資源i.e. 樣式文件，腳本文件，圖片等。

一旦發(fā)現(xiàn)，預加載器既可以在后臺開始接收這些資源，等待主解析器完成當前的腳本操作，其他資源已經完成下載，這樣就減輕了腳本阻塞帶來的性能損耗。

下面這個瀑布流是使用IE8打開鏈接中網頁的結果，性能有顯著的提升：IE8=7S > IE7=14S。

預加載功能仍然是各大瀏覽器廠商樂此不疲的實驗領域。很多瀏覽器嘗試設置資源下載的優(yōu)先級。例如，Safari降低了不作用于當前視圖區(qū)域樣式文件的優(yōu)先級。Chrome 則設置腳本文件的優(yōu)先級高于圖片，即使腳本文件位于HTML底部。

預加載器的陷阱

預加載器只能檢索HTML標簽中的URL，無法檢測到使用腳本代碼添加的URL，直至腳本代碼執(zhí)行時才可以獲取這類資源。

我曾經遇到過一個通過javascript判斷當前Window寬度，進而決策加載CSS樣式文件的例子。預加載器無法識別此類資源。

<html>

<head>

<script>

var file = window.innerWidth < 1000 ? "mobile.css" : "desktop.css";

document.write('<link rel="stylesheet" type="text/css"

href="css/' + file + '"/>'); </script>

</head>

<body>

<img src="img/gallery-img1.jpg" />

<img src="img/gallery-img2.jpg" />

<img src="img/gallery-img3.jpg" />

<img src="img/gallery-img4.jpg" />

<img src="img/gallery-img5.jpg" />

<img src="img/gallery-img6.jpg" />

</body>

</html>