前端開發效能優化方案大總結

2021-10-01 23:51:58 字數 2697 閱讀 4109

1.在js中儘量減少閉包的使用(原因:閉包會產生不釋放的棧記憶體)

a:迴圈給元素做事件繫結的時候,盡可能的把後期需要的資訊(例如索引)儲存到元素的自定義屬性上,而不是建立閉包儲存

b:可以在最外層形成乙個閉包,把一些後續需要的公共資訊進行儲存,而不是每乙個方法都建立閉包(例如單例模式)

c:盡可能的手動釋放不被占用的記憶體

…2.盡量合併css和js檔案(把需要引入的css合併為乙個,js也是合併為乙個),原理是在減少http請求次數,盡可能的把合併後的**進行壓縮,減小http請求資源的大小

3.盡量使用字型圖示或者svg圖示,來代替傳統的png等格式的(因為字型圖示等是向量圖(基於**編寫出來的),放大不會變形,而且渲染速度快,相對比位圖要小一些)

4.減少對dom的操作(主要是減少dom的重繪和回流(重排))

a:關於重排的分離讀寫,(指的是修改dom和查詢dom等等相同的dom操作不要交叉使用,而是分開各自一起使用,因為瀏覽器的預設行為裡會識別下一條**是否是相同的dom操作,等不是同一類操作了,再一起執行同一類**,提高執行效率)

b:使用文件碎片或者字串拼接做資料繫結(dom的動態建立)

5.在js中避免「巢狀迴圈」(這種會額外增加很多迴圈次數)和「死迴圈」(一旦遇到死迴圈瀏覽器就卡殼了)

6.採用的「懶載入」(延遲載入)

目的是為了減少頁面「第一次載入」過程中http的請求次數,讓頁面開啟速度變快

步驟:開始載入頁面的時候,所有的真實都不去傳送http請求載入,而是給一張佔位的背景圖,當頁面載入完,並且在可視區域內我們再去做載入

7.利用瀏覽器和伺服器端的快取技術(304快取),把一些不經常更新的靜態資源檔案做快取處理(例如:js、css、靜態等都可以做快取)

原理是為了減少http請求大小,讓獲取速度更快

8.盡可能使用事件委託(事件**)來處理事件繫結的操作,減少dom的頻繁操作,其中包括給每乙個dom元素做事件繫結

9.儘量減少css表示式的使用(expression)

#mydiv
10.css選擇器解析規則是從右向左解析
.container .link a
11.css雪碧圖技術(css sprite / css 精靈)

把所有相對較小資源彙總到一張大圖上,後期我們只需要把大圖載入下來,用背景定位的方式展示對應的小圖即可

.bg

.box1

.box2

13.減少對於cookie的使用(最主要的是減少本地cookie儲存內容的大小),因為客戶端操作cookie的時候,這些資訊總是在客戶端和伺服器端傳來傳去

14.頁面中的資料獲取採用非同步程式設計和延遲分批載入

使用非同步獲取資料,是為了降低http通道的堵塞,不會因為資料沒有請求回來耽誤下面資訊的渲染,提高頁面的開啟速度(我們可以這樣處理:需要動態繫結資料的區域先隱藏,等資料返回並且繫結完成後在讓其顯示)

延遲分批載入類似於懶載入,是為了減少第一次頁面載入時候的http請求次數

16.在客戶端和伺服器端進行資訊互動的時候,對於多項資料我們盡可能基於json格式來進行傳送(json格式的資料處理方便,資源偏小) ==>相對於xml格式的傳輸才會有這個優勢

17.盡可能實現js的封裝(低耦合高內聚),減少頁面中的冗餘**(減少http請求資源的大小)

20.css中設定定位後,最好使用z-index改變盒子的層級,讓所有的盒子不在相同的平面上,這樣後續處理的時候,效能有那麼一丟丟的提高

21.在基於ajax的get請求進行資料互動的時候,根據需求可以讓其產生快取(這個快取不是304快取),這樣下一次從相同位址獲取的資料是上一次快取的資料(但是很少用,專案中一般刻意清除這個快取的時候偏多)

22.儘量減少對於filter濾鏡屬性的使用(這個屬性消耗效能較大一些)

23.在css匯入的時候儘量減少使用@import匯入式,因為@import是同步操作,只有把這個對應的css匯入,才會向下載入,而link是非同步操作

24.配置etag(有點類似於304快取)

25.使用window.requestanimationframe(js中的幀動畫)代替傳統的定時器動畫

26.減少遞迴的使用,避免死遞迴,避免由於遞迴導致的棧記憶體巢狀(建議使用尾遞迴)

27.避免使用iframe(不僅不好管控樣式,而且相當於在a頁面中載入了其它頁面,消耗較大)

28.利用h5中提供的localstorage本地儲存或者是manifest離線快取,做一些資訊的本地儲存,下一次載入頁面的時候直接從本地獲取,減少http請求次數

29.基於script調取js的時候,可已使用 defer或者async 來非同步載入=額外技巧=

1.我們一般都把css放到body上,把js放到body下面(原因:讓其先載入css在載入js,先載入css是為了保證頁面渲染的過程中,元素是帶著樣式渲染的,而js一般都是用來操作dom元素的,需要等到元素載入完再操作)

3.js中儘量減少對eval的使用,因為js合併壓縮的時候,可能出現由於符號不完善,導致的**執行優先順序錯亂問題,eval處理起來消耗的效能也是偏大一點的

4.使用keep-alive實現客戶端和伺服器端的長連線

5.盡量使用設計模式來管理我們的**(單例、構造、promise、發布訂閱),方便後期的公升級和維護

6.開啟伺服器端的gzip壓縮(這個壓縮可以有效減少請求資源檔案的大小),其實客戶端的等資源也是可以進行壓縮的(但是對於24位的點陣圖,壓縮後可能會變模糊)

8.避免使用with語句(非常耗效能)

前端開發效能優化方案

減少http請求次數和請求大小 優化 有利於seo 有利於擴充套件維護 有利於減少效能消耗 dns及http通訊方式的優化 以下是上面三個方面的擴充套件 1.在js中儘量減少閉包的使用 原因 閉包會產生不釋放的棧記憶體 a 迴圈給元素做事件繫結的時候,盡可能的把後期需要的資訊 例如索引 儲存到元素的...

Android開發效能優化

1 盡量不適用靜態引用,以避免記憶體溢位 2 對進行壓縮 3 listview的優化 4 自定義view中減少measure layout draw 中的耗時操作即它們執行次數 5 不在ui執行緒總做耗時操作,網路請求 資料庫操作 複雜計算等放在子執行緒 6 webview退出時手動銷毀 方法未知 ...

web開發效能優化

1 查詢出的資料量過大 可以採用多次查詢,其他的方法降低資料量 盡量採取分頁查詢資料 2 鎖或者死鎖 這也是查詢慢最常見的問題,是程式設計的缺陷 3 返回了不必要的行和列 用or的字句可以分解成多個查詢,並且通過union鏈結多個查詢。它們的速度只與是否使用索引有關,如果查詢需要用到聯合索引,用un...