今天偶看了一篇文章,感觉比较经典,大家分享一下。外加本人的评论。
原文内容如下,由于原文有一些错误,本人已更正。
在看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;
- }
- }
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)
- {
-
- }
- if(oTest != null)
- {
-
- }
- if(oTest != 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);
- }
function xxx()
{
name=”abc”;
alert(name);
}
B. 避免with语句
范围越少执行速度越快。
- alert(document.title);;
- alert(document.body.tagName);;
- alert(document.location);
alert(document.title);;
alert(document.body.tagName);;
alert(document.location);
可以替换成
- with(document)
- {
- alert(title);;
- alert(body.tagName);;
- alert(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=”blue”
var iFive=5;
var sColor=”blue”
可以替换成
- var iFive=5,sColor=”blue”;
- 另外
- var sName=aValues[i];
- i++;
- 可以替换成
- var sName=aValues[i++];
var iFive=5,sColor=”blue”;
另外
var sName=aValues[i];
i++;
可以替换成
var sName=aValues[i++];
另外可以用json来代替对象定义。
4.节约使用DOM
DOM处理算是javascript中最耗时的操作之一。解决这个问题的方法是尽可能对不在DOM文档中的元素进行DOM操作。
这里要学会使用文档碎片对象即document.createDocumentFragment()。
本人感觉有俩点,需要特别注意点。一是代码的多少,二是代码的加载速度。比如我们用with,它的确减少了代码数,但却加长了代码执行时间。具体开发要在俩者之间权衡。
对于代码优化,我可以根据此文,推出PHP,JSP,ASP等,大致是雷同的。只不过这篇针对的是javascript,以后本人会慢慢的弄点好东东。给大家分享。
阅读(1566) | 评论(0) | 转发(0) |