动态修改dom node的两种方法性能比较
生活随笔
收集整理的這篇文章主要介紹了
动态修改dom node的两种方法性能比较
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Created by Jerry Wang, last modified on Sep 25, 2014
測試代碼:
<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在每一次循環里都會修改一次dom node，而方法2只有在循環結束后才進行唯一的一次dom node修改。
在動態插入子node p的個數很小的情況下，兩種方法性能相差無幾。
插入100個節點:
當個數增加到1000個時:
個數10000個時:
總結
以上是生活随笔為你收集整理的动态修改dom node的两种方法性能比较的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全球电视出货量十年新低 中国市场表现亮眼
- 下一篇： 利用memory comparison分