如何提高Dom訪問速度
在瀏覽器中對于Dom的操作和普通的腳本的操作處于兩個不同的dll中，兩個dll的交互是比較耗時的，優(yōu)化對Dom的操作可以提高腳本的執(zhí)行速度。下面是對如何優(yōu)化的一些總結：
將需要多次操作的節(jié)點存儲在一個變量中，避免多次獲取。
對于大多數(shù)瀏覽器來說innerHTML操作比Dom操作速度要快，最新的瀏覽器則相反，但對于大多數(shù)日常操作來說具體差異并不大，另外，如果需要新創(chuàng)建的html片段中的腳本能夠執(zhí)行則需要使用Dom操作。
不建議用數(shù)組的 length 屬性做循環(huán)判斷條件。訪問集合的 length 比數(shù)組的length 還要慢。當每次迭代過程訪問集合的 length 屬性時，它導致集合器更新?？梢院唵蔚膶ength保存在一個變量中，也可以將集合先存儲在數(shù)組中。
遍歷 children 比 childNodes 更快，因為集合項更少。
重繪和重排版是負擔很重的操作，可能導致網(wǎng)頁應用的用戶界面失去相應。所以，十分有必要盡可能減少這類事情的發(fā)生。減少方法有三種，一：將需要影響的集合先隱藏，在處理完成后再展示；二：創(chuàng)建需操作節(jié)點的備份，對備份處理完成后替換原節(jié)點；三：創(chuàng)建節(jié)點群，對節(jié)點群操作完成后替換到原節(jié)點，最高效，操作方式如：
var fragment = document.createDocumentFragment();//創(chuàng)建節(jié)點群，文檔片段
appendDataToElement(fragment, data);//增加節(jié)點到節(jié)點群
document.getElementById('mylist').appendChild(fragment);//僅引發(fā)一次重新排版
另外對行內(nèi)樣式的操作可以通過document.getElementById("doc").style.cssText修改元素style屬性
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機圓與矩形功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
js如何構造elementUI樹狀菜單的數(shù)據(jù)結構詳解
由于業(yè)務需要，要求實現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺返回，下面這篇文章主要給大家介紹了關于js如何構造elementUI樹狀菜單的數(shù)據(jù)結構的相關資料,需要的朋友可以參考下2021-05-05
JSON 是 JavaScript 原生格式，這意味著 在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包,接下來由腳本之家小編給大家介紹在JavaScript中使用JSON數(shù)據(jù)的方法，感興趣的朋友一起學習吧2016-02-02
bootstrap開發(fā)標簽頁時，標簽頁顯示正常，但點擊時候?qū)獌?nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了上傳圖片js判斷圖片尺寸和格式并兼容IE,需要的朋友可以參考下2014-09-09
JavaScript動態(tài)改變表格單元格內(nèi)容的方法
這篇文章主要介紹了JavaScript動態(tài)改變表格單元格內(nèi)容的方法,涉及javascript操作html中table表格的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下2016-05-05
圖片懶加載，往往作為減少首頁白屏時間的一個解決方案而出現(xiàn)。本文將通過示例帶大家一起探究一下JavaScript是如何實現(xiàn)圖片懶加載的，感興趣的可以了解一下2022-06-06
在Electron開發(fā)過程中,每次代碼修改后需手動重新啟動應用,這一過程可以通過引入Nodemon工具自動化,Nodemon能夠監(jiān)測文件變化并自動重啟服務器,本文給大家介紹Electron 使用 Nodemon 配置自動重啟,感興趣的朋友一起看看吧2024-09-09
相信很多與頁面打過交道的同學都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10