前端開發效能優化方案

2021-10-07 16:59:20 字數 2693 閱讀 7630

減少http請求次數和請求大小

**優化

->有利於seo

->有利於擴充套件維護

->有利於減少效能消耗

dns及http通訊方式的優化

以下是上面三個方面的擴充套件:

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

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

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

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

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

4.減少對dom的操作(主要是減少dom的重繪(結構變化重繪dom樹)和回流(重排)(元素變化重排reder樹))

a:關於重排的分離讀寫(瀏覽器預設操作,所以盡可能把設定都寫在一起)

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

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

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

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

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

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

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

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

9.儘量減少css表示式的使用(expression很老的技術了)

mydiv

10.css選擇器解析規則是從右向左解析

.container.link a

先找到所有的a,再篩選是在.link樣式類中的,再次篩選在.container樣式類中的…先找到的是所有的a,操作起來是消耗效能的,我們在使用css選擇器的時候盡可能減少對標籤選擇器的使用

11.css雪碧圖技術(css sprite/css精靈)把所有相對較小資源彙總到一張大圖上,後期我們只需要把大圖載入下來,用背景定位的方式展示對應的小圖即可

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

13.頁面中的資料獲取採用非同步程式設計和延遲分批載入使用非同步獲取資料,是為了降低http通道的堵塞,不會因為資料沒有請求回來耽誤下面資訊的渲染

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

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

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

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

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

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

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

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

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

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

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

26.基於script調取js的時候,可已使用defer或者async來非同步載入

重量級優化:做cdn加速(強大,但燒錢)

基於單個檔案做cdn比較便宜

=額外技巧=

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

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

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

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

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

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

1.在js中儘量減少閉包的使用 原因 閉包會產生不釋放的棧記憶體 a 迴圈給元素做事件繫結的時候,盡可能的把後期需要的資訊 例如索引 儲存到元素的自定義屬性上,而不是建立閉包儲存 b 可以在最外層形成乙個閉包,把一些後續需要的公共資訊進行儲存,而不是每乙個方法都建立閉包 例如單例模式 c 盡可能的手...

Android開發效能優化

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

web開發效能優化

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