Javascript优化技巧(文件瘦身篇)


Posted in Javascript onJanuary 28, 2008

最近一直在研究 Javascript 相关的技术。在《Javascript 高级程序设计》有篇章节着重阐述了优化 Javascript 代码的重要性。相信有很多的 Javascript 开发人员在开发的同时或多或少的会接触到此类的问题。

在大部分情况下,代码的优化并不是实际开发中所需要着重的部分。但是一旦代码完成了以后,开发者总是期待自己的代码能够越短越高效越好。结合从书中获得的知识以及本人实际开发过程中的经验,下面说明本人所采取的一些花招(也算是照本宣科一下)。

前言

相比脚本语言,编译型的语言并不需要太关心优化问题。在极大的程度上,编译时编译器都会之行优化操作。比如所有的变量、函数、对象等等都会替换成只有处理器才能理解的符号和指针(就是通常所指的可执行文件)。其他的脚本语言也并不需要过分在意文件的大小问题,但是 Javascript 则不同。
因为它首先要通过从服务器端下载源代码,然后再由客户端的浏览器执行。因此,Javascript代码的速度被分割成两部分:下载时间(取决于文件的大小)和执行速度(取决于代码算法)。这篇主要讨论的是 Javascript的下载时间优化,也就是如何尽可能的缩小 Javascript 文件本身的容量。
在这里要记住的一个数字是 1160,这是能放入单个 TCP/IP 包中的字节数。所以,最好的期望值是能将每个 Javascript 文件保持在 1160 字节一下,以获取最优的下载时间。

删除注释

这似乎是是废话,不过很多开发人员都会忘记。在实际生产环境中,脚本中的注释都应该删除。在开发期间注释相当的重要,它可以帮助团队理解代码。但在实际生产环境中,注释会明显使脚本文件体积变大。删除它们并不会给脚本实际运行带来任何的影响。

删除制表符和空格

具有良好缩进和空格的代码通常都具有良好的可读性。但是浏览器并不需要这些额外的制表符和空格,所以最好删除它们。当然也不要忘记函数参数,赋值语句以及比较操作之间的空格。比如

function showMeTheMoney(money)
{
    if (!money) {
        return false;
    } else {
        ...
    }
}可以优化成

function showMeTheMoney(money){if(!money){reutrn false;}else{...}}

这样可以减少部分容量。

删除所有的换行

有许多关于在 Javascript 中换行应该存在的思考,但底线都是换行要增加代码的可读性。但过分的换行也会造成代码体积的增加。
可能处于某种原因而不能删除换行符,这样则要保证文件是 Unix 格式的。因为 Windows、Mac 格式的换行符用两个字符表示换行;Unix 仅用一个。所以将文件转换成 Unix 格式也可以节约一些字节数。

替换变量名

这可能是最无聊的一种做法,这通常不是手工完成的。毕竟变量的名称对解释器来说毫无意义(只是对开发人员来说会更友好一些),在生产环境中将描述性的变量名替换成更简单、更短的名称也可以缩减一部分体积。比如上述的代码可以缩减成:

function sm(m){if(!m){reutrn false;}else{...}}

这样虽然看起来会比较的头痛,不过实际之行效果是一样的。

使用工具

实际使用上述的方法可能会有一些困难,幸好有现成的外部工具能完成这些步骤。下面简单的介绍几个:
ECMAScript Cruncher:http://saltstorm.net/depo/esc/ 
JSMin(The JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html 
Online JavaScript Compressor.:http://dean.edwards.name/packer/

我猜你会有兴趣看下这篇文章。

其他方法

替换布尔值

对于比较来说,true 就等于 1,false 就等于 0 。因此,脚本包含的字面量 true 都可以用 1 来替换,而 false 可以用 0 来替换。对于 true 节省了 3 个字节,而 false 则节省了 4 个字节。

缩短否定检测

代码中常常会出现检测某个值是否有效的语句。而大部分条件非的判断就是判断某个变量是否为 undefined、null 或者 false,比如:

if (myValue != undefined) {
    // ...
}

if (myValue != null) {
    // ...
}

if (myValue != false) {
    // ...
}

这些虽然都正确,但用逻辑非操作符也可以有同样的效果:

if (!myValue) {
    // ...
}

这样的替换也可以节省一部分字节。

使用数组和对象字面量

这个比较好理解,比如一下两行是相同的:

var myArray = new Array;
var myArray = [];

然而第二行比第一行短很多,而且也能非常容易的理解。类似的还有对象声明:

var myObject = new Object;
var myObject = {};

举个例子,比如下面的语句:

var mySite = new Object;
mySite.author = "feelinglucky";
mySite.location = "http://www.gracecode.com";

这样写也可以非常容易的理解,并且短很多:

var mySite = {author:"feeinglucky", location:"http://www.gracecode.com"};

好的,这期就到这里。就向上面说的,Javascript 代码的速度被分割成两部分:下载时间(取决于文件的大小)和执行速度(取决于代码算法)。这次讨论的是下载时间方面的优化,下期讨论之行速度方面的优化(这样看起来非常有技术含量,不是么)。

下面布置家庭作业。或许大家会有兴趣了解下 jQuery 是怎么把自己 70KB 的代码压缩至 20KB 左右的。

Javascript 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue实现微信分享功能
Nov 28 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 #Javascript
JavaScript 数组的 uniq 方法
Jan 23 #Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 #Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 #Javascript
Javascript 写的简单进度条控件
Jan 22 #Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 #Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 #Javascript
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
JAVA/JSP学习系列之七
2006/10/09 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
学生会主席演讲稿
2014/04/25 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
未婚证明格式
2015/06/15 职场文书
部门主管竞聘书
2015/09/15 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书