Javascript优化技巧(文件瘦身篇) |
本文标签:Javascript,优化,技巧 最近一直在研究 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 左右的 。 |