编写高性能Javascript代码的若干建议
多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显。但在某些情况下,不优化的Javascript代码必然会影响用户的体验。因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处。
下面给出编写高性能的Javascript代码的若干建议:
1、尽量不要用for-in 循环去访问数组,建议用 for 循环进行循环:
function foo1() {
var i, b, c=[1,2,3];
for (i in c) {
b = c[i];
if(b === "2")
return b;
}
}
//性能更好
function foo2() {
var i, b, c=[1,2,3];
for (i=0;i<c.length;i++) {
b = c[i];
if(b === "2")
return b;
}
}
2、建议将对象进行缓存处理,特别是DOM访问是比较消耗资源的:
//c.length没有缓存,每次迭代都要计算一下数组的长度
function foo1() {
var i, b, c=[1,2,3];
for (i=0;i<c.length;i++) {
b = c[i];
if(b === "2")
return b;
}
}
//性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度
function foo2() {
var i, b, c=[1,2,3],l;
for (i=0,l=c.length;i<l;i++) {
b = c[i];
if(b === "2")
return b;
}
}
//document.getElementById('info')没有缓存,每次都要遍历DOM
function foo1() {
var e;
document.getElementById('info').innerHTML="call 1";
document.getElementById('info').innerHTML="call 2";
}
//性能更好,第二次无需访问DOM
function foo2() {
var e=document.getElementById('info');
e.innerHTML="call 1";
e.innerHTML="call 2";
}
3、建议不要在函数内进行过深的嵌套判断:
//函数内嵌套判断语句过多
function foo1() {
var r={};
r.data={};
r.data.myProp=2;
if (r) {
if (r.data) {
if (r.data.myProp) {
//逻辑处理
}
else {
//逻辑处理
}
}
}
}
//性能更好
function foo2() {
var r={};
r.data={};
r.data.myProp=2;
if (!r) return;
if (!r.data) return;
if (r.data.myProp) {
//逻辑处理
} else {
//逻辑处理
}
}
4、避免循环引用,防止内存泄漏:
//需要jQuery
function foo1(e,d) {
$(e).on("click", function() {
//对d进行逻辑处理
cbk(d);
}
});
} //打破循环!
function foo2(e, d) {
$(e).on("click", cbk(d));
}
function cbk (d) {
//逻辑处理
}
5、建议避免在函数内返回一个未声明的变量,会污染外部变量:
function foo(a, b) {
r = a + b;
return r; //r未声明,则创建了一个全局变量
}
6、var声明变量,建议写在多行
//自己测试结果是foo1快,但也有一种观点是foo2快
function foo1() {
var c = 1;
var sum=0;
var d = 0;
var e;
} function foo2() {
var c = 1,sum=0, d = 0, e;
}
说明:其实单个函数时间上差别较小,这里采用循环多次用累计时间进行性能对比,不同PC配置或者浏览器测试结果可能存在差异。
编写高性能Javascript代码的若干建议的更多相关文章
- 编写高性能Javascript
编写高性能Javascript 多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascr ...
- 【JavaScript】【译】编写高性能JavaScript
英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执 ...
- 编写高性能JavaScript【转】
英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- Java性能优化之高性能JAVA代码的若干个习惯
创建对象: 1.避免在循环体中创建对象,循环前应该创建对象,避免浪费更多内存空间和增加GC负担 这种情况在我们的实际应用中经常遇到,而且我们很容易犯类似的错误,例如下面的代码: for (int i ...
- [翻译] 编写高性能 .NET 代码--第五章 通用编码与对象设计 -- 类 vs 结构体
本章介绍了本书其它部分未涉及到的一些编码和设计原则.包含了一些.NET的应用场景,有些不会造成太大危害,有些则会造成明显的问题.剩下的则根据你的使用方法会产生不同的效果.如果要对本章节出现的原则做一个 ...
- [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象(Pinning)
减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...
- [翻译] 编写高性能 .NET 代码--第二章 GC -- 将长生命周期对象和大对象池化
将长生命周期对象和大对象池化 请记住最开始说的原则:对象要么立即回收要么一直存在.它们要么在0代被回收,要么在2代里一直存在.有些对象本质是静态的,生命周期从它们被创建开始,到程序停止才会结束.其它对 ...
随机推荐
- stackView的隐藏与显示注意事项
1.想要通过变换stackView的y值来让stackView显现/隐藏,同时让其中的button能点击响应,得用topCons 2.导航栏的tinBar要设置为非透明状态
- javascript语句——表达式语句、块语句、空语句和声明语句
× 目录 [1]表达式 [2]块语句 [3]空语句[4]声明 前面的话 如果表达式在javascript中是短语,那么语句(statement)就是javascript整句或命令.表达式计算出一个值, ...
- 算法与数据结构(2)--英雄会第三届在线编程大赛:几个bing
基础知识的回顾不再写到这里面了,会写一些算法算法的解答或者读一些相关书籍的笔记. 今天做了一道算法题,来自微软必应·英雄会第三届在线编程大赛:几个bing? 做出来了...但不知道为啥执行测试用例失败 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- 【Android】Android ObjectAnimator动画初识、模仿
ObjectAnimator: ObjectAnimator的概念这里就不解释了,直接从代码中说明,以下是模仿Persicope的加载动画,简单的几行代码即可实现,当然我也是模仿的,更好的实现思路还请 ...
- 聚合索引(clustered index) / 非聚合索引(nonclustered index)
以下我面试经常问的2道题..尤其针对觉得自己SQL SERVER 还不错的同志.. 呵呵 很难有人答得好.. 各位在我收集每个人擅长的东西时,大部分都把SQL SERVER 标为Expert,看看是否 ...
- android中AVD的使用
AVD路径设置 前面提到,不管用Eclipse还是从命令行创建Android Emulator时,相应的文件是被放置到 “C:\Documents and Settings\Administrator ...
- Jquery基本用法总结
选择器$("#mydiv") 通过ID$("p#myp") 选择id=myp 的所有p元素(组合型)$(".mydiv") 通过 class ...
- js基础篇——encodeURI 和encodeURIComponent
转自zccst的又一次掉进encodeURIComponent的坑里了 问题: ajax.get ( url+'?k1'=v1+'&k2'=v2+'&k3'=v3, ... ); 由于 ...
- Dapper学习 - Dapper.Rainbow(二) - Update/Delete
上一篇介绍了Rainbow的Create方法, 这里就来介绍一下Update方法吧, 毕竟新增和修改是双胞兄弟嘛. 一.Update 1. 测试代码: var conStr = Configurati ...