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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jquery 插件学习(四)
Aug 06 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
用python计算文件的MD5值
2020/12/23 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
计算机网络专业求职信
2014/06/05 职场文书
党在我心中演讲稿
2014/09/02 职场文书
匿名信格式范文
2015/05/27 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python