jquery绑定事件优化网页性能（使用on进行事件委托）

最新推荐文章于 2022-07-13 10:58:24 发布

ClassicSong

最新推荐文章于 2022-07-13 10:58:24 发布

阅读量2.7k

点赞数

分类专栏： jquery 性能优化文章标签： jquery 优化性能内存

本文链接：https://blog.csdn.net/ernijie/article/details/51670992

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

性能优化

2 篇文章 0 订阅

订阅专栏

自身认知限制，在之前做项目使用jquery框架的时候会直接使用$(obj).click(function(){})（click可以换成其他的事件）为目标对象绑定事件，并没有觉得有什么不妥。今天看了一篇博客惊着了。原来光是知其然，不知其所以然。

例子如下：在页面中添加1000个p标签，再给他们绑定事件。用两种绑定方式分别统计内存消耗。

<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script> <!--此处引入自己的jquery库文件-->
<script type="text/javascript">
    $(function(){
        var doms = "";
        for(var i = 0; i<1000;i++){
            doms+="<p>测试"+i+"</p>";
        }
        $("#content").html(doms);
        //第一种事件绑定方式
        $("#content p").click(function () {
            $("#content").append("<p>我是后来的呀</p>");
        });
        //第二种事件绑定方式
        $("#content").on("click","p",function () {
            $("#content").append("<p>我是后来的呀</p>");
        });
})</script></html>

第一种事件绑定方式消耗内存为3.2M，如下图：

第二种事件绑定方式内存消耗为2.7M，如下图：

两种方式内存消耗相差很多。明显第二种使用on的事件委托形式更优，如果项目中有类似的需求，还是择后者。并且后者还支持动态绑定。

ClassicSong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery绑定事件优化网页性能（使用on进行事件委托）

自身认知限制，在之前做项目使用jquery框架的时候会直接使用$(obj).click(function(){})（click可以换成其他的事件）为目标对象绑定事件，并没有觉得有什么不妥。今天看了一篇博客惊着了。原来光是知其然，不知其所以然。例子如下：在页面中添加1000个p标签，再给他们绑定事件。用两种绑定方式分别统计内存消耗。javascript $
复制链接

扫一扫

专栏目录