论坛首页 Web前端技术论坛

Javascript代码优化

浏览 4157 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (3) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-11-14  
   在看Nicholas C.Zakas写的曹力等翻译的javascript高级程序设计时学习到了一些javascript优化的方法特记录下来。希望大家讨论。
(一) 下载时间
   Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内。这个因素会增加下载时间。1160是一个TCP-IP包中的字节数。最好能将每个javascript文件都保持在1160字节以下以获得最优的下载时间。
   由于这个原因,要删除注释、删除制表符和空格、删除所有的换行、将长变量名缩短。
遵循这4条比较困难。因此用外部程序(ECMAScript Cruncher)来帮助我们。
   其他减少字节数的方法还有几个。
     1.因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。
例如:

var bFound = false;
 for(var i=0;i< aTest.length&&!bFound;i++)
{
	if(aTest[i]==vTest)
{
	bFounde = true;
}
}

	var bFound = 0;
 for(var i=0;i< aTest.length&&!bFound;i++)
{
	if(aTest[i]==vTest)
{
	bFounde = 1;
}
}


这两段代码运行方式完全相同,而后者节省了7个字节。
       2.缩短否定检测
       代码中常常会出现检测某个值是否满足条件。而大部分作的判断某个变量是否为undefined 、null 、false。可以用逻辑非来简化判断。例如

if(oTest != undefined)
{
		//do someting
}
if(oTest != null)
{
		//do someting
}
if(oTest != false)
{
		//do someting
}


以上代码可以替换成

if(!oTest)
{
		//do something
}



为什么可以替换呢?因为逻辑非操作在遇到undefined 、null 、false时返回true这样做可以节省很多字节。
        3.定义数组、对象时候的技巧
var oTest  = new Array;
var oTest = [];
是等价的。
var oTest = new Object;
var oTest = {};
是等价的
(二) 执行时间
    我们可以做一些简单的事情提高javascript性能。我觉得也是编写javascript的一些技巧。
        1.关注范围
        书中的范围我理解为作用域。
        在javascript中默认的范围是window。在window范围中创建的变量旨在页面从浏览器卸载后才会销毁。在函数中创建的变量只在函数中的范围内有效。函数执行后就销毁。在引用变量时,javascript解释程序在最近的范围内查找,如果没有救灾上一层次中查找。直到window范围。如果window中也找不到。则出现错误。本地范围内的变量比全局变量执行起来要更快。
提高javascript执行速度可以有下面几种方法
          A.使用局部变量。
          在函数中总是用var来定义变量。如果直接使用变量而不在函数中定义,则变量会创建在window范围内。也就是说执行函数遇到该变量时,javascirpt程序就会按层次到最上层才会查找到该变量。
不要这样:

function xxx()
{
	name=”abc”;
alert(name);
}


             B. 避免with语句
             范围越少执行速度越快。
alert(document.title);;
alert(document.body.tagName);;
alert(document.location);

可以替换成

with(document)
{
	alert(title);;
alert(body.tagName);;
alert(location);
}


这的确缩短了程序的长度,但是减少代码不能弥补损失的性能。为什么呢?
因为:使用with语句时要强制解释程序不仅要在范围内查找局部变量。还强制检测每个变量及指定的对象,看其是否为特性。因为也可以在函数中定义变量title或者location。
          2.Javascript陷阱
            A. 避免多字符串用+号连接
            多字符串连接最好用StringBuffer对象。该对象封装了Array用join()方法进行连接字符串。
            B.优先使用内置方法
Js提供了相当丰富的内置方法可以充分利用
            C.存储常用的值
多次使用同一个值时,可以将其存储在局部变量中提高访问速度。
          3.减少语句数量
          例如:
var iFive=5;
var sColor=&rdquo;blue&rdquo;

可以替换成
var iFive=5,sColor=&rdquo;blue&rdquo;;
		另外
		var sName=aValues[i];
		i++;
		可以替换成
		var sName=aValues[i++];

另外可以用json来代替对象定义。
           4.节约使用DOM
           DOM处理算是javascript中最耗时的操作之一。解决这个问题的方法是尽可能对不在DOM文档中的元素进行DOM操作。
这里要学会使用文档碎片对象即document.createDocumentFragment()。



   发表时间:2008-11-14  
晕,好好的做事去吧,没有必要做这样的“优化”。

如果真的在意js的大小,可以找一些混淆工具来压缩,把便量都替换为a1/a2这样。另外启用zip流压缩效果更加,一般压缩比大于4:1
0 请登录后投票
   发表时间:2008-11-14  
1.无论有效与否,多了解一些优化技巧可以加深对某种语言工作原理的认识.
2.我觉得好的编程习惯就是最好的优化技巧.
0 请登录后投票
   发表时间:2008-11-14  
joachimz 写道
晕,好好的做事去吧,没有必要做这样的“优化”。

如果真的在意js的大小,可以找一些混淆工具来压缩,把便量都替换为a1/a2这样。另外启用zip流压缩效果更加,一般压缩比大于4:1

其实很多都是js的编程技巧,在我们编码过程中可以方便快捷的使用。不是件美好的事情吗。
0 请登录后投票
   发表时间:2008-11-14  
其实楼主的建议还是蛮有意义的,javascript本来已经够慢的了,能提高即使一点点的效率对程序来讲都是莫大的好处

每个人的编程习惯不一样,比如我,即使知道 with 关键字的作用也一次都没使用过,汗。。。

不过有一点不太同意:“ 1.因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。”
我觉得给代码瘦身应该在发布环节,而不应该在开发环节,开发的时候还是力求代码逻辑性和可读性,像 true 用 1 来代替实在不可取,在这个基础上再写出一些 sophisticated 的语句未尝不是件开心的事
0 请登录后投票
   发表时间:2008-11-15   最后修改:2008-11-15
春风不识字,何故乱抄书。
0 请登录后投票
   发表时间:2008-11-16  
很少人写 xxx == true 或者 xxx != false 这样。。。最近讨论X刚的热帖里有提到这个问题。

虽然在js中稍有不同,我有时也写 xxx === true 以确保类型正确,但是不会没事写很多行这样的代码。

就算要改短,也最好改为 t/f (var t=true,f=false),保留点可读性。

with在当前的浏览器实现中其实并不一定会降低性能,相反有可能提高性能。理论上with确实增加了优化的难度,但是问题是现在的浏览器根本没做这种优化,所以with的问题不在于性能,而在于误用with会造成一些难以排除的bug隐患。with的使用需要小心。

StringBuffer在ie以外的浏览器上并不会提高性能。

其他还有些问题,不述。
0 请登录后投票
   发表时间:2008-11-17   最后修改:2008-11-17
hax 写道
很少人写 xxx == true 或者 xxx != false 这样。。。最近讨论X刚的热帖里有提到这个问题。

虽然在js中稍有不同,我有时也写 xxx === true 以确保类型正确,但是不会没事写很多行这样的代码。

就算要改短,也最好改为 t/f (var t=true,f=false),保留点可读性。

with在当前的浏览器实现中其实并不一定会降低性能,相反有可能提高性能。理论上with确实增加了优化的难度,但是问题是现在的浏览器根本没做这种优化,所以with的问题不在于性能,而在于误用with会造成一些难以排除的bug隐患。with的使用需要小心。

StringBuffer在ie以外的浏览器上并不会提高性能。

其他还有些问题,不述。


== !=  都是转换类型后比较
=== !== 不转换类型进行比较
function aa(){
	var sN = "55";		
	var iNs = 55;
	alert(sN==iNs);
	alert(sN===iNs);
}


关于with有什么理由说他提高了js性能呢?请说明一下好吗?我也是看书得知with是影响性能的一个因素,作者从js解释执行的角度来分析with用法我觉得的确有道理。
0 请登录后投票
   发表时间:2008-11-19  
js中总是有变量lookup的过程,显然我们知道这是一个链。在obj.prop的情况下,走的prototype链,在localVar的情况下,走的是scope链。with无非是将一个obj追加到了scope链的顶部。当with的obj本身不存在深度prototype链,且with中的语句主要访问的都是obj上的属性时,其性能自然并不会下降反而有可能上升。

诚然,with导致了无法进行真正的lexical scope的静态分析,因为如果经过了静态分析,根本不需要进行namespace的lookup,效率自然就高。但是现在主流浏览器没有一个js引擎做了这种优化。所以谈不上with的问题。相反,如果是actionscript之类的要进行编译的情况,就会受到with的拖累。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics