美文网首页工作生活
js性能优化-日常项目规范

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

作者: 代艳霞 | 来源:发表于2019-07-09 23:11 被阅读0次

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;
       }
   })
  • 如果数据量比较小的话,对性能的影响是微乎其微的,但是如果需要进行大量的数据处理的时候还是要考虑一下的

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

相关文章

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

    1: this 的问题 当我们在使用jquery获取元素进行内容修改的时候比如如下 这样的写法对于项目来说无疑是...

  • 项目开发规范参考

    现有项目的开发规范文档 目录 命名规则文件命名 HTML规范 CSS规范 JS规范变量申明简写代码性能优化注释规范...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端进阶(9) - js 性能优化利器:prepack

    js 性能优化利器:prepack 1. js 性能优化 js 性能优化不外乎从三个角度入手: 1.1 开发者在编...

  • 2018最新 Android 面试题总结(三)

    Q:项目中如何做性能优化的? 举例说明项目注意了哪些方面的性能优化,如布局优化、绘制优化、内存泄漏优化、 响应速度...

  • WEB前端if else 性能优化指南

    if else 性能优化指南 @(技术分享) 不管是平时在学习js中还是在项目书中写js代码,都避免不了一个问题就...

  • 项目中的性能优化

    #项目中的性能优化

  • Android--App优化

    App的优化分为: 1. 性能优化 2. apk瘦身优化 3. 项目代码优化 ---- 1. 性能优化 a. 内存...

  • vue-cli3项目搭建配置

    vue-cli3项目搭建配置以及性能优化项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9...

网友评论

    本文标题:js性能优化-日常项目规范

    本文链接:https://www.haomeiwen.com/subject/riohhctx.html