亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

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

系統 1924 0

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

?

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

?

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

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

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

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

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

?

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

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

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

?

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

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

?

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

?

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

?

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

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

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

?

預加載器的陷阱

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

?

我曾經遇到過一個通過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>
    

?

上面這段代碼可以輕松的騙過IE9的預加載機制,在下面的瀑布流中我們可以看到,加載圖片占用了所有的連接,直至第一個圖片加載完成后,CSS文件才開始下載。

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

?

影響預加載器的加載順序的因素

當前,有幾種方式來控制預加載器的加載順序(使用javacript隱藏資源文件既是其中一種),同時, W3C Resource Priorities 中也提供兩個特性來影響預加載器。

lazyload : 直至沒有被標記為lazyload 資源下載完畢后才下載被標記資源。

postpone: 資源在對最終用戶可見之后才開始下載。i.e. 標簽的display屬性被設置為 none。

?

預加載 VS 預讀取

預讀取(Pre-fetching)可以通知瀏覽器哪些資源可能會在未來的某一時機,在當前頁面或者其他頁面中使用。

下面是預讀取的一個簡單的應用,通知瀏覽器為將要訪問的其他站點加載資源:

      <link rel="dns-prefetch" href="other.hostname.com">
    

?

Chrome允許我們預先通知瀏覽器加載未來會用到的資源,被聲明的資源將以較高的優先級被下載。

      <link rel="subresource" href="/some_other_resource.js">
    

?

(Chromium 源碼中提到,被標記為subresource的資源下載的優先級低于樣式文件和腳本文件,但不低于圖片加載優先級)

還有標記可以通知瀏覽器哪些文件是較低級別的預讀取文件。

預讀取未來將被使用的獨立資源文件。

      <link rel="prefetch" href="/some_other_resource.jpeg">
    

?

通過預讀取方式,在后臺渲染整個頁面。

      <link rel="prerender" >
    

?

總結

預加載不是一門新技術,它對提高瀏覽器性能具有紀念意義,我們不需要做任何操作既可以使用預加載。

它廣泛應用,我測試了以下瀏覽器,都具有預加載功能:

  • IE8 / 9 / 10
  • Firefox
  • Chrome (inc Android)
  • Safari (inc iOS)
  • Android 2.3

Bruce Lawson(Opera公司總裁)也宣布Opera Mini 同樣支持預加載。

轉載請注明: 程序猿 ? 如何通過預加載器提升網頁加載速度

?

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


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 久久久久久国产视频 | 久久欧美精品欧美九久欧美 | 久久精品免视看国产成人2021 | 久久伊人精品 | 四虎影院免费在线播放 | 九九这里只精品视在线99 | 久久综合色网 | 国产精品视频麻豆 | 国产亚洲精品线观看77 | 久久婷婷网 | 波多野结衣在线一区 | 成人国产亚洲欧美成人综合网 | 日本久久黄色 | 狠狠色噜噜狠狠狠狠色综合久 | 成人性生活免费视频 | 欧美激情免费 | 亚洲综合日韩精品欧美综合区 | 免费一级a毛片在线播出 | a级日本理论片在线播放 | 日韩 欧美 亚洲 中文字幕 | 久久成人在线视频 | 国产免费久久精品丫丫 | 四虎影院永久 | 这里只有久久精品 | 日日摸夜夜摸人人嗷嗷叫 | 精品播放 | 日本一区视频在线 | 国产免费无遮挡精品视频 | 欧美成人精品福利在线视频 | 97精品国产综合久久久久久欧美 | 日本久久中文字幕 | 欧美精品午夜毛片免费看 | 国产一级爱c片免费播放 | 色妞色综合久久夜夜 | 99re这里只有精品在线 | 久久狠色噜噜狠狠狠狠97 | 亚洲欧美激情综合第一区 | 伊人久久精品亚洲精品一区 | 欧美特黄级乱色毛片 | 亚洲免费视频观看 | 天天综合天天综合 |