DOM中的元素和Javascript对象中的元素哪个性能更好？
就性能而言，在DOM树中有20个元素（及其子元素）还是所有元素都存储在Javascript对象中更好 案例1：DOM中的元素和Javascript对象中的元素哪个性能更好？,javascript,jquery,html,performance,dom,Javascript,Jquery,Html,Performance,Dom,就性能而言，在DOM树中有20个元素（及其子元素）还是所有元素都存储在Javascript对象中更好 案例1： <html> <body> <div id='el1'> <span>...</span> ... </div> <div id='el2'> <
<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：大约2.5s肯定会将其保留在DOM树中。我只需要使用show/hide方法来显示您想要的方法 我只会在元素中反映动态变化值的情况下使用JS方法，但如果它们都是静态的，则更改DOM树比更改CSS样式更需要性能
您可以通过编写两者，然后使用jsperf进行比较来测试这一点。Javascript是一种速度非常快的语言，但是DOM是一个巨大的瓶颈。因此，将数据保存在Javascript对象中会快得多，但您必须自己将活动元素呈现给DOM（而不仅仅是使其可见）
我不担心DOM对于几十个元素来说速度太慢，但是如果你有很多元素或者试图对它们执行计算/过滤，一定要使用Javascript。我认为你可能想要应用延迟渲染的唯一DOM元素是那些需要像图像、音频、视频等媒体内容的元素，搜索一个惰性加载js库，当您显示该元素时，该库将加载该元素的内容。您也可以将元素加载到页面中并隐藏，但如果媒体元素太多，可能会导致内存使用不当
最后，您可以使用React.js进行此操作，因为它的主要工作是以友好方式呈现两个dom树之间的差异，这可能会在呈现相同dom元素但内容略有不同的场景中提供一些很大的改进。您可能知道这一点，是否有任何理由决定对此使用完整的vainilla.js？“但是您必须自己将活动元素呈现到DOM中（而不仅仅是使其可见）。”您的意思是什么？你的意思是删除以前的活动元素，然后添加新的活动元素？你是否仍然认为Javascript更快，即使考虑到：1-所有元素都写在HTML文档中，然后在加载页面时删除并存储在Javascript对象中。2-每次活动元素更改时，我都会更改DOM结构，正如您所建议的，方法是删除当前活动元素，然后附加新元素。噢，如果您首先将所有元素加载到DOM中，将其转换，然后根据需要重新附加它们，这是个坏主意。例如，我会将数据格式化为JSON，并将其添加为页面上某个元素的
data-imgcss（'display'）show（）hide（）css（）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>");
....
<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>
//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;
}
}