编写高性能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代里一直存在.有些对象本质是静态的,生命周期从它们被创建开始,到程序停止才会结束.其它对 ...
随机推荐
- Oracle 11g系列:数据库
1.创建Oracle数据库 创建Oracle数据库的最常用工具为Database Configuration Assistant(数据库配置助手),依次选择[开始]|[所有程序]|[Oracle-Or ...
- hibernate(四)ID生成策略
一.ID生成策略配置 1.ID生成方式在xml中配置方式: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping P ...
- Android属性动画之ValueAnimation
ValueAnimation是ObjectAnimation类的父类,经过前几天的介绍,相信大家对ObjectAnimation有了 一定的认识,今天就为大家最后介绍一下ValueAnimation, ...
- 邻接矩阵有向图(一)之 C语言详解
本章介绍邻接矩阵有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实 ...
- C/C++定义全局变量/常量几种方法的区别
在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块): 在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK ER ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- JQuery实现仿sina新浪微博新鲜事滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 谷歌插件Image downloader开发之 content script
自己运营了一个公众号,在发文章的时候,需要在网上找一些图,而有些网站的图片可能隐藏在属性或者背景图中,要下载的时候经常审查元素,查看源码,不太方便,最近在看一些谷歌插件的api,便顺手做了一个插件Im ...
- html/css基础篇——关于浏览器window、document、html、body高度的探究
首先说明本人所理解的这几个元素的计算 window高度应当是文档所在窗口的可视高度(没有包括浏览器的滚动条),计算方法document.documentElement.clientHeight doc ...
- Windows Server 2012上PHP运行环境搭建的简易教程(Win08适用)
微软的Windows Server 2012发布后,第一时间进行了简单的试用,非常不错,特写了个简易的PHP环境搭建教程.先来欣赏下Win2012的登录界面吧第一步我们需要安装IIS81.点击任务栏最 ...