JavaScript对DOM操作的若干优化

最新推荐文章于 2024-04-30 23:33:01 发布

置顶 GY_U_YG

最新推荐文章于 2024-04-30 23:33:01 发布

阅读量848

点赞数 1

分类专栏：前端文章标签： javascript dom 优化内存

本文链接：https://blog.csdn.net/GY_U_YG/article/details/72996997

版权

前端专栏收录该内容

61 篇文章 6 订阅

订阅专栏

很多人都认为JavaScript的效率太慢了，都不愿意用JavaScript来实现相对困难一点的程序逻辑。在这里我要说的是其实JavaScript的效率并不慢，慢的是DOM，如果操作好DOM，你的JS效率将提高接近千倍（这并不是什么夸张的数字）。

1. 批量增加Dom

尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小，速度更快，同时也更加内存安全.

有一点需要注意的是，用innerHTML方式添加时，一定不要在循环中使用 innerHTML += 的方式添加，这样反而会使速度减慢; 而是应该中间用array缓存起来，循环结束后调用 xx.innerHTML = array.join(”);的方式，或者至少保存到string中再插到innerHTML中.

针对用户列表一块采用这种方式优化后，加载速度提升一倍.

2. 单个增加Dom

这里是指要将新节点加载到一个内容不断变化的节点的情形，对于内容稳定的节点来说，随便怎么加都没有问题. 但是对于有动态内容的节点来说，为其添加子节点尽量使用 DOM append的方式.

这是因为，DOM append不会影响到其他的节点;而如果修改innerHTML属性的话，该父节点的所有子节点都会从DOM树中剥离，再根据新的innerHTML值来重绘子节点DOM树，所有注册到原来子节点的事件也会失效.
这点要特别注意，也就是说，本来子结点是有个事件的，你在父节点上搞个parentNode.innerHTML += ‘string’，那么本来有事件的那个子节点也就没有事件了。我们看看例子：

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #div1 {
                width: 500px;
                height: 500px;
                background: red;
            }
            #div2 {
                width: 400px;
                height: 400px;
                background: blue;
            }
            #div3 {
                width: 300px;
                height: 300px;
                background: orange;
            }
            #div4 {
                width: 220px;
                height: 220px;
                background: green;
            }
            li {
                list-style: none;
            }
            #innerUL li {
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
                    <div id="div4">
                        <ul id="myul">
                            <li>1111</li>
                            <li>2222</li>
                            <li>3333</li>
                            <li>4444</li>
                            <li id="li5">5555
                                <ul id="innerUL">
                                    <li>inner1</li>
                                    <li>inner2</li>
                                    <li>inner3</li>
                                    <li>inner4</li>
                                </ul>
                            </li>
                            <li>6666</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    <script type="text/javascript">
        var div1 = document.getElementById('div1');
        var div4 = document.getElementById('div4');

        div1.onclick = function(ev) {
            var oEvent = ev || event;
            var target = oEvent.target || oEvent.srcElement;
            alert(target.id || target.innerText);
        };

        div4.onclick = function() {alert('----i am div4 -----');};
    </script>

    </body>
</html>

本来，我点击div4，是会弹出’—-i am div4 —–’的：

这里写图片描述

现在我们打开控制台，把div4当做子节点，那么在div3（父节点）里来个如下操作：

这里写图片描述

点击子节点div4，再也弹不出’—-i am div4 —–’了。当然了，事件委托是不受影响的。

下面这么写也是不行的，即使事件绑定在后面也不行。

这里写图片描述

综上，如果在一个有动态内容的节点上出现了 innerHTML += ‘string’ 的代码，就该考虑是否有问题了.

3. 创建Dom节点

用 createElement方式创建一个dom节点,有一个很重要的细节: 在执行完createElement代码之后,应该马上append到dom树中，否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节，一旦遇到大量dom增删操作，就会引发内存的灾难.