多年来,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代码的若干建议的更多相关文章

  1. 编写高性能Javascript

    编写高性能Javascript 多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascr ...

  2. 【JavaScript】【译】编写高性能JavaScript

    英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执 ...

  3. 编写高性能JavaScript【转】

    英文链接:Writing Fast, Memory-Efficient JavaScript 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执 ...

  4. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  5. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  6. Java性能优化之高性能JAVA代码的若干个习惯

    创建对象: 1.避免在循环体中创建对象,循环前应该创建对象,避免浪费更多内存空间和增加GC负担 这种情况在我们的实际应用中经常遇到,而且我们很容易犯类似的错误,例如下面的代码: for (int i ...

  7. [翻译] 编写高性能 .NET 代码--第五章 通用编码与对象设计 -- 类 vs 结构体

    本章介绍了本书其它部分未涉及到的一些编码和设计原则.包含了一些.NET的应用场景,有些不会造成太大危害,有些则会造成明显的问题.剩下的则根据你的使用方法会产生不同的效果.如果要对本章节出现的原则做一个 ...

  8. [翻译] 编写高性能 .NET 代码--第二章 GC -- 减少分配率, 最重要的规则,缩短对象的生命周期,减少对象层次的深度,减少对象之间的引用,避免钉住对象(Pinning)

    减少分配率 这个几乎不用解释,减少了内存的使用量,自然就减少GC回收时的压力,同时降低了内存碎片与CPU的使用量.你可以用一些方法来达到这一目的,但它可能会与其它设计相冲突. 你需要在设计对象时仔细检 ...

  9. [翻译] 编写高性能 .NET 代码--第二章 GC -- 将长生命周期对象和大对象池化

    将长生命周期对象和大对象池化 请记住最开始说的原则:对象要么立即回收要么一直存在.它们要么在0代被回收,要么在2代里一直存在.有些对象本质是静态的,生命周期从它们被创建开始,到程序停止才会结束.其它对 ...

随机推荐

  1. 深入理解PHP内核(八)变量及数据类型-预定义变量

    原文链接:http://www.orlion.ga/249/ PHP脚本在执行的时候用户全局变量(在用户空间显示定义的变量)会保存在一个HashTable数据类型的符号表中(symbol_table) ...

  2. 【.Net底层剖析】3.用IL来理解属性

    .Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 未完待 ...

  3. POJ 2312Battle City(BFS-priority_queue 或者是建图spfa)

    /* bfs搜索!要注意的是点与点的权值是不一样的哦! 空地到空地的步数是1, 空地到墙的步数是2(轰一炮+移过去) 所以用到优先队列进行对当前节点步数的更新! */ #include<iost ...

  4. Chrome 控制台指南

    转自:http://blog.jobbole.com/76985/ Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更 ...

  5. javascript学习笔记(四):事件处理函数和动态创建html标记。

    1 HTML的事件属性  全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发 ...

  6. Windows Azure Active Directory (1) 前言 - 基于声明的验证和授权

    <Windows Azure Platform 系列文章目录> 在我们介绍整套系统架构之前,我们需要首先定义一些基本的概念. 用户及其属性: 用户值得是要使用某项服务的个体.用户一般都有一 ...

  7. 30天C#基础巩固------了解委托,string练习

    ---->了解委托.     生活中的例子:我要打官司,我需要找一个律师,法庭上面律师为当事人辩护,它真正执行的是当事人的陈词,这时律师 就相当于一个委托对象.当事人则委托律师为自己辩解.    ...

  8. Web API应用架构在Winform混合框架中的应用(1)

    在<Web API应用架构设计分析(1)>和<Web API应用架构设计分析(2)>中对WebAPI的架构进行了一定的剖析,在当今移动优先的口号下,传统平台都纷纷开发了属于自己 ...

  9. html5掷骰子的小demo

    代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...

  10. NoSQL数据库介绍

    NoSQL在2010年风生水起,大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.今年伊始,InfoQ中文站有幸邀请到凤凰网的孙立先生,为大家分享他之于N ...