前端效能優化

前端紙飛機發表於2022-04-24
前端優化

事件委託

事件委託（也叫事件代理）利用了事件冒泡，把監聽函式繫結在父容器上。在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊。

使用事件委託的優點：

a.減少DOM操作，使事件處理時間減少。
b.減少記憶體空間的使用，提升效能。

簡單例子：

let myUl = document. getElementByld("my-ul"); 
myUl.addEventListener('click',function(e){ 
	if(e.target.tagName == "LI"){
		//如果點選的目標的標籤名為LI
		alert(e.target.innerText)
	}
})

函式防抖與節流

可見文章：https://blog.csdn.net/qq_32442973/article/details/118739927

webp

WebP是Google推出的一種同時提供有失真壓縮與無失真壓縮的圖片檔案格式，派生自影像編碼格式VP8,支援透明圖層和多圖片動圖。

WebP可對網頁圖片有效進行壓縮而不影響圖片清晰度，從而節省頻寬，提高圖片下載速度。在質量相同的情況下，WebP格式影像的體積要比JPEG格式影像小40%，比PNG檔案小26%。

Google提供了 WebP檔案解碼器(libvpx)和 命令列工具(webpconv)，用於JEPG、png等格式圖片與WebP格式之間的轉換。WebP目前支援Chrome核心、Edgel8+、Safari 14+、Android的WebView等
瀏覽器，不支援ie。

方法一：前端js判斷載入

對瀏覽器進行判斷是否支援WebP，先載入一張base64的WebP格式，根據寬高來判斷是否支援。如果支援則載入預設的WebP格式的圖片，如果不支援則把img標籤裡的圖片字尾換成常規的jpg或png即可。

function checkWebp(callback) { 
	var img = new Image(); 
	img.onload = function () { 
		var result = (img.width>0) && (img.height>0); 
		callback(result);
	};
	img.onerror = function () { 
		callback(false);
	};
	img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVIA4IBYPKNKwAQCdASoBAAEADsD+JaQAASFRDFGJ';
}
function showlmage(flag){ 
	var imgs = Array.from(document.querySelectorAll('img')) 
	imgs.forEach(function(i){ 		
		var src = i.attributes['data-src'].value
		if(flag){
			i.src = src
		}else{
			src = src.replace(/\.webp$/,'.jpg')
		}
	})
}
checkWebp(showlmage)

方法二：前端picture標籤

如果瀏覽器支援WebP格式，就會載入 a.webp，否則會載入a.jpg。

<picture class="pic">
	<source type="image/webp" srcset="a.webp"> 
	<img class="img" src="a.jpg">
</picture>

方法三：服務端響應不同格式

支援webp圖片的瀏覽器在向伺服器傳送請求時，會在請求頭Accept中帶上image/webp，然後伺服器根據是否含有這個頭資訊來決定返回webp或其它格式圖片。很多雲伺服器和CDN帶有這種WebP自適應功能。

seo優化

seo(Search Engine Optimization)即搜尋引擎優化，就是通過總結搜尋引擎的運作規則，對網站進行合理的優化以提高網站在搜尋引擎的排名。 搜尋引擎通過爬蟲(蜘蛛)程式按一定規則抓取收錄你的網頁，分析處理後按關鍵字建立索引，以便為使用者提供快速檢索網頁的服務。seo就是通過挖掘使用者搜尋習慣，設 定使用者所搜尋的關鍵詞，優化網站定位和佈局，填充優質網站內容，使網頁符合爬蟲胃口，獲得搜尋引擎信任，在不損害使用者體驗的情況下使網站排名靠在搜尋引擎前列，從而提高網站訪問量。

做法：

  1. 提高頁面載入速度。使用CSS圖示，背景圖片壓縮，使用雪碧圖，減少HTTP請求數等。
  2. 結構、表現和行為的分離。儘量不要把CSS和js放在同一個頁面，採用外鏈的方式。
  3. 優化網站分級結構，調整頁面佈局。在每個內頁加麵包屑導航，頁面內容儘量不要做成flash、視訊。
  4. 集中網站杈重，可以使用"rel=nofollown"屬性，告訴爬蟲無需抓取此頁，從而將權重分紿其他的連結。
  5. strong、em標籤強調關鍵字。strong標籤在搜尋引擎中能夠得到高度的重視。
  6. 利用a標籤的title屬性。在不影響頁面功能的情況下，儘量紿a標籤加上title屬性，更有利於爬蟲抓取資訊。
  7. img應使用"alt"屬性加以說明，這個屬性可以在圖片載入不出來的時候顯示在頁面上相關的文字資訊。
  8. H標籤的使用，自帶權重，放在該最重要的標題上面。
  9. 精心設定meta標籤，如title， keywords，description等，反映網站的定位。內容與關鍵字要對應，增加關鍵字的密度。
  10. 增加網站的404頁面，利於提高使用者體驗，主要防止爬蟲丟失。
  11. 重要內容不要用JS輸出，爬蟲不識別JS程式碼裡的程式內容。
  12. 儘量少使用iframe框架，爬蟲一般不會讀取其中的內容。
  13. 新增外鏈。選擇與網站相關性比較高，整體質量比較好的網站交換友鏈，鞏固穩定關鍵詞排名。
  14. 填充優質的原創內容。

base64編碼

Base64是一種編碼演算法，使用64個可列印字元（"A-Z，a-z，0-9， +，/"，'='號就是65個）來對任意資料進行編碼。

通常用於將二進位制資料（如圖片）轉化為可列印字元，方便儲存和http傳輸。

Base64不是真正的加密演算法，可以被任何人編碼解碼。可以使用base64線上編碼解碼工具。

前端應用：

1.html直接嵌入Base64編碼圖片，避免不必要的外部資源請求。

<img alt="logo" src="data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA..." />

.bg{
	background:url（data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA...）
}

(不適用色彩豐富的大圖片，其編碼後字串較大，增加html/css體積，影響頁面載入速度)

2.canvas的toDataURL

將canvas畫布內容轉為base64編碼格式後傳遞到後端，後端base64解碼儲存。

3.FileReader的readAsDataURL

將上傳的檔案轉為base64格式提交到伺服器，如使用者頭像。

字型圖示

字型圖示（ iconfont） 將svg向量圖示作成字型，採用字型格式來顯示網頁中的的純色圖示。同字型使用一樣，在css中通過@font-face定義，通過color, font-size等改變圖示的顏色，大小等樣式。

uni-app種使用字型圖示

先
https://blog.csdn.net/qq_45018844/article/details/120757230
再
https://blog.csdn.net/qq_45018844/article/details/120827906

普通專案使用字型圖示

https://blog.csdn.net/qq_48386796/article/details/119061059

lazy-load

lazy-load（懶載入）就是按需載入圖片，等圖片出現在瀏覽器當前視窗內再去載入，這樣不用一次性載入全部內容，減少首屏時請求數，緩解瀏覽器和伺服器壓力，節省流量。

實現原理：
前端效能優化 若在src中填入圖片地址，瀏覽器就可以發起請求，載入一張圖片。要實現懶載入，可以定義一個虛擬src屬性即data-src存放原圖地址，而屬性src填寫
一張低質量的空白佔點陣圖。當頁面滾動時，遍歷圖片判斷是否在可視區域內，如果在則將data-src中真實地址放到src中，實現按需載入。另外頁面滾動是一個觸發頻繁的事件，可以利用防抖或節流函式優化一下。

gzip壓縮

gzip是一種資料壓縮格式，是HTTP協議上的GZIP編碼。

一般用於伺服器將靜態檔案壓縮後傳輸到客戶端，可壓縮到原大小的4 0% ,大大節
省網路頻寬，提高訪問速度。

啟 用g z i p需 要 客 戶 端 和 服 務 端 的 共 同 支援，現在主流瀏覽器和常見伺服器都是支援gzip的。

gzip工作原理

  1. 瀏覽器若支援g zip ,請求頭中會設定屬ttaccept-encoding： gzip來標識瀏覽器支
    持gzip壓縮。

  2. 服務端配置啟用gzip壓縮，收到請求後解析請求頭，判斷瀏覽器是否支援gzip ,
    若支援，響應時對請求的資源進行壓縮並返回gzip檔案給客戶端。並在http響應頭
    中設定content-encoding:gzip,表可甘萃端使用了 gzip的壓縮方式。

  3. 瀏 覽 器 接 收 響 應 後 判 斷 內 容 是 否 被 壓縮，如是則解壓縮，然後顯示頁面內容。

cdn

CDN （ Content Delivery Network,內容分發網路），是一組分佈在多個不同地理
位置的WEB伺服器（快取伺服器），用於有效的向使用者分發內容。

主要原理

就是將源站的靜態資源（圖片視訊、html/css/jss安裝包apk等）快取到位於不同區域的CDN節點伺服器上，通常是終端網路提供商的機房，當使用者訪問網站時，會去離使用者距離最近的CDN伺服器上獲取，從而避免了網路擁塞，提高了訪問速度，緩解了源站壓力。

具體流程

  1. 用 戶 輸 入 要 訪 問 的u r l ,瀏 覽 器 通 過 域名解析（本地DNS系統和CDN專用DNS伺服器）得到CDN負載均衡裝置的IP地址。

  2. 瀏覽器向CDN負載均衡發出訪問醺黑CDN負載均衡根據使用者IP地址及URL,判斷距離、有無內容、負載情況後返回使用者所屬區域的最佳cdn快取伺服器IP。

  3. 使用者向cdn快取伺服器發起請求，伺服器響應使用者請求。

  4. 如果這臺快取伺服器上沒有使用者想要的內容，再由快取伺服器向源伺服器請求。

  5. 快取伺服器從源伺服器得到內容後，一方面在本地進行快取，另一方面將獲取的資料返回給客戶端。

light-hourse

Lighthouse是Google開源的一個自動化的網站效能測評工具。主要功能是檢測網站的效能，分析網路應用和網頁，收集現代效能指標並給出最佳實踐的建議。

使用

  1. Lighthouse已整合到chrome瀏覽器開發者工具中，位於'Audits'皮膚下，高版本
    chrome 直接顯示 lighthouse 項。點選'Generate report'後生成並展示測評結果，結果包含了效能(Performance),訪問無障礙(Accessibility),最佳實踐(Best Practice),搜尋引擎優化(SEO),PWA(Progressive Web App)五個部分。

  2. 或在專案中安裝全域性包lighthouse,需要Node 8及以上版本。執行
    lighthouse http://www.test.com 預設會在當前目錄下生成一個HTM L格測評報告。

Tree Shaking

TreeShaking即掩樹優化意思是從包中刪除所有引入但沒有被實際用到的程式碼 （ 也
稱為死程式碼Dead Code ） 來縮減打包後的體積。形象比喻為將‘廢樹葉'搖下來，是DCE（ dead code elimination） 程式碼清除技術的一種。

Tree Shaking由來：

當javascript應用體積越來越大時，一個有利 於 減 少 體 積 的 辦 法 是 拆 分 為 不 同 的 可 重用模組，如CommonJs、AMD、CMD模組化方案。
隨著模組化的發展 ，開發人員還想進一步的移除多餘的程式碼 ， ES6模組的出現使 其成為可 能 ， 打包工具Rollup團隊率先提出並實現了Tree Shaking, Webpack 2.0版開始接入 ， 至今不少打包工具都支援TreeShaking。

Tree Shaking 原理：

ES6模組靜態化和靜態分析是Tree shaking的基礎。
靜態分析就是不執行程式碼，在編譯時從字面量上對程式碼進行分析從而正確判斷到底載入了哪些模組 。 再分析程式流 ， 判斷哪些變數未被使用引用，進而刪除對應程式碼。

早先CommonJS是動態require一個模組 ， 可以巢狀在函式和if語句中 ,只有程式碼執行後才知道是否需要該模組 ,很難在譯階段通過靜態分析去做優化。

ES6模組使用靜態匯入語法import , 且只能作為模組頂層的語句出現，這種靜態化
在編譯階段就可以高度確定模組間的依賴關係 ， 不依賴程式碼的執行結果 ， 所以可以進行可靠的靜態分析。

在webpa ck中由webpa ck通過靜態分析標記出模組匯出值中哪些沒有被用過 ， 然 後利用外掛uglify（程式碼壓縮優化工具）進行清除，刪掉這些沒被用到的方法。

在Webpack中使用Tree Shaking：

  1. 使用ES6模組語法，Tree Shaking只支援import,不支援require。
  2. 新 的webpack 4正式版 ， 通過指定package.json 中的 si de Effects 屬性，向compiler提供提示 ， 表明專案中的哪些檔案 是“ pure（純的ES6模組 ） ， 沒有副 作用的 ” ， 由此可以安全地刪除檔案中未使用的部分。
  3. 生產模式配置選項。配置optimization.used Exports 為 true ,啟動標記功能（預設有）。

預載入

預載入就是將所有所需的資源提前請求載入到本地，這樣後面在需要用到時就直接
從快取取資源。

如果請求的內容過於龐大，沒有使用預載入的頁面就會長時間的展現為一片空白，使用預載入則可以減少等待的時間，擁有更好的體驗。

前端容災

指因為各種原因後端介面無法提供資料（如介面出錯，依賴庫出現問題，流量高峰掛了，斷電斷網等），前端依然能保證頁面資訊的正常展示。

主要方式是提前將資料儲存在可靠的地方，在需要時能夠高效便捷地獲取到資料展示。通常有：

Localstorage

將資料存到Localstorage,通常介面路徑作為key,返回資料作為value。若請求介面失敗, 就讀取L o c a l st orage ,將之前的資料取出來展示，並提示錯誤資訊，以緩衝時間。

CDN容災

除了 Localstorage同時也備份一份靜態資料到CDN,在介面請求和Localstorage都沒 有資料的情況下，從CDN獲取備份資料。

Service Worker

可以利用Service Worker離線儲存保個html頁面。

相關文章