Javascript優化技巧（文件瘦身篇）
2019-11-21 01:49:09
供稿：網友
最近一直在研究 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 左右的。
