JavaScript代码的速度被分成两部分:下载时间和执行速度。
下载时间
Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内。这个因素会增加下载时间。1160是一个TCP-IP包中的字节数。最好能将每个javascript文件都保持在1160字节以下以获得最优的下载时间。
由于这个原因,要删除注释、删除制表符和空格、删除所有的换行、将长变量名缩短。
遵循这4条比较困难。因此用外部程序(ECMAScript Cruncher)来帮助我们。
要运行ESC,必使用Windows系统,打开一个控制台窗口,然后使用以下格式的命令:
cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile1.js [inputfile2.js]
第一部分,cscript,是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩级别,一个0到4的数值。-ow选项表示下一个参数是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件,可以有多个文件(多个文件在优化后后会按顺序放到输出文件中)。
0 —— 不改变脚本,要将多个文件拿到单个文件中时用用。
1 —— 删除所有的注释。
2 —— 除等级1外,再删除额外的制表符和空格。
3 —— 除等级2外,再删除换行。
4 —— 除等级3外,再进行变量名替换。
ESC擅长把变量名替换成无意义的名称,它还具有一定的智能,进行私有对象先进性和方法名的替换(由名称前后加上两个下划线表示),所以私有特性和方法依然保持其私有性。
ESC不会更改构造函数名、公用属性和公用方法名,所以无需担心。但要注意的是如果某个JavaScript引用了另一个文件中的构造函数,4级优化会把对构造函数的引用替换成无意义的名称。解决方法是将两个文件合成一个文件,这样就会保持构造函数的名称。
其他减少字节数的方法还有几个。
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 = "blue";
可以替换成
var iFive = 5, sColor = "blue";
//另外
var sName = aValues[i];
i++;
//可以替换成
var sName = aValues[i++];
另外可以用json来代替对象定义。
4.节约使用DOM
DOM处理算是javascript中最耗时的操作之一。解决这个问题的方法是尽可能避免对DOM文档中的元素直接进行DOM操作。
这里要学会使用文档碎片对象即document.createDocumentFragment()。
分享到:
相关推荐
JavaScript代码优化一例.pdf
主要介绍了JavaScript异步代码优化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章给大家分享了关于javascript代码优化的8点总结,希望我们整理的内容能够帮助到大家。
NULL 博文链接:https://t240178168.iteye.com/blog/1702269
用 JS 编写的粒子群优化库。适用于RequireJS,来自WebWorker,在node.js或普通浏览器环境中。 示例应用程序 simple优化一维函数的简单应用程序 simple-require和simple一样,除了使用 RequireJS simple-node一个...
下面我们通过这个例子介绍1个更简单的方法: 我们用将统计代码保存到1个文件:文件路径:/config/counter.conf 统计代码如下: 代码如下: [removed] var _gaq = _gaq || []; _gaq.push([‘_setAccount’, ‘UA-18744406-...
javascript 中粒子 群优化 的可视化_javascript _代码_下载
此外,很多程序辛辛苦苦的写出来的javascript代码却被别人随意的剽窃,实为憾事。本软件还可以通过对javascript的变量名称和过程名称进行编码,从而起到混淆ja代码的作用,保护您的劳动成功。 JS代码压缩,基本原理...
JavaScript代码格式化,对凌乱的JavaScript代码进行格式化,保持代码的整洁,挺好用的一个工具,虽然对于一些正则表达式的格式化效果有点不太好,但整体还是比较清晰的,毕竟我们的程序也只有那某个脚本文件是正则吧...
应用jQuery技术优化传统JavaScript代码制作网页块元素悬停功能.pdf
Javascript 代码压缩 网址 : http://julying.com/lab/compress-js-css/ 类型: 原创脚本 作者: 王子墨 邮箱 : i@julying.com 发布 : 2012-06-10 22:28 更新 : 2012-07-22 12:50 版权所有 2012 | julying....
本书介绍了70多种有关优化网页HTML代码的原理与技巧,内容涉及HTML、图像、多媒体、表格、报头、网址、JavaScript、CSS、网站等十个方面的优化问题。相信读者能够利用这些技巧,减少网页的字节数,提高网页的显示...
客户端脚本能让你的应用更加地动态和活跃, 但是浏览器对代码的解析可能造成效率问题, 而这种性能差异在客户端之间也不尽相同。 这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践。
用斐波那契记忆优化法优化递归,提高代码运行效率,这个是JavaScript版
cxVzxvcxvxzcvcxzvcasdA wefcccccccccccccccccccccccccewcccccccccccccccc
前端 每日代码 中级进阶
优化CSS,Javascript代码(Minify+Uglify)以减少带宽占用,提高网页打开速度 教程
第三篇讲解的是JavaScript的高级技术,主要讲解了JavaScript与XML技术、正则表达式、Ajax基础、Ajax高级应用、JavaScript与插件和JavaScript的调试与优化等。最后一篇综合案例篇用一个完整的例子讲解了如何使用...
JS优化_淘宝网.pdf