Vic*_*ira 4 html javascript performance jquery dom
在性能方面，DOM 树中有 20 个元素（及其子元素）还是存储在 Javascript 对象中的所有元素更好？
情况1：
<html>
<body>
<div id='el1'>
<span>...</span>
...
</div>
<div id='el2'>
<p>...</p>
...
</div>
<div id='el3'>
<img src="" alt="" />
<br/>
</div>
<div id='el4'>
<section></section>
...
</div>
...
</body>
</html>
案例2：
var OBJ = {};
OBJ.el1 = $("<div id='el1'><span>...</span>...</div>");
OBJ.el2 = $("<div id='el1'><p>...</p>...</div>");
OBJ.el3 = $("<div id='el1'><img src="" alt="" /><br/>...</div>");
OBJ.el4 = $("<div id='el1'><section></section>...</div>");
....
我的应用程序应该一次只显示这些元素之一。如果我只是将它们留在 DOM 树中并更改它们的样式，它会表现得更好，还是最好将它们存储在 Javascript 对象中并在需要时删除和附加它们？
我怎么能测试呢？
@edit 要考虑的额外信息：
1- 所有元素都写在 HTML 文档中，然后在页面加载时删除并存储在 javascript 对象中。
2- 每次活动元素更改时，我都会通过删除当前活动元素然后将新元素附加到它来更改 DOM 结构。
@EDIT 2：经过一些测试
这个想法是：有人将 HTML 元素写入 DOM，然后 Javascript 必须一次只显示/隐藏这些元素中的一个。这些元素都有自己的子元素。它可能是一个整页网站或一个 Web 应用程序。
我创建了 2 个测试用例：
1- 元素将被删除，然后通过 Javascript 多次重新附加。所以它们将被存储在一个 Javascript 对象中，直到它被调用
2- 元素将在 DOM 中，我将在需要时隐藏和显示它们（jQuery 函数，但进一步的测试将直接更改 CSS）。
<html>
<head>
<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
</head>
<body>
<!-- I USED 15 ELEMENTS IN MY TEST, BUT THE CODE IS TOO LONG -->
<script>
var OBJ1 = {};
var OBJ2 = new Array();
var ACTIVE;
var BODY = $(document.body);
var T1, T2, DELTA;
$(function(){
T1 = new Date().getTime();
/*
//TEST 1: Javascript
var _this,id;
$('div').each(function(){
_this = $(this);
id = _this.attr('id');
OBJ1[id] = _this;
_this.remove();
});
var c;
for (var i = 0; i < 10000; i++) {
for(var k in OBJ1){
c = OBJ1[k];
if(ACTIVE) ACTIVE.remove();
BODY.append(c);
ACTIVE = c;
}
}*/
//TEST 2: DOM
var _this,id;
$('div').each(function(){
_this = $(this);
id = _this.attr('id');
OBJ2.push(id);
});
var c;
for (var i = 0; i < 10000; i++) {
for(var k=0,l=OBJ2.length;k<l;k++){
c = $('#'+OBJ2[k]);
if(ACTIVE) ACTIVE.hide();
c.show();
ACTIVE = c;
}
}
T2 = new Date().getTime();
DELTA = T2 - T1;
console.log('It took '+DELTA+' milliseconds');
});
</script>
</body>
我用一些 Lorem Ipsum 和 Lorem Pixel 内容创建了 5 个通用元素，并将它们复制/粘贴了 3 次，制作了 15 个第一级元素。
1000 次我隐藏和揭示了 15 个元素中的每一个。每次测试 3 次。
案例 1 （迄今为止的赢家）：5.2s、4.75s、4.85s
情况 2：21.5 秒、21.5 秒、20 秒
@edit 3：更改案例 2 方法
将第二种情况从hide()/更改show()为css()可以大大提高性能。
//TEST 2: DOM
var _this,id;
$('div').each(function(){
_this = $(this);
_this.css('display','none');
id = _this.attr('id');
OBJ2.push(id);
});
var c;
for (var i = 0; i < 15000; i++) {
for(var k=0,l=OBJ2.length;k<l;k++){
c = $('#'+OBJ2[k]);
if(ACTIVE) ACTIVE.css('display','none');
c.css('display','block');
ACTIVE = c;
}
}
还将循环增加到 15k。
案例 1：大约 6.5s
案例2：大约2.5s
一定要把它留在 DOM 树中。我只会使用显示/隐藏方法来显示您想要的方法。
如果有一个动态变化的值应该反映在元素中，我只会使用 JS 方法，但如果它们都是静态的，那么更改 DOM 树对性能的影响要大得多，而不仅仅是更改 CSS 样式。
您可以通过编写两者来测试这一点，然后使用 jsperf 进行比较。