前端效能優化(四)——網頁載入更快的N種方式

前端人 發表於 2021-09-02
前端

網站前端的使用者體驗,決定了使用者是否想要繼續使用網站以及網站的其他功能,網站的使用者體驗佳,可留住更多的使用者。除此之外,前端優化得好,還可以為企業節約成本。那麼我們應該如何對我們前端的頁面進行效能優化呢?

前端效能優化可以分為三個方面:介面訪問優化、靜態資源優化和頁面渲染速度優化。

一、介面訪問優化

1.1、減少http請求,合理設定 HTTP快取

http協議是無狀態的應用層協議,每次傳送http請求時,都需要建立連線、通訊、斷開連線,在伺服器端每個http都需要開啟獨立的執行緒去處理。所以儘量減少http請求,儘可能地提高訪問效能。

減少http請求的方法:

  1. 合併 js、css、圖片等檔案,合併成一個檔案,瀏覽器就只需請求一次就可以了。圖片合併要適當,不能想著優化呢,盲目地都合併成一張圖片。
  2. 借用瀏覽器快取。恰當的快取設定可以大大減少http請求。不懂瀏覽器快取的可參考《瀏覽器九大快取方法》
  3. 介面合併。前端互動,經常需要請求多個並行或序列介面,此時可以通過介面合併方式,提高介面訪問速度。
  4. 能使用css的儘量不使用js,能使用js的儘量不用三方外掛,避免三方外掛大量的庫。

1.2、減少cookie傳輸

cookie 存在於 http 頭,在客戶端與伺服器之間交換,儘可能地控制 cookie 的大小,cookie越小,響應速度越快,減少 cookie 傳輸,響應速度更快。

1.3、使用CDN提供靜態檔案

使用 CDN 可以更快地在全球範圍內獲取到你的靜態檔案,加快網頁載入。

1.4、啟用 GZIP 壓縮

http 協議上 GZIP 編碼,是一種用來改進 web 應用程式的。開啟 GZIP 後,伺服器會把網頁內容壓縮後傳輸,一般能壓縮到原大小40%,這樣網頁傳輸速度就更快了。GZIP 有兩大好處:一是減少儲存空間,二是通過網路傳輸檔案時,可以減少傳輸時間。

1.5、分域存放資源

HTTP 客戶端一般對同一個伺服器的併發連線個數都是有限制的,通常最大並行連線為四了,剩下的會進入等待佇列,等前邊的執行完畢,等待的才會執行。所以利用多域名主機存放資源,增加並行連線量,縮短資源載入時間。

1.6、減少頁面重定向

開啟 https 可以有效防範攻擊,保證使用者始終訪問到網站的加密連線,保護資料安全,同時省去 301/302 跳轉的時間,大大提升網站的安全係數和使用者體驗。

如果在網站設定當使用者訪問域名的時候強制 https 進行 301 或者 302 跳轉,但是這個過程中,用到 HTTP 因此容易發生劫持,受到第三方的攻擊。所以儘可能使用https安全。

1.7、避免使用iframe

iframe 相當於本頁面又巢狀了一個頁面,消耗效能,還要載入巢狀頁面的資源,所以更消耗時間。

1.8、借用瀏覽器快取

ajax 請求到的資料,可以快取到瀏覽器,下次使用的時候無需再次獲取,直接取快取資料就可以。這個會根據具體的專案來做,比如常用的角色型別就會快取,獲取到的普通資料為了保證實時性,不能使用快取。

二、靜態資源優化

2.1、壓縮 html、css、js 等檔案

刪除不必要的空格、註釋和中行,減少檔案大小,顯著減少使用者下載時間,加快網頁載入速度。可以直接使用壓縮工具,可以自動刪除所有不必要內容。

2.2、在 js 之前引用 css

這是一個小細節,js 執行的時候會進入阻塞,如果放入 js 之後載入,會等待 js 執行完成之後才能載入 css,渲染頁面,此時就會出現佈局錯亂。所以 css 檔案需要非阻塞引入,以防DOM 花費更多時間才能渲染。

2.3、非阻塞 js

js 會阻止 html 文件的正常解析,當解析器到達 script 標記時,它會停止解析並執行指令碼。所以我們經常把 script 引入的 js,放到 html 中最底下。如果需要讓指令碼位於頁面頂部,建議新增非阻塞屬性。經常使用 defer 和 async 來非同步載入js檔案。

<!--  使用defer  -->
<script defer src="foo.js" ></script>
<!--   使用async  -->
<script async src="foo.js"></script>

2.4、圖片壓縮

最常見的就是 css 雪碧,就是將很多很多的小圖示放在一張圖片上,就稱為雪碧圖。雪碧圖最大優點就是可以減少http請求,除此也能壓縮圖片檔案大小。使用的時候,通過設定 background-position ,移動圖片的位置。除此之外,網站用到的大圖,也需要在保證圖片質量前提下優化到最小。

2.5、向量圖替代點陣圖

向量圖(SVG)往往比影像小很多,縮放的時候不失真,這些影像還可以通過 css 進行動畫和修改,比點陣圖方便控制。可以的話,儘量用向量圖多點。

2.6、js程式碼相關優化

  1. 儘量減少使用閉包,因為閉包所在的上下文不會被釋放。
  2. js避免巢狀迴圈和死迴圈,一旦遇到死迴圈,瀏覽器會卡死。
  3. 在js封裝過程中,儘量做到低耦合高內聚。減少頁面的冗餘程式碼。
  4. 儘量減少遞迴,避免死遞迴。
  5. 儘量使用window.requestAnimationFrame替代傳統的定時器。

三、頁面渲染速度

3.1、懶載入

素材類的網站,頁面一屏展示很多圖片,而且圖片還不能失真,圖片載入太多,網頁載入慢得很,所以就引用懶載入,只載入可視區的圖片,避免載入可以能不需要或不必要的影像。改善頁面的響應時間。

3.2、避免響應式佈局

響應式網站雖然能夠相容所有終端裝置,但是會出現隱藏部分無用內容,浪費頻寬,載入時間還長,頁面的渲染時間也長。想更多瞭解響應式佈局,請點選《前端響應式佈局為什麼是個坑?》

3.3、設定大小,避免重繪

遇到 img 標籤,會立馬傳送一個 http 請求,下載圖片,頁面繼續向下渲染,等圖片載入成功了,發現圖片的寬高大小發生變化,影響後邊排版,所以頁面會重新再繪製一次這部分。所以儘可能設定圖片的大小。

3.4、減少DOM元素

解析 html 內容,將標籤轉化為DOM節點,之後再解析其他檔案,DOM元素越少,也就是標籤越少,檔案轉化得越快,載入速度也就快了。

3.5、減少 Flash 的使用

flash 檔案比較大,載入起來耗時。除此,flash 外掛還需要執行才能執行,最主要有些瀏覽器flash外掛馬上要下線了,建議儘量不用 flash。

3.6、檔案順序

css檔案放在最頂部,優先渲染。js放在最底部,避免阻塞。

讓網頁如何載入更快,有好多的細節,還是要好好提升自己的技能~~~~~~~~~


點個關注!更多分享內容。