javascript - DOM 中的元素或 Javascript 对象中的元素哪个对性能更好？-6ren

javascript - DOM 中的元素或 Javascript 对象中的元素哪个对性能更好？

转载作者：搜寻专家更新时间：2023-10-31 23:24:51

25

4

就性能而言，在 DOM 树中有 20 个元素(及其子元素)还是在 Javascript 对象中存储所有元素更好？

案例一:

<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>

案例二:

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 必须一次只显示/隐藏这些元素之一。这些元素有自己的 child 。它可以是整页网站或 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 个一级元素。

我隐藏和显示 15 种元素中的每一种元素 1000 次。每次运行测试 3 次。

案例 1 (迄今为止获胜者):5.2 秒、4.75 秒、4.85 秒

案例2:21.5s、21.5s、20s

@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.5 秒

案例 2:大约 2.5 秒

最佳答案

肯定留在DOM树中。我只会使用显示/隐藏方法来显示您想要的方法。

如果有一个应该反射(reflect)在元素中的动态变化值，我只会使用 JS 方法，但如果它们都是静态的，则更改 DOM 树的性能要高得多，而不仅仅是 CSS 样式更改。

您可以通过编写两者来测试这一点，然后使用 jsperf 进行比较。

关于javascript - DOM 中的元素或 Javascript 对象中的元素哪个对性能更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33051724/

25

4

0

文章推荐： node.js - 有没有办法告诉是什么让 node.js 程序保持活力？

文章推荐： php - 掌握基础知识的简单面向对象练习

文章推荐： node.js - GruntJS 递归 globbing 区别

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

javascript - DOM 中的元素或 Javascript 对象中的元素哪个对性能更好？