• js-jQuery性能优化(一)


    来自于《锋利的jQuery》

    1、使用最新版本的jQuery类库

      jQuery每一个新的版本都会较上一版本进行BUG修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。

    2、使用合适的选择器

      ①、$("#id")

      使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById()。如果这个方法不能直接找到你需要的元素,那么可以考虑调用find()方法。代码如下:

    $("#content").find("div")

      使用以上代码可以有效的缩小定位的DOM元素。为了提高性能,建议从最近的ID元素开始往下搜索。

      ②、$("p"),$("div"),$("input")

      标签选择器的性能也是不错的,它是性能优化的第二选择。

      ③、$(".class")

      对于IE9+,将使用本地方法document.getElementByClassName(),而对于较老的浏览器,只能靠使用DOM搜索的方式来实现,这无疑对性能产生较大的影响。

      ④、$("[attribute=value]")

      对于使用属性来定位DOM元素,本地JS方法中并没有直接地实现,大多都是使用DOM搜索方式来达到效果,很多浏览器支持querySelectorAll()方法,但是不同浏览器间的性能还是有区别。总的来说,使用这种方法来定位DOM元素,性能并不是非常理想。尽量避免。

      ⑤、$(":hidden")

      jQuery需要搜索每一个元素来定位伪选择器,具有较大的性能问题。如果坚持使用这种方式,请先使用ID选择器定位父元素后再使用该选择器。

    总结:1、尽量使用ID选择器。2、尽量给选择器指定上下文。

    3、缓存对象

      jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。可以将多次使用的jQuery对象缓存下来。

      所以,永远不要让相同的选择器在你的代码里出现多次。

    4、循环时的DOM操作

      在for、while、each中处理节点,应避免多次的DOM操作,比如在<ul>中插入<li>,不要每次循环插入一个<li>,应该将整个元素字符串在插入DOM之前全部创建好再一次性插入。

  • 相关阅读:
    python邮件之附件
    python3.5之smtp
    一台Linux上搭建两个tomcat
    mysql 初探(一)
    python监视mysql最大连接数
    P3658 [USACO17FEB]Why Did the Cow Cross the Road III P cdq分治
    P4793 [AHOI2008]矩形藏宝地 cdq分治 线段树
    P2487 [SDOI2011]拦截导弹 线段树 cdq分治
    P3157 [CQOI2011]动态逆序对 cdq分治
    P4169 [Violet]天使玩偶/SJY摆棋子 cdq分治
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6375750.html
Copyright © 2020-2023  润新知