JavaScript提升性能的常用技巧总结【经典】


Posted in Javascript onJune 20, 2016

本文讲述了JavaScript提升性能的常用技巧。分享给大家供大家参考,具体如下:

1.注意作用域

随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链
1). 避免全局查找   将在一个函数中会多次用到的全局对象存储为局部变量总是没错的.

2). 避免 with 语句  with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度.

2.选择正确的方法

性能问题的一部分是和用于解决问题的算法或者方法有关的.

1). 避免不必要的属性查找

在计算机科学中,算法的复杂度是使用O符号来表示的.最简单,最快捷的算法是常数值,即O(1).之后,算法变得越来越复杂并花更长时间执行.常用的JavaScript算法类型有:

常数 : 不管有多少值,执行的时间都是恒定的.一般表示简单值和存储在变量的值.

对数 : 总的执行时间和值的数量相关,但是要完成算法并不一定要获取每个值. 例如:二分查找

线性 : 总执行时间和值的数量直接相关. 例如 :遍历某个数组中的所有元素

平方 : 总执行时间和值的数量有关,每个值至少要获取n次.例如:插入排序

立方:  总执行时间和值的数量有关,每个值至少要获取n的平方次

使用变量和数组要比访问对象上的属性更有效率.对象上的任何属性的查找都要比访问变量或者数组花更长时间,因为必须在原型链中对拥有该名称的属性进行一次搜索.

一般来讲,只要能减少算法的复杂度,就要尽可能减少.尽可能多地使用局部变量将属性查找替换为值查找.进一步讲,如果即可以用数字化的数组位置进行访问,也可以使用命名属性(诸如NodeList对象),那么使用数组位置.

2). 优化循环

a. 减值迭代   在很多情况下,从最大值开始,在循环中不断减值的迭代器更加高效.
b. 简化终止条件   由于每次循环过程都会计算终止条件,所以必须保证它尽可能快.
c. 简化循环体   循环体是执行最多的,所以要确保其被最大限度地优化.确保没有某些可以被很容易移出循环的密集计算.
d. 使用后测试循环   最常用的for循环和while循环都是前测试循环.而如do-while这种后测试循环,可以避免最初终止条件的计算,因此更快. 

3). 展开循环   当循环的次数是确定的,消除循环并使用多次函数调用往往更快.如著名的Duff装置

4). 避免双重解释

当JavaScript 代码想解析 JavaScript 的时候就会存在双重解释的惩罚.如下例:

eval("alert('Hello world!')");
//某些代码求值

修正:

alert('Hello world');
var sayHi = new Function("alert('Hello world!')");

修正:

var sayHi = function(){
  alert("Hellow world!');
};
setTimeout("alert('Hellow world!')",500);

修正:

setTimeout(function)({
   alert('Hellow world!');
},500);

5). 其他方法

原生方法较快--只要有可能,使用原生方法而不是自己用JavaScript重写一个.原生方法是用诸如C/C++之类的编译型语言写出来的,所以要比JavaScript的快很多很多.JavaScript中最容易被忘记的就是可以在Math对象中找到的复杂的数学运算;这些方法要比任何用JavaScript写的同样方法,如正弦,余弦快的多.

Switch 语句较快--如果有一系复杂的if-else语句,可以转换成单个switch语句则可以得到更快的代码.还可以通过将case语句按最可能的到最不可能在顺序进行组织,来进一步优化switch语句.

位运算符较快--当进行数学运算的时候,位运算操作要比任何布尔运算或者算数运算快.选择性的用位运算换算数运算可以极大提升复杂计算的性能.诸如取模,逻辑与和逻辑或都可以考虑用位运算来替换.

3 . 最小化语句数

1). 多个变量声明

如:

//4个语句---很浪费
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();

优化:

var count = 5,
color = "blue", 
values = [1,2,3],
noiw = new Date();

在大多数情况下这种优化都非常容易做,并且要比单个变量分别声明快很多.

2). 插入迭代值

如:

var name = values[i];
i++;

优化:

var name = values[i++];

3). 使用数组和对象字面量

如:

var values = new Array(); --->  var values = [];
var obj = new Object(); ---> var obj = {};

4. 优化DOM交互

1). 最小化现场更新

一旦你需要访问DOM部分是已经显示的页面的一部分,那么你就是在进行一个现场更新.之所以叫现场更新,是因为需要立即(现场)对页面对用户的显示进行更新.不管是插入单个字符,还是移除整个片段,都有一个性能惩罚,因为浏览器要重新计算无数尺寸以进行更新.

例:

var list = document.getElementById("myList");
for(var i = 0;i < 10;i++){
  var item = document.createElement("li");
  list.appendChild(item);
  item.appendChild(document.createTextNode("Item "+i));
}

这样添加10个项目,这个操作总共要完成20个现场更新.  下面用创建文档碎片的方法改进:

var list = document.getElementById("myList");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 10;i++){
   fragment.appendChild(item);
   item.appendChild(document.createTextNode("Item "+i));
}
list.appendChlid(fragment);

在这个例子中只有一次现场更新,它发生在所有项目都创建好之后.文档碎片用作一个临时的占位符,放置新创建的项目.然后使用appendChild()将所有项目添加到列表用.记住,当给appendChild()传入文档碎片时,只有碎片中的子节点被添加到目标,碎片本身不会被添加的.

一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构,然后将其添加到现存的文档中.

2). 使用innerHTML

有两种在页面上创建DOM节点的方法:使用诸如createElement(),appendChild()之类的DOM方法,以及使用innerHTML对于小的DOM更改而言,两种方法效率都差不多.而对于大的DOM更改,使用innerHTML要比使用标准DOM方法创建同样的DOM结构快很多.同样,一次使用innerHTML比多次使用innerHTML也要快相当多.

3). 使用事件代理(简,略)

4). 注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能.

发生以下情况时会返回NodeList对象:

a. 进行了对getElementsByTagName()的调用
b. 获取了元素的childNodes属性
c. 获取了元素的attributes属性
d. 访问了特殊的集合,如document.forms  ,  document.images等等

要了解当使用NodeList对象时,合理使用会极大提升代码执行速度.

前面介绍的 函数节流  也是很重要的一方面。特别是多重循环,非常耗性能时,此方法很有用的。

PS:对于javascript进行压缩,减少代码体积也是提升javascript性能的有效途径。这里就为大家推荐2款非常实用的压缩工具:

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

jsmin在线js压缩工具:
http://tools.3water.com/code/jsmincompress

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
php 中序列化和json使用介绍
Jul 08 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
AngularJs Javascript MVC 框架
Jun 20 #Javascript
jQuery 限制输入字符串长度
Jun 20 #Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 #Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 #Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php 无法载入mysql扩展
2010/03/12 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
个人收入证明模板
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
商铺门面租房协议书
2014/10/21 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
一文搞懂Java中的注解和反射
2022/06/21 Java/Android