JavaScript事件性能优化

最新推荐文章于 2022-07-14 17:14:17 发布

绿龙术士

最新推荐文章于 2022-07-14 17:14:17 发布

阅读量363

点赞数

分类专栏：前端技术文章标签： JavaScript 事件优化

本文链接：https://blog.csdn.net/xc917563264/article/details/81630140

版权

前端技术专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面整体的运行性能。导致这一问题是多方面的。首先，每个函数都是一个对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须指定所有事件处理程序而导致DOM访问次数，会延迟整个页面交互就绪时间。

对于“时间处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一个类型所有的事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件，而不必给每个可单击的元素分别添加事件处理程序。（减少页面中事件处理程序的数量）

<body>
    <table id="table1">
        <thead>
            <tr>
                <th>标识符</th>
                <th>名称</th>
                <th>国家</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>CHI</td>
                <td><a href="javascript:void(0);" id="link1">修改</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>CHI</td>
                <td><a href="javascript:void(0);" id="link2">修改</a></td>
            </tr>
        </tbody>
    </table>
    <script src="../../../Scripts/common.js"></script>
    <script type="text/javascript">

        //注册事件处理程序
        document.getElementById("link1").onclick = function () {
            console.log(window.event.target);
        }
        
        document.getElementById("link2").onclick = function () {
            console.log(window.event.target);
        }

        window.onunload = function () {
            //清除事件处理程序
            document.getElementById("link1").onclick = null;
            document.getElementById("link2").onclick = null;
        }
        
    </script>
</body>

每当将事件处理函数指定给元素时，运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。我们可以在不需要的时候移除事件处理程序。

在两种情况下，可能会造成性能问题。第一种是从文档中移除带有事件处理函数的程序元素时，例如使用removeChild()和replaceChild()方法，但更多的使用了innerHTML替换页面中的某一部分。

导致“空事件处理程序”的另一种情况是，在卸载页面的时候。如果在页面卸载之前没有干净的清除事件处理程序，那它们就会滞留在内存中。每次加载完页面再卸载，内存中滞留的对象数量就会增加，因为事件处理程序没有被清除。

一般来说，最好的做法是在页面卸载之前，先通过onunload事件处理程序移除所有的事件处理程序。

        //注册事件处理程序
        document.getElementById("link1").onclick = function () {
            console.log(window.event.target);
        }
        
        document.getElementById("link2").onclick = function () {
            console.log(window.event.target);
        }

        window.onunload = function () {
            //清除事件处理程序
            document.getElementById("link1").onclick = null;
            document.getElementById("link2").onclick = null;
        }