web資源優化之圖片加載的時機

時間 2019-12-04

標籤 web 資源優化圖片加載時機欄目 HTML 简体版

原文原文鏈接

前言

圖片資源是WEB項目中很重要的組成部分，也是交互設計中一個很重要的體現，每每一張圖能賽過千言萬語，所謂「一圖勝白言」就是這個道理。而後大量的圖片也會給服務器帶來很大的壓力，據統計：圖片內容已經佔到了互聯網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片，那麼問題就來了。如何最大化優化圖片資源，圖片優化的手段有那些？本章就首先談談經過圖片的加載時機來優化WEB性能。
javascript

即時加載機制

即時加載是最多見的加載方式了，咱們通常都是經過給img標籤指定具體的src值，那麼等頁面渲染的時候，遇到該標籤的話，就會下載該指定的URL圖片，而且渲染出來。經常使用的形式以下：css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
    <img src="http://www.kpbz.net/uploads/allimg/091103/1233HD334-7.jpg" alt=""/>
    <img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" alt=""/>
</body>
</html>

若是在現代瀏覽器運行上面的代碼你會發現如下幾點：html

大部分瀏覽器都會併發下載圖片，圖片的下載沒有阻塞。
src的值若是相同，也只會下載一次，也就是說相同的圖片，不會屢次下載。
圖片的下載和渲染會阻塞整個頁面的渲染。
圖片越大，下載的時間也就越長。

經過上面的幾點的闡述，咱們能夠即時加載的機制運用的場景是：圖片量少，頁面少於3屏比較適合這種技術，向通常的企業宣傳網站比較適合採起這種選型。java

預先加載機制

預加載圖片是提升用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者即可順利地在你的網站上衝浪，並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大比例的網站來講十分有利，它保證了圖片快速、無縫地發佈，也可幫助用戶在瀏覽你網站內容時得到更好的用戶體驗。jquery

和上面介紹的同樣，預先加載的原理是預知用戶將發生行爲，提早加載後用戶所需的圖片。還不夠理解嘛，那假設你是一個愛好動漫的動漫迷，那也應該常常看相應的漫畫吧。如下面的漫畫爲例。
git

通常，一頁的漫畫有好幾屏，等頁面把漫畫加載好了，咱們就慢慢地品味、鑑賞漫畫，慢慢底往下拉動滾動條，看完了當前頁，咱們按下連接跳到下一頁面，重複如此。github

咱們有沒有想過這樣的問題：噹噹前頁面加載好了的時候，咱們慢慢欣賞漫畫的這段時間，能不能用來加載後一頁或者兩頁的漫畫呢。當咱們看完當前頁，進入下一頁的時候，因爲前面已經加載完畢，頁面瞬間加載完畢，這種趕忙，是否是很爽呢。這就運用到了前面前面所說的預先加載技術。web

對於預先加載技術的實現，你們能夠參考下面幫助文檔中第一個連接來根據本身運用的場景來實現。ajax

延遲加載機制

圖片延遲加載也稱懶加載，一般應用於圖片比較多的網頁，若是一個頁面圖片比較多，且頁面高度或寬度有好幾屏，頁面初次加載時，只顯示可視區域的圖片，當頁面滾動的時候，圖片進入了可視區域再進行加載，這樣能夠顯著的提升頁面的加載速度，更少的圖片併發請求數也能夠減輕服務器的壓力。若是用戶僅僅在首屏停留，還能夠節省流量。若是TAB中的圖片較多，也一樣能夠應用於TAB中，當觸發TAB時再進行圖片的加載。瀏覽器

圖片延遲加載的原理：頁面初次加載時獲取圖片在頁面中的位置並緩存(每次取offset的值會引起頁面的reflow)，計算出可視區域，當圖片的位置出如今可視區域中，將src的值替換成真實的地址，此時圖片就開始加載了。

當頁面滾動的時候，再判斷圖片已經緩存的位置值是否出如今可視區域內，進行替換src加載。當全部的圖片都加載完以後，將相應的觸發事件卸載，避免重複操做引發的內存泄漏。將整個窗口當作是一個大容器，那麼也能夠在頁面中設置一個小容器，在小容器中也一樣能夠實現圖片的延遲加載。

像淘寶、天貓等電商就大量採用了該技術，由於對它們來講，要展現的圖片太多了，即時加載又很是耗時間，並且用戶不必定會看完全部的圖片。採用延遲的加載基本上就能解決圖片過多的問題。

延遲加載的機制實現能夠參考雨夜帶刀《圖片延遲加載的實現》的文章。若是你使用Jquery的話，它有一個插件也是來解決這方面的問題，github地址爲：https://github.com/tuupola/jquery_lazyload/，就本人感受而言，使用很是簡單，文檔詳細，因此極力推薦給你們用。

PS:因爲本文只對核心原理作介紹，並不會過多涉及到代碼設計這塊。