摘要：也就是說(shuō)避免屬性查找或其他的操作。簡(jiǎn)化循環(huán)體循環(huán)體是執(zhí)行最多的，所以要確保其被最大限度地優(yōu)化。代碼組織組織代碼要考慮到可維護(hù)性并不一定是傳送給瀏覽器的最好方式。

如果說(shuō)代碼是可維護(hù)的，它需要遵循以下特點(diǎn)

可理解性——其他人可以接手代碼并理解它的意圖和一般途徑，而無(wú)需原開(kāi)發(fā)人員的完整解釋。

直觀性——代碼中的東西一看就能明白，不管其操作過(guò)程多么復(fù)雜。

可適應(yīng)性——代碼以一種數(shù)據(jù)上的變化不要求完全重寫(xiě)的方法撰寫(xiě)。

可擴(kuò)展性——在代碼架構(gòu)上已考慮到在未來(lái)允許對(duì)核心功能進(jìn)行擴(kuò)展

可調(diào)試性——當(dāng)有地方出錯(cuò)時(shí)，代碼可以給予你足夠的信息來(lái)盡可能直接地確定問(wèn)題所在。

可讀性大部分內(nèi)容和代碼的縮進(jìn)相關(guān)，當(dāng)所有人使用一樣的縮進(jìn)方式時(shí)，整個(gè)項(xiàng)目的代碼都會(huì)更加易于閱讀

可讀性的另一方面是注釋，下面內(nèi)容需要進(jìn)行注釋

函數(shù)和方法——每個(gè)函數(shù)或方法都應(yīng)該包含一個(gè)注釋，描述其目的和用于完成任務(wù)所可能使用的算法。陳述事先的假設(shè)也非常重要，如參數(shù)代表什么，函數(shù)是否有返回值（因?yàn)檫@不能從函數(shù)定義中推斷出來(lái)）。

大段代碼——用于完成單個(gè)任務(wù)的多行代碼應(yīng)該在前面放一個(gè)描述任務(wù)的注釋。

復(fù)雜的算法——如果使用了一種獨(dú)特的方式解決某個(gè)問(wèn)題，則要在注釋中解釋你是如何做的。這不僅僅可以幫助其他瀏覽你代碼的人，也能在下次你自己查閱代碼的時(shí)候幫助理解。

Hack——因?yàn)榇嬖跒g覽器差異，JavaScript 代碼一般會(huì)包含一些 hack。不要假設(shè)其他人在看代碼的時(shí)候能夠理解 hack 所要應(yīng)付的瀏覽器問(wèn)題。如果因?yàn)槟撤N瀏覽器無(wú)法使用普通的方法，所以你需要用一些不同的方法，那么請(qǐng)將這些信息放在注釋中。這樣可以減少出現(xiàn)這種情況的可能性：有人偶然看到你的 hack，然后“修正”了它，最后重新引入了你本來(lái)修正了的錯(cuò)誤。

命名規(guī)則

變量名應(yīng)為名詞如 car 或 person 。

函數(shù)名應(yīng)該以動(dòng)詞開(kāi)始，如 getName() 。返回布爾類型值的函數(shù)一般以 is 開(kāi)頭，如isEnable() 。

變量和函數(shù)都應(yīng)使用合乎邏輯的名字，不要擔(dān)心長(zhǎng)度。長(zhǎng)度問(wèn)題可以通過(guò)后處理和壓縮來(lái)緩解

三種表示變量數(shù)據(jù)類型的方式

初始化

//通過(guò)初始化指定變量類型
var found = false; //布爾型
var count = -1; //數(shù)字
var name = ""; //字符串
var person = null; //對(duì)象

使用匈牙利標(biāo)記法

//用于指定數(shù)據(jù)類型的匈牙利標(biāo)記法
var bFound; //布爾型
var iCount; //整數(shù)
var sName; //字符串
var oPerson; //對(duì)象

使用類型注釋

//用于指定類型的類型注釋
var found /*:Boolean*/ = false;
var count /*:int*/ = 10;
var name /*:String*/ = "Nicholas";
var person /*:Object*/ = null

幾條規(guī)則

勿將 event 對(duì)象傳給其他方法；只傳來(lái)自 event 對(duì)象中所需的數(shù)據(jù)；

任何可以在應(yīng)用層面的動(dòng)作都應(yīng)該可以在不執(zhí)行任何事件處理程序的情況下進(jìn)行；

任何事件處理程序都應(yīng)該處理事件，然后將處理轉(zhuǎn)交給應(yīng)用邏輯

不要為實(shí)例或原型添加屬性；

不要為實(shí)例或原型添加方法；

不要重定義已存在的方法。

創(chuàng)建包含所需功能的新對(duì)象，并用它與相關(guān)對(duì)象進(jìn)行交互；

創(chuàng)建自定義類型，繼承需要進(jìn)行修改的類型。然后可以為自定義類型添加額外功能。

//兩個(gè)全局量——避免??！
var name = "Nicholas";
function sayName(){
alert(name);
}
//一個(gè)全局量——推薦
var MyApplication = {
name: "Nicholas",
sayName: function(){
  alert(this.name);
}
}

function sortArray(values){
if (values != null){ //避免！
  values.sort(comparator);
}
}
function sortArray(values){
if (values instanceof Array){ // 推薦
  values.sort(comparator);
}
}

如果看到了與null比較的代碼，嘗試使用以下技術(shù)替換

如果值應(yīng)為一個(gè)引用類型，使用 instanceof 操作符檢查其構(gòu)造函數(shù)；

如果值應(yīng)為一個(gè)基本類型，使用 typeof 檢查其類型；

如果是希望對(duì)象包含某個(gè)特定的方法名，則使用 typeof 操作符確保指定名字的方法存在于對(duì)象上。

var Constants = {
INVALID_VALUE_MSG: "Invalid value!",
INVALID_VALUE_URL: "/errors/invalid.php"
};
function validate(value){
if (!value){
  alert(Constants.INVALID_VALUE_MSG);
  location.href = Constants.INVALID_VALUE_URL;
}
}

function updateUI(){
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  imgs[i].title = document.title + " image " + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "Update complete.";
}
//改進(jìn)
function updateUI(){
var doc = document;
var imgs = doc.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  imgs[i].title = doc.title + " image " + i;
}
var msg = doc.getElementById("msg");
msg.innerHTML = "Update complete.";
}

function updateBody(){
with(document.body){
  alert(tagName);
  innerHTML = "Hello world!";
}
}
//改進(jìn)
function updateBody(){
var body = document.body
alert(body.tagName);
body.innerHTML = "Hello world!";
}

減值迭代——大多數(shù)循環(huán)使用一個(gè)從 0 開(kāi)始、增加到某個(gè)特定值的迭代器。在很多情況下，從最大值開(kāi)始，在循環(huán)中不斷減值的迭代器更加高效。

簡(jiǎn)化終止條件——由于每次循環(huán)過(guò)程都會(huì)計(jì)算終止條件，所以必須保證它盡可能快。也就是說(shuō)避免屬性查找或其他 O(n)的操作。

簡(jiǎn)化循環(huán)體——循環(huán)體是執(zhí)行最多的，所以要確保其被最大限度地優(yōu)化。確保沒(méi)有某些可以被很容易移出循環(huán)的密集計(jì)算。

使用后測(cè)試循環(huán)——最常用 for 循環(huán)和 while 循環(huán)都是前測(cè)試循環(huán)。而如 do-while 這種后測(cè)試循環(huán)，可以避免最初終止條件的計(jì)算，因此運(yùn)行更快

//credit: Speed Up Your Site (New Riders, 2003)
var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var i = 0;
if (leftover > 0){
do {
  process(values[i++]);
} while (--leftover > 0);
}
do {
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
} while (--iterations > 0);

//某些代碼求值——避免!!
eval("alert("Hello world!")");
//創(chuàng)建新函數(shù)——避免!!
var sayHi = new Function("alert("Hello world!")");
//設(shè)置超時(shí)——避免!!
setTimeout("alert("Hello world!")", 500);
//已修正
alert("Hello world!");
//創(chuàng)建新函數(shù)——已修正
var sayHi = function(){
alert("Hello world!");
};
//設(shè)置一個(gè)超時(shí)——已修正
setTimeout(function(){
alert("Hello world!");
}, 500);

原生方法較快——只要有可能，使用原生方法而不是自己用 JavaScript 重寫(xiě)一個(gè)。原生方法是用諸如 C/C++之類的編譯型語(yǔ)言寫(xiě)出來(lái)的，所以要比 JavaScript 的快很多很多。JavaScript 中最容易被忘記的就是可以在 Math 對(duì)象中找到的復(fù)雜的數(shù)學(xué)運(yùn)算；這些方法要比任何用 JavaScript 寫(xiě)的同樣方法如正弦、余弦快的多。

Switch 語(yǔ)句較快 —— 如果有一系列復(fù)雜的 if-else 語(yǔ)句，可以轉(zhuǎn)換成單個(gè) switch 語(yǔ)句則可以得到更快的代碼。還可以通過(guò)將 case 語(yǔ)句按照最可能的到最不可能的順序進(jìn)行組織，來(lái)進(jìn)一步優(yōu)化 switch 語(yǔ)句。

位運(yùn)算符較快 —— 當(dāng)進(jìn)行數(shù)學(xué)運(yùn)算的時(shí)候，位運(yùn)算操作要比任何布爾運(yùn)算或者算數(shù)運(yùn)算快。選擇性地用位運(yùn)算替換算數(shù)運(yùn)算可以極大提升復(fù)雜計(jì)算的性能。諸如取模，邏輯與和邏輯或都可以考慮用位運(yùn)算來(lái)替換

//4 個(gè)語(yǔ)句 —— 很浪費(fèi)
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date()
//改進(jìn)
//一個(gè)語(yǔ)句
var count = 5,
  color = "blue",
  values = [1,2,3],
  now = new Date()

var name = values[i];
i++;
//改進(jìn)
var name = values[i++];

//用 4 個(gè)語(yǔ)句創(chuàng)建和初始化數(shù)組——浪費(fèi)
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//用 4 個(gè)語(yǔ)句創(chuàng)建和初始化對(duì)象——浪費(fèi)
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.sayName = function(){
alert(this.name);
};
//改進(jìn)
//只用一條語(yǔ)句創(chuàng)建和初始化數(shù)組
var values = [123, 456, 789];
//只用一條語(yǔ)句創(chuàng)建和初始化對(duì)象
var person = {
name : "Nicholas",
age : 29,
sayName : function(){
  alert(this.name);
}
};

var list = document.getElementById("myList"),
  fragment = document.createDocumentFragment(),
  item,
  i;
for (i=0; i < 10; i++) {
item = document.createElement("li");
fragment.appendChild(item);
item.appendChild(document.createTextNode("Item " + i));
}
list.appendChild(fragment);

var list = document.getElementById("myList"),
  html = "",
  i;
for (i=0; i < 10; i++) {
html += "
Item " + i + "
";
}
list.innerHTML = html;

var images = document.getElementsByTagName("img"),
  image,
  i, len;
for (i=0, len=images.length; i < len; i++){
image = images[i];
//處理
}

寫(xiě)的代碼不應(yīng)該原封不動(dòng)地放入瀏覽器中

知識(shí)產(chǎn)權(quán)問(wèn)題 —— 如果把帶有完整注釋的代碼放到線上，那別人就更容易知道你的意圖，對(duì)它再利用，并且可能找到安全漏洞。

文件大小 —— 書(shū)寫(xiě)代碼要保證容易閱讀，才能更好地維護(hù)，但是這對(duì)于性能是不利的。瀏覽器并不能從額外的空白字符或者是冗長(zhǎng)的函數(shù)名和變量名中獲得什么好處。

代碼組織 —— 組織代碼要考慮到可維護(hù)性并不一定是傳送給瀏覽器的最好方式。

JSLint可以查找JavaScript代碼中語(yǔ)法錯(cuò)誤以及常見(jiàn)的編碼錯(cuò)誤，可以發(fā)掘潛在問(wèn)題

eval() 的使用；

未聲明變量的使用；

遺漏的分號(hào)；

不恰當(dāng)?shù)膿Q行；

錯(cuò)誤的逗號(hào)使用；

語(yǔ)句周圍遺漏的括號(hào)；

switch 分支語(yǔ)句中遺漏的 break ；

重復(fù)聲明的變量；

with 的使用；

錯(cuò)誤使用的等號(hào)（替代了雙等號(hào)或三等號(hào)）；

無(wú)法到達(dá)的代碼。

刪除額外的空白（包括換行）；

刪除所有注釋；

縮短變量名。

對(duì)于 Apache Web服務(wù)器，有兩個(gè)模塊可以進(jìn)行 HTTP壓縮： mod_gzip （Apache1.3.x）和 mod_deflate（Apache 2.0.x）。對(duì)于 mod_gzip ，可以給 httpd.conf 文件或者是 .htacces s文件添加以下代碼啟用對(duì)JavaScript的自動(dòng)壓縮：

告訴 mod_zip 要包含任何以.js 結(jié)尾的文件
mod_gzip_item_include file .js$