js 優化方面

2021-07-27 15:58:24 字數 1259 閱讀 4430

一.在web開發中,通過dom 對瀏覽器進行操作,來實現js 與html 的互動,而dom的操作是非常昂貴的,因為這會導致瀏覽器執行回流 (reflow)操作。但我們不可避免進行dom操作,所以選擇盡可能的減少dom操作來進行優化。 

回流(是指瀏覽器為了重新渲染部分或者全部的文件而重新計算文件中元素的位置和幾何構造的過程。)所以通過操作引起元素位置的改變就會引起回流。

導致回流產生的情況:

使用者的操作,比如改變瀏覽器大小,改變瀏覽器的字型大小等

當你移動 dom 的位置,或做動畫的時候。

對dom節點進行增刪或者更改內容時。

當你修改 css 樣式導致元素位置發生改變。注:更改background-color;color; 不會引起回流

當你修改網頁的預設字型時。

動態設定樣式等

解決方法:

1.dom 不適合table布局,不宜使用。

2.離線對dom 進行操作,修改完後再上線

2.2 通過display:none ,可以任意修改,之後再顯示出來。         引發回流重繪兩次

2.3使用documentfragment或div等元素進行快取操作,先把所有要新增到元素新增到1個div(這個div也是新加的),

3.修改css 樣式時盡量採用建立類,classname裡預先定義好樣式,如果是動態改變, 應該一次寫完(csstext);

4.因為回流是自上而下的,所以下不及上,我們在最後面修改資訊對全域性影響越少。

(回流必將引起重繪,而重繪不一定會引起回流。乙個元素的回流導致了其所有子元素以及dom中緊隨其後的祖先元素的隨後的回流.)

二.字串的拼接 += 的效率低 ,建立乙個陣列 最後用 arr.join('')返回。

三.for迴圈中 先快取陣列,再放入區域性變數中,可以減少計算機查詢長度 for(i=0;len = x.length,i四.區域性變數的訪問要比全域性變數快

五.盡量作用json格式來建立物件,而不是var obj=new object()方法

六.迴圈很多次時,用setinterval() , 少用settimeout(),這是因為settimeout()每次執行都重新建立乙個定時器.

七.對於大的js物件,因為建立時時間和空間的開銷都比較大,因此應該盡量考慮採用快取。

八.優化js 檔案 把不影響的js 放入乙個檔案中,減少請求。

九.壓縮js 檔案

十.減少頁面重繪 ,通過建立陣列,來儲存,最後把陣列新增到頁面上去。雖然看起來寫的多了,但效能提公升許多。

js 優化方面

一.在web開發中,通過dom 對瀏覽器進行操作,來實現js 與html 的互動,而dom的操作是非常昂貴的,因為這會導致瀏覽器執行回流 reflow 操作。但我們不可避免進行dom操作,所以選擇盡可能的減少dom操作來進行優化。回流 是指瀏覽器為了重新渲染部分或者全部的文件而重新計算文件中元素的位...

面試6 優化方面

快 使用時避免出現卡頓,響應速度快,減少使用者等待的時間,滿足使用者期望。穩 減低 crash 率和 anr 率,不要在使用者使用過程中崩潰和無響應。省 節省流量和耗電,減少使用者使用成本,避免使用時導致手機發燙。小 安裝包小可以降低使用者的安裝成本。主要優化方面從上面幾點入手 1.卡頓 ui 就是...

unity 記憶體方面優化

作者寫的很好,看了他的書收穫很大。以下內容摘自 既然要聊unity3d執行時候的記憶體優化,那我們自然首先要知道unity3d遊戲引擎是如何分配記憶體的。大概可以分成三大部分 unity3d內部的記憶體 mono的託管記憶體 若干我們自己引入的dll或者第三方dll所需要的記憶體。第3類不是我們關注...