编写高性能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代里一直存在.有些对象本质是静态的,生命周期从它们被创建开始,到程序停止才会结束.其它对 ...
随机推荐
- hdu2066一个人的旅行(多源点多汇点的最短路径问题)
/* 思路:多源点,多会点的最短路径! 将最小号-1的节点但最源点,将最大号+1的点当作汇点! 将问题转变成从一个源点到一个汇点的最短路径的问题! 开始忘记初始化vector了,哇了好多次....坑爹 ...
- Suse碎碎念
1. 如何查看Suse的版本号 vmpbos01:~ # lsb_release -d Description: SUSE Linux Enterprise Server 11 (x86_64) vm ...
- Twitter Storm安装配置(Ubuntu系统)单机版
要使用storm首先要安装以下工具:JDK.Python.zookeeper.zeromq.jzmq.storm (注:各个模块都是独立的,如果安装失败或者卡顿可以单独百度某个模块的安装,都是可以的. ...
- [c++] STL = Standard Template Library
How many people give up, because of YOU. Continue... 先实践,最后需要总结. 1. 数据流中的数据按照一定的格式<T>提取 ------ ...
- Unity3D 常用插件
1.FX Maker FX Maker是一款制作特效的工具,它专为移动操作系统做了优化.FX Maker包括300种Prefab特效,300种纹理结构.100种网格.100种曲线效果.支持英文和韩文, ...
- UML学习总结
UML中的4+1模型 UML的4+1模型是一个叫Kruchten的人发明的,但网上还有其它版本的4+1 模型:Use case view, Logic view, Process view, Impe ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- jQuery.Data源码
jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cach ...
- Java中不同的并发实现的性能比较
Fork/Join框架在不同配置下的表现如何? 正如即将上映的星球大战那样,Java 8的并行流也是毁誉参半.并行流(Parallel Stream)的语法糖就像预告片里的新型光剑一样令人兴奋不已.现 ...
- 纯Shading Language绘制飞机火焰效果
上篇<纯Shading Language绘制HTML5时钟>体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫效果的特点,今天我们将用纯Shading Language绘制火焰 ...