zoukankan      html  css  js  c++  java
  • js-jQuery性能优化(二)

    5、数组方式使用jQuery对象

      使用jQuery选择器获取结果是一个jQuery对象。然而,jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单的for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

    6、事件代理

      常用的JS事件如click等会冒泡到父级节点,当我们需要给多个元素调用同一个函数时这点很有用。比如,我们要为一个表格绑定这样的行为:点击td后,把背景色设置为红色,如果单独给每个td绑定事件,那么当表格很大时,需要绑定很多个事件,这将给性能带来负面影响。

      jQuery 1.7+提供了一个方式:on(),可以将整个表格的事件监听封装到一个便利的方法里,只需绑定一个事件:

    $("#myTable").on("click","td",function(){
        $(this).css("background","red");
    });

    7、将代码转化为jQuery插件

      如果每次都需要花上一定的时间去开发类似的jQuery代码,那么可以考虑将代码变成插件。它能够使你的代码有更好的重用性,并且能够有效地帮助你组织代码。

    8、使用join()来拼接字符串

      在处理长字符串时,使用join()比使用“+”有助于性能优化。

      首先创建一个数组,然后循环,最后使用join()把数组转化为字符串。

    9、合理利用HTML5的Data属性

      HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5属性,来自动得到数据。

    10、尽量使用原生的JS方法

      原生的方法效率高于拐弯抹角的调用许多函数,有时并不需要jQuery。

      比如创建一个p元素可以优化为:

    $(document.createElement("p"));

    11、压缩JavaScript

      现在的Web项目总是离不开大量的JavaScript,而JS文件的体积越来越大,随之也影响到页面的感知性能。因此,需要对JS文件进行压缩,一方面是使用Gzip,一方面则是去除JS文件里的注释、空白,并且压缩局部变量长度。对于一些成熟的类库来说,它们本身会提供完整版和压缩版两个版本。

  • 相关阅读:
    Yii增删改查
    10个超级有用、必须收藏的PHP代码样例
    yii源码分析I、II
    Yii源码阅读笔记
    Yii源码阅读笔记
    Yii源码阅读笔记
    当浏览器输入url的时候发生了什么
    js模块化值之seaJS
    js判断字符串中的英文和汉字
    display:table-cell的惊天作用,直接惊呆你!
  • 原文地址:https://www.cnblogs.com/zczhangcui/p/6377728.html
Copyright © 2011-2022 走看看