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

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


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




javascript




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

jquery绑定事件优化网页性能(使用on进行事件委托)_第1张图片

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

jquery绑定事件优化网页性能(使用on进行事件委托)_第2张图片

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

你可能感兴趣的:(jquery,性能优化,jquery,优化,性能,内存)