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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
js中数组的常用方法小结
Dec 30 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
使用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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python决策树之C4.5算法详解
2017/12/20 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Django中create和save方法的不同
2019/08/13 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python实现udp传输图片功能
2020/03/20 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
安全标语大全
2014/06/10 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
2014年服务员工作总结
2014/11/18 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年调度员工作总结
2015/04/30 职场文书
酒会开场白大全
2015/06/01 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python