js性能优化-日常项目规范

1: this 的问题

  • 当我们在使用jquery获取元素进行内容修改的时候比如如下
    // 技能
    $('.skill-list').on('touchend', 'li', function () {
        $(".select").addClass('on').siblings().removeClass('on');
        $(".select").find('.I').hide();
        $(".select").find('.II').show();
        $(".select").siblings().find('.I').show();
        $(".select").siblings().find('.II').hide();
        var names =$(".select").attr('data-name');
        var desc =$(".select").attr('data-desc');
    });

  • 这样的写法对于项目来说无疑是最大的弊端,当考虑到性能的问题的时候,因为每一次执行$(".select")都是对整个DOM的一次遍历, jquery只是保证我们书写起来比较方便,但是我们也要考虑到性能的问题,不如进行如下修改:
 //技能
   $('.skill-list').on('touchend', 'li', function () {
       var _this=$(".select");
       _this.addClass('on').siblings().removeClass('on');
       _this.find('.I').hide();
       _this.find('.II').show();
       _this.siblings().find('.I').show();
       _this.siblings().find('.II').hide();
       var names =_this.attr('data-name');
       var desc =_this.attr('data-desc');
   });
  • 代码量虽然看上去没有任何的减少,但是性能提高了很多,因为整个过程,它只需要去遍历整个 DOM一次就可以了

2: 循环及时终止的问题:很多时候我们在进行遍历的时候,都会用到循环,但是如何及时终止循环以提高性能呢,代码如下:

  $.each(allHeroList,function (index,currentList) {
       if(heroId==currentList.yxid_56){
           categoryHero=currentList.yxlb_7a;
       }
   })

* 如果我们只是这样写,那就会对整个数据进行的循环,有时候我们希望找到我们想要的结果以后可以终止循环,那要如何做到呢?代码如下:

  $.each(allHeroList,function (index,currentList) {
       if(heroId==currentList.yxid_56){
           categoryHero=currentList.yxlb_7a;
           <!-- 增加下面一行代码,会跳出循环 -->
           return false;
       }
   })
  • 如果数据量比较小的话,对性能的影响是微乎其微的,但是如果需要进行大量的数据处理的时候还是要考虑一下的

以上只是个人在写项目已经修改别人的项目的时候进行的一个小小的思考和总结,算不上大的研究,毕竟性能对于项目来说是一个很大的方面,但是起码可以帮助你养成一个书写优秀,高效代码的习惯。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...
    bennnnn阅读 5,527评论 2 4
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,345评论 1 45
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 11,006评论 0 106
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,301评论 1 52
  • 周末下午一家人去大理古城,路过麦当劳,孩子挪不动脚步,一定要去吃薯条。 古城的麦当劳位置极好,在人民路和复兴路交叉...
    生凌君君阅读 5,722评论 32 60

友情链接更多精彩内容