编写高性能Javascript代码的N条建议


Posted in Javascript onOctober 12, 2015

多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显。但在某些情况下,不优化的Javascript代码必然会影响用户的体验。因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处。

  下面给出编写高性能的Javascript代码的若干建议:

  1、尽量不要用for-in 循环去访问数组,建议用 for 循环进行循环:       

function foo() {
   var i, b, c=[,,];
   for (i in c) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }

  2、建议将对象进行缓存处理,特别是DOM访问是比较消耗资源的:

//c.length没有缓存,每次迭代都要计算一下数组的长度
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度
  function foo() {
   var i, b, c=[,,],l;
   for (i=,l=c.length;i<l;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }

  //document.getElementById('info')没有缓存,每次都要遍历DOM
  function foo() {
   var e;
   document.getElementById('info').innerHTML="call ";
   document.getElementById('info').innerHTML="call ";
   
  }
  //性能更好,第二次无需访问DOM
  function foo() {
  var e=document.getElementById('info');
  e.innerHTML="call ";
   e.innerHTML="call ";
  }

3、建议不要在函数内进行过深的嵌套判断: 

//函数内嵌套判断语句过多
  function foo1() {
   var r={};
   r.data={};
   r.data.myProp=2;
   if (r) {
   if (r.data) {
    if (r.data.myProp) {
     //逻辑处理
    } 
    else {
     //逻辑处理
    }
   }
 }
 }
  //性能更好
 function foo2() {
   var r={};
   r.data={};
   r.data.myProp=2;
  if (!r) return;
  if (!r.data) return;  
  if (r.data.myProp) {
   //逻辑处理
  } else {
    //逻辑处理
  }
 }

  4、避免循环引用,防止内存泄漏:

//需要jQuery
 function foo(e,d) {
  $(e).on("click", function() {
    //对d进行逻辑处理
    cbk(d);
      } 
  });
 }
 //打破循环!
 function foo(e, d) {
  $(e).on("click", cbk(d));
 }
 function cbk (d) {
 //逻辑处理
 }

5、建议避免在函数内返回一个未声明的变量,会污染外部变量:

function foo(a, b) {
  r = a + b;
  return r; //r未声明,则创建了一个全局变量
 }

6、var声明变量,建议写在多行

//自己测试结果是foo快,但也有一种观点是foo快
 function foo() {
  var c = ;
  var sum=;
  var d = ;
  var e;
 }
 function foo() {
  var c = ,sum=, d = , e;
 }

说明:其实单个函数时间上差别较小,这里采用循环多次用累计时间进行性能对比,不同PC配置或者浏览器测试结果可能存在差异。

以上内容是编写高性能Javascript代码的N条建议,希望对大家有所帮助。

Javascript 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
老生常谈js数据类型
Aug 03 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 #Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
You might like
PHP中数组的三种排序方法分享
2012/05/07 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP队列用法实例
2014/11/05 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
Python的一些用法分享
2012/10/07 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
仓库管理制度
2014/01/21 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
申论倡议书范文
2014/05/13 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
继续教育个人总结
2015/03/03 职场文书
未婚证明范本
2015/06/15 职场文书
中学总务处工作总结
2015/08/12 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis