JavaScript学习笔记(十七)js 优化


Posted in Javascript onFebruary 04, 2010

一直很迷惑司徒正美为什么对以下的for循环还鄙视,

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

//循环代码

}

看了下面这篇文章终于TM明白了。。。

语言层次方面

循环

在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用。

如果要与数组的长度作比较,应该事先把数组的length属性放入一个局部变量中,减少查询次数。

所以上面的代码应该这么写:

for (var i = 0,l = list.length; i < l; i++) {

//循环代码

}

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的栈当中的。

字符串连接

如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下

var buf = new Array();

for (var i = 0; i < 100; i++) {

   buf.push(i.toString());

}

var all = buf.join("");

类型转换

类型转换是大家常犯的错误,因为JavaScript是动态类型语言,你不能指定变量的类型。

1.  把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:("" +) > String() > .toString() > new String()

String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。

2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。另外,和第二节的对象查找中的问题不一样,Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。

3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

使用直接量

其实这个影响倒比较小,可以忽略。什么叫使用直接量,比如,JavaScript支持使用[param,param,param,...]来直接表达一个数组,以往我们都使用new Array(param,param,...),使用前者是引擎直接解释的,后者要调用一个Array内部构造器,所以要略微快一点点。

同样,var foo = {}的方式也比var foo = new Object();快,

var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作

对字符串进行循环操作,譬如替换、查找,应使用正则表达式,因为本身JavaScript的循环速度就比较慢,而正则表达式的操作是用C写成的语言的API,性能很好。

高级对象

自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用,应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询

使用[“”]查询要比.items()更快,这和前面的减少对象查找的思路是一样的,调用.items()增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点,其实这样做无法保证代码的有效性。

字符串操作效率低

所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他

脚本引擎

Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多,无论是执行速度还是内存管理上,因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段,删除所有的空格和注释,把代码放入一行内,可以加快下载的速度,注意,是下载的速度而不是解析的速度,如果是本地,注释和空格并不会影响解释和执行速度。

总结

在JavaScript编程中提高JavaScript运行性能的一些方法,其实这些经验都基于几条原则:

1.直接拿手头现成的东西比较快,如局部变量比全局变量快,直接量比运行时构造对象快等等。

2.尽可能少地减少执行次数,比如先缓存需要多次查询的。

3.尽可能使用语言内置的功能,比如串链接。

4.尽可能使用系统提供的API,因为这些API是编译好的二进制代码,执行效率很高

5.一些基本的算法上的优化,同样可以用在JavaScript中,比如运算结构的调整。但是由于JavaScript是解释型的,一般不会在运行时对字节码进行优化,所以这些优化仍然是很重要的。

当然,其实这里的一些技巧同样使用在其他的一些解释型语言中,大家也可以进行参考。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
express 项目分层实践详解
Dec 10 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 #Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python 合并文件的具体实例
2013/08/08 Python
Python写的服务监控程序实例
2015/01/31 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python 导入文件过程图解
2019/10/15 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
斯福泰克软件测试面试题
2015/02/16 面试题
护理中职生求职信范文
2014/02/24 职场文书
网络宣传方案
2014/03/15 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers