动态修改dom node的两种方法性能比较
生活随笔
收集整理的這篇文章主要介紹了
动态修改dom node的两种方法性能比较
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Created by Jerry Wang, last modified on Sep 25, 2014
測(cè)試代碼:
<html> <script src="C:\Users\i042416\Desktop\jquery_1.7.1.js"> </script> <script>function insert1(number) {var parent = $("#way1");for( var i = 0 ; i < number; i++) {parent.append("<p>hh</p>");}}function insert2(number) {var parent = $("#way2");var content = "<div>way2";while(number--) {content += "<p>hh</p>";}content += "</div>";parent.html(content);}$(document).ready(function() {console.time("way1");insert1(1);console.timeEnd("way1");console.time("way2");insert2(1);console.timeEnd("way2");}); </script> <body><div id = "way1">way1</div><div id = "way2">way2</div> </body> </html>方法1在每一次循環(huán)里都會(huì)修改一次dom node，而方法2只有在循環(huán)結(jié)束后才進(jìn)行唯一的一次dom node修改。
在動(dòng)態(tài)插入子node p的個(gè)數(shù)很小的情況下，兩種方法性能相差無(wú)幾。
插入100個(gè)節(jié)點(diǎn):
當(dāng)個(gè)數(shù)增加到1000個(gè)時(shí):
個(gè)數(shù)10000個(gè)時(shí):
總結(jié)
以上是生活随笔為你收集整理的动态修改dom node的两种方法性能比较的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 全球电视出货量十年新低 中国市场表现亮眼
- 下一篇： 2023季中冠军赛开启全新赛制：引入两轮