javascript提高效能方式之減少dom元素訪問次數
訪問dom元素是非常耗費資源的,修改dom元素更是如此,因為修改dom元素會使瀏覽器重新計算頁面的相關變化,所以減少dom元素的訪問和修改次數,能夠有效的提高javascript的效能,下面就是一個簡單的例子,希望能夠給大家帶來一定的起始。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼function done(){ for(var count=0;count<1000;count++){ document.getElementById('thediv').innerHTML+='螞蟻部落'; } }
以上程式碼訪問1000此dom元素並且修改1000次dom元素,那麼效能將會被極大的影響。
一個提高效能的好的方式就是首先將要修改的結構放入一個區域性變數,最後再修改dom元素。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼function done(){ var content=""; for(var count=0;count<1000;count++){ content+="螞蟻部"; } document.getElementById("thediv").innerHTML+=content; }
相關文章
- 高效的SQL語句有助於減少資料庫的訪問次數SQL資料庫
- Java Web效能優化之一:減少DAO層的呼叫次數JavaWeb優化
- 大幅減少訓練迭代次數,提高泛化能力:IBM提出「新版Dropout」IBM
- 設法減少表掃描次數(luise)UI
- 提高網站訪問效能之Tomcat優化網站Tomcat優化
- JavaScript 拷貝dom元素JavaScript
- 前端巧用localStorage做“快取”,減少HTTP請求次數前端快取HTTP
- 訪問控制之9種元素
- js儘量減少程式碼重複執行的次數JS
- 【面試必備】javascript操作DOM元素面試JavaScript
- 通過減少動態派送提升效能
- 快速冪演算法(二分思想減少連乘次數)演算法
- JavaScript 操作DOM效能優化JavaScript優化
- JavaScript資料訪問效能優化方案JavaScript優化
- 成功的專案管理策略:減少成本,提高質量專案管理
- JavaScript 之 DOM [ Document物件 ]JavaScript物件
- JavaScript之DOM查詢JavaScript
- JavaScript複製dom元素簡單介紹JavaScript
- 7中方式來減少webpack bundle體積Web
- 瀏覽器渲染原理(效能優化之如何減少重排和重繪)瀏覽器優化
- 高效能Javascript:高效的資料訪問JavaScript
- 通過減少記憶體使用改善.NET效能記憶體
- 滑鼠懸浮元素上下滑動增加或者減少高度效果
- javascript訪問物件屬性方式簡單介紹JavaScript物件
- LVM管理之減少LV的大小LVM
- Withings:2020年全球人們走路的次數減少 但體重卻減輕了
- 高效能JavaScript DOM程式設計JavaScript程式設計
- JavaScript DOM元素長寬等比例縮放JavaScript
- 原生javascript獲取dom元素簡單介紹JavaScript
- javascript DOM元素節點操作簡單介紹JavaScript
- Oracle資料庫減少redo日誌產生方式Oracle資料庫
- JavaScript 複習之DOM 概述JavaScript
- 【JavaScript】DOM之樣式操作JavaScript
- JavaScript基礎之DOM操作JavaScript
- javascript之DOM技術(二)JavaScript
- 獲取或操作DOM元素特性的幾種方式
- eDigitalResearch:手機使用者線下購物的次數日趨減少Git
- 提高首頁訪問速度 and 記錄一次Nuxt天坑UX