编写高性能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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php生成图片缩略图的方法
2015/04/07 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python实现360的字符显示界面
2014/02/21 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
公司市场部岗位职责
2013/12/02 职场文书
库房主管岗位职责
2013/12/31 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
签约仪式主持词
2014/03/19 职场文书
数学教研活动总结
2014/07/02 职场文书
个人务虚会发言材料
2014/10/20 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
英语通知范文
2015/04/22 职场文书
团队拓展训练感想
2015/08/07 职场文书
六年级语文教学反思
2016/03/03 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
用Python远程登陆服务器的步骤
2021/04/16 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
python pygame 开发五子棋双人对弈
2022/05/02 Python