網頁加載速度優化

引言

因爲最近工做需求，須要極大優化用戶的加載速度。
下面我就從網絡請求優化的方面進行一次總結吧。😀

部分圖片採用雪碧圖

雪碧圖也叫CSS精靈， 是一種CSS圖像合成技術，將多張圖片何爲一張從而減小網絡請求。


如b站的圖標：
https://s1.hdslb.com/bfs/stat...

部分圖片採用svg

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。


SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強，加載速度更快。而且 SVG 可伸縮，圖像可在任何的分辨率下被高質量地打印。


如這個loading圖標：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(30 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(60 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(120 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(150 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(210 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(240 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(300 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(330 50 50)">
  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>

部分圖片轉 base64 編碼

Base64就是一種基於64個可打印字符來表示二進制數據的方法。


將部分圖片轉爲 base64 編碼可減小網絡請求、圖片服務器壓力利於頁面加載。

壓縮 html、css、js 等靜態資源

編寫代碼時咱們常使用縮進和換行，這樣在無形中增長了代碼文件體積。


在相同的網絡狀況洗，咱們的代碼體積越小，用戶在訪問咱們的網頁時加載速度就更快。


對於 html、css 在發佈到線上版本前，咱們可將代碼全部的縮進和換行刪除，從而下降代碼體積。如「知乎」：





對於 js 在發佈到線上版本前，咱們可將代碼全部的縮進和換行刪除的同時，將全部變量命名和方法名替換爲更簡短的單詞，從而下降代碼體積。如「知乎」：

CDN

CDN(Content Delivery Network)是指內容分發網絡，也稱爲內容傳送網絡，這個概念始於1996年，是美國麻省理工學院的一個研究小組爲改善互聯網的服務質量而提出的。





咱們將html、css、js、圖標、字體、視頻、音樂等靜態資源部署到cdn上的各個節點，可極大優化在不一樣地區、不一樣網絡運營商用戶的網絡請求速度。

Gzip

HTTP 協議上的 Gzip 編碼是一種用來改進 WEB 應用程序性能的技術。大流量的 WEB 站點經常使用 Gzip 壓縮技術來讓用戶感覺更快的速度。


使用 Gzip 壓縮可將文件大小壓縮將近三分之二的大小：

---

- RZeeY