jQuery性能优化

使用合适的选择器

不同的选择器有性能差异,以下为性能从好到坏:

  • $("#id")
    使用id来定位无疑是最佳提高性能的方式,因为直接调用js的document.getElementById方法。这个方法直接通过元素id来返回对应元素。
    若直接用id找不到,可以考虑从最近的id元素开始向下搜索:$("#content").find("div").

  • $("p"),$("input")
    标签选择器是性能优化的第二选择,因为直接调用js的document.getElementsByTagName()来定位元素。

  • $(".class")
    对于新的浏览器,支持document.getElementsByClassName();而老的浏览器则只能靠DOM搜索实现,对性能产生较大影响。

  • $("[attribute = value]")
    对于利用属性查找元素,大多是靠DOM元素搜索。很多现代浏览器支持querySelectorAll()方法,但不同浏览器间性能还是有差别,因此性能不是很理想。

  • $(":hidden")
    这种也是通过搜索全部DOM元素实现的,性能不佳。若一定要使用,请先使用id选择器定位父元素然后再使用该选择器。
    $("#content").find(":hidden");
    $("a.button").find(":animated");

综上,
1.尽量使用id选择器;
2.尽量给选择器指定上下文;

缓存变量

每一次创建选择器的时候jQuery都会查找DOM从而创建多个jQuery对象。
最好的做法是将会重复用到的jQuery选择器对象缓存起来:
var input = $("#selector input");

循环时的DOM操作

最好不要很多次修改DOM,可以在拼接好字符串后一次性插入到DOM中。

判断jQuery对象是否存在

if( $("#content").length > 0 )而不是if( $("#content") )

事件代理

每一个js事件默认都会冒泡到父节点,当我们需要给多个元素调用相同函数时,与其给每一个元素绑定事件,可以选择为它们的父元素绑定事件,通过event.target获得发生事件的当前元素即可。
另外,on( )方法能帮助将整个事件监听封装到一个便利方法中。

使用join来拼接字符串

用join方法代替+来拼接字符串。

合理利用h5的data属性

h5的data属性帮助插入数据,特别是前后端的数据交换。如元素中的data-role,data-options等自定义属性,可利用jQuery的data方法获得:$("#d1").data("role")

有的时候使用js原生方法效率更高

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容