網(wǎng)頁(yè)加載速度優(yōu)化技巧的方案詳解

更新時(shí)間：2023年05月16日 10:30:02 作者：RZeeY

這篇文章主要為大家介紹了網(wǎng)頁(yè)加載速度優(yōu)化技巧的方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>

引言

由于最近工作需求，需要極大優(yōu)化用戶的加載速度。

下面我就從網(wǎng)絡(luò)請(qǐng)求優(yōu)化的方面進(jìn)行一次總結(jié)吧。??

部分圖片采用雪碧圖

雪碧圖也叫CSS精靈，是一種CSS圖像合成技術(shù)，將多張圖片何為一張從而減少網(wǎng)絡(luò)請(qǐng)求。

如b站的圖標(biāo)：https://s1.hdslb.com/bfs/stat...

部分圖片采用svg

SVG 是使用 XML 來(lái)描述二維圖形和繪圖程序的語(yǔ)言。

SVG 與 JPEG 和 GIF 圖像比起來(lái)，尺寸更小，且可壓縮性更強(qiáng)，加載速度更快。并且 SVG 可伸縮，圖像可在任何的分辨率下被高質(zhì)量地打印。

如這個(gè)loading圖標(biāo)：

<?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>

部分圖片轉(zhuǎn) base64 編碼

Base64就是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法。

將部分圖片轉(zhuǎn)為 base64 編碼可減少網(wǎng)絡(luò)請(qǐng)求、圖片服務(wù)器壓力利于頁(yè)面加載。

壓縮 html、css、js 等靜態(tài)資源

編寫代碼時(shí)我們常使用縮進(jìn)和換行，這樣在無(wú)形中增加了代碼文件體積。

在相同的網(wǎng)絡(luò)情況洗，我們的代碼體積越小，用戶在訪問(wèn)我們的網(wǎng)頁(yè)時(shí)加載速度就更快。

對(duì)于 html、css 在發(fā)布到線上版本前，我們可將代碼所有的縮進(jìn)和換行刪除，從而降低代碼體積。如“知乎”：

對(duì)于 js 在發(fā)布到線上版本前，我們可將代碼所有的縮進(jìn)和換行刪除的同時(shí)，將所有變量命名和方法名替換為更簡(jiǎn)短的單詞，從而降低代碼體積。如“知乎”：

CDN

CDN(Content Delivery Network)是指內(nèi)容分發(fā)網(wǎng)絡(luò)，也稱為內(nèi)容傳送網(wǎng)絡(luò)，這個(gè)概念始于1996年，是美國(guó)麻省理工學(xué)院的一個(gè)研究小組為改善互聯(lián)網(wǎng)的服務(wù)質(zhì)量而提出的。

我們將html、css、js、圖標(biāo)、字體、視頻、音樂(lè)等靜態(tài)資源部署到cdn上的各個(gè)節(jié)點(diǎn)，可極大優(yōu)化在不同地區(qū)、不同網(wǎng)絡(luò)運(yùn)營(yíng)商用戶的網(wǎng)絡(luò)請(qǐng)求速度。