前端效能優化

2022-07-30 10:36:14 字數 1751 閱讀 8607

一、減少請求資源的大小或者次數。

1.盡量合併和壓縮js與css檔案。(將css,js合併成乙個檔案)

原因:主要是為了減少請求次數,以及減少請求資源的大小。

工具:webpack,gulp等...

2.盡量使用字型圖示或者svg圖示來代替png。

原因:因為字型圖示或者svg圖示是向量圖,是**編寫出來的,放大不會變形。而且渲染速度會很快。

3.採用的懶載入模式(延遲載入)

目的:為了減少頁面第一次載入過程中http的請求次數。

步驟:(1)頁面開始載入時不去傳送http請求,而是放置一張佔位圖。

(2)當頁面載入完時,並且在可視區域再去請求載入資訊。

4.盡量動態效果盡量使用css,用到必要js時,避免使用較大的第三方外掛程式。

5.使用雪碧圖或者精靈圖。

6.減少對cookie的使用。(主要是減少本地cookie儲存內容的大小),因為客戶端操作cookie的時候這些資訊總是在客戶端和服務端傳遞。如果設定不當,每次傳送請求將會攜帶cookie

7.前端與後端進行資料互動時,對於多項資料盡可能基於json格式來進行傳遞。相對於使用xml來說傳輸有這個優勢。

目的:是資料處理方便,資源偏小。

8.前端與後端協商,合理使用keep-alive

9.前端與伺服器協商,使用響應資源的壓縮。

10.避免使用iframe。不僅不好管控樣式,而且相當於在本頁面又巢狀其他頁面。消耗效能會更大。

11.在基於ajax的get請求進行資料互動的時候,根據需求可以讓其產生快取。

二、**優化相關

1.在js中儘量減少閉包的使用。

原因:使用閉包後,閉包所在的上下文不會被釋放。

2.減少對dom的操作,主要是減少dom的重繪與回流(重排)

關於重排(回流)的分離讀寫:如果需要設定多個樣式,把設定樣式全部放在一起設定,不要一條一條的設定,使用文件碎片或者字串拼接做資料繫結(dom的動態建立)

3.在js中避免巢狀迴圈和『死迴圈』(遞迴要有結束條件,不然造成瀏覽器直接卡死)

4.減少css表示式的使用。

5.js封裝過程中,盡量做到低耦合高內聚。減少頁面的冗餘**。

6.使用window.requestanimationframe(js的幀動畫)代替傳統的定時器動畫,使用定時器盡量使用settimeout避免使用setinterval定時器。因為setinterval存在弊端:可能造成兩個動畫時間間隔縮短。

7.儘量減少使用遞迴。避免死遞迴。建議使用尾遞迴。

8.在事件繫結中,盡可能使用事件委託,減少迴圈給dom元素繫結事件處理函式。

9.減少flash的使用。

三.儲存

1.結合後端,利用瀏覽器的快取技術,做一些快取(讓後端返回304,告訴瀏覽器去本地拉取資料。)(注意:也有弊端)可以讓一些不太會改變的靜態資源做快取。比如:js,cs

2.利用h5的新特性,(localstorage,sessionstorage)做一些簡單的資料儲存,避免想後端請求資料或者說在離線轉態下做一些資料展示。

四.其他優化

1.頁面中的資料採用非同步程式設計和延時分批載入,使用非同步載入資料主要是為了避免瀏覽器造成阻塞失去響應。如果使用同步頁面速度會載入很慢。

那麼頁面會在一段時間內處於阻塞狀態。目的:為了解決請求資料不耽擱渲染,提高頁面的渲染效率。解決方法:需要動態繫結的是資料區域先隱藏。等資料放回並且繫結後在讓其顯示延遲分批載入類似懶載入。減少第一次見面載入時候的http請求次數。

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...