提高JavaScript执行效率的23个实用技巧


Posted in Javascript onMarch 01, 2017

本文向大家分享23种JavaScript提高执行效率的小技巧、最佳实践等非常实用的内容。当然JavaScript的实用技巧不止这些,还有很多即好玩又能提高程序运行效率的技巧,以后我们会继续分享给大家。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.使用逻辑符号&&或者||进行条件判断

var foo = 10; 
foo == 10 && doSomething(); // 如果 foo == 10 则执行 doSomething(); 
foo == 5 || doSomething(); // 如果 foo != 5 则执行doSomething();

“||”也可以用来设置函数参数的默认值

Function doSomething(arg1){ 
 Arg1 = arg1 || 10; // 如果 arg1为设置那么 Arg1=10
}

2.使用map()方法来遍历数组

var squares = [1,2,3,4].map(function (val) { 
 return val * val; 
}); 
// 运行结果为 [1, 4, 9, 16]

3.舍入小数位数

var num =2.443242342; 
num = num.toFixed(4); // 保留四位小数位 2.4432

4.浮点数问题

0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // = 9007199254740992 
9007199254740992 + 2 // = 9007199254740994

0.1+0.2等于0.30000000000000004,为什么会发生这种情况?根据IEEE754标准,你需要知道的是所有JavaScript数字在64位二进制内的都表示浮点数。开发者可以使用toFixed()和toPrecision()方法来解决这个问题。

5.使用for-in loop检查遍历对象属性

下面这段代码主要是为了避免遍历对象属性。

for (var name in object) { 
 if (object.hasOwnProperty(name)) { 
  // 执行代码
 } 
}

6.逗号操作符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a); // a 为 1 
console.log(b); // b 为 99

7.计算或查询缓存变量

在使用jQuery选择器的情况下,开发者可以缓存DOM元素

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');

8.在将参数传递到isFinite()之前进行验证

isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10); // true 
isFinite(undifined); // false 
isFinite(); // false 
isFinite(null); // true !!!

9.在数组中避免负向索引

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ; // from is equal to -1 
numbersArray.splice(from,2); // will return [5]

确保参数传递到indexOf()方法里是非负向的。

10.(使用JSON)序列化和反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ 
var personFromString = JSON.parse(stringFromPerson); 
/* personFromString is equal to person object */

11.避免使用eval()或Function构造函数

eval()和Function构造函数被称为脚本引擎,每次执行它们的时候都必须把源码转换成可执行的代码,这是非常昂贵的操作。

var func1 = new Function(functionCode); 
var func2 = eval(functionCode);

12.避免使用with()方法

如果在全局区域里使用with()插入变量,那么,万一有一个变量名字和它名字一样,就很容易混淆和重写。

13.避免在数组里使用for-in loop

而不是这样用:

var sum = 0; 
for (var i in arrayNumbers) { 
 sum += arrayNumbers[i]; 
}

这样会更好:

var sum = 0; 
for (var i = 0, len = arrayNumbers.length; i < len; i++) { 
 sum += arrayNumbers[i]; 
}

因为i和len是循环中的第一个语句,所以每次实例化都会执行一次,这样执行起来就会比下面这个更快:

for (var i = 0; i < arrayNumbers.length; i++)

为什么?数组长度arraynNumbers在每次loop迭代时都会被重新计算。

14.不要向setTimeout()和setInterval()方法里传递字符串

如果在这两个方法里传递字符串,那么字符串会像eval那样重新计算,这样速度就会变慢,而不是这样使用:

setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

相反,应该这样用:

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

15.使用switch/case语句代替较长的if/else语句

如果有超过2个以上的case,那么使用switch/case速度会快很多,而且代码看起来更加优雅。

16.遇到数值范围时,可以选用switch/casne

function getCategory(age) { 
 var category = ""; 
 switch (true) { 
  case isNaN(age): 
   category = "not an age"; 
   break; 
  case (age >= 50): 
   category = "Old"; 
   break; 
  case (age <= 20): 
   category = "Baby"; 
   break; 
  default: 
   category = "Young"; 
   break; 
 }; 
 return category; 
} 
getCategory(5); // 返回 "Baby"

17.创建一个对象,该对象的属性是一个给定的对象

可以编写一个这样的函数,创建一个对象,该对象属性是一个给定的对象,好比这样:

function clone(object) { 
 function OneShotConstructor(){}; 
 OneShotConstructor.prototype= object; 
 return new OneShotConstructor(); 
} 
clone(Array).prototype ; // []

18.一个HTML escaper函数

function escapeHTML(text) { 
 var replacements= {"<": "<", ">": ">","&": "&", "\"": """};      
 return text.replace(/[<>&"]/g, function(character) { 
  return replacements[character]; 
 }); 
}

19.在一个loop里避免使用try-catch-finally

try-catch-finally在当前范围里运行时会创建一个新的变量,在执行catch时,捕获异常对象会赋值给变量。
不要这样使用:

var object = ['foo', 'bar'], i; 
for (i = 0, len = object.length; i <len; i++) { 
 try { 
  // 执行代码,如果出错将被捕获
 } 
 catch (e) {  
  // 获取错误,并执行代码
 } 
}

应该这样使用:

var object = ['foo', 'bar'], i; 
try { 
 for (i = 0, len = object.length; i <len; i++) { 
  // 执行代码,如果出错将被捕获
 } 
} 
catch (e) {  
 // 获取错误,并执行代码
}

20.给XMLHttpRequests设置timeouts

如果一个XHR需要花费太长时间,你可以终止链接(例如网络问题),通过给XHR使用setTimeout()解决。

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () { 
 if (this.readyState == 4) { 
  clearTimeout(timeout); 
  // 执行代码
 } 
} 
var timeout = setTimeout( function () { 
 xhr.abort(); // call error callback 
}, 60*1000 /* 设置1分钟后执行*/ ); 
xhr.open('GET', url, true); 
 
xhr.send();

此外,通常你应该完全避免同步Ajax调用。

21.处理WebSocket超时

一般来说,当创建一个WebSocket链接时,服务器可能在闲置30秒后链接超时,在闲置一段时间后,防火墙也可能会链接超时。

为了解决这种超时问题,你可以定期地向服务器发送空信息,在代码里添加两个函数:一个函数用来保持链接一直是活的,另一个用来取消链接是活的,使用这种方法,你将控制超时问题。

添加一个timeID……

var timerID = 0; 
function keepAlive() { 
 var timeout = 15000; 
 if (webSocket.readyState == webSocket.OPEN) { 
  webSocket.send(''); 
 } 
 timerId = setTimeout(keepAlive, timeout); 
} 
function cancelKeepAlive() { 
 if (timerId) { 
  cancelTimeout(timerId); 
 } 
}

keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。

22.记住,最原始的操作要比函数调用快

对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。
例如

var min = Math.min(a,b); 
A.push(v);

基本操作方式:

var min = a < b ? a b; 
A[A.length] = v;

23.编码时注意代码的美观、可读

JavaScript是一门非常好的语言,尤其对于前端工程师来说,JavaScript执行效率也非常重要。

我们在编写JavaScript程序时注意一些小细节,掌握一些常用的实用小技巧往往会使程序更简捷,程序执行效率更高

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
异步加载script的代码
Jan 12 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 #Javascript
分分钟玩转Vue.js组件(二)
Mar 01 #Javascript
js实现带三角符的手风琴效果
Mar 01 #Javascript
JavaScript拖动层Div代码
Mar 01 #Javascript
vue组件间通信解析
Mar 01 #Javascript
性能优化之代码优化页面加载速度
Mar 01 #Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
You might like
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue自动化路由的实现代码
2019/09/30 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
小班幼儿评语大全
2014/04/30 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
《观察物体》教学反思
2016/02/17 职场文书