本文是閱讀Writing Fast, Memory-Efficient JavaScript后的總結(jié)和筆記皮服，不是嚴(yán)格意義上的翻譯拱撵，如果有時(shí)間拧略，推薦閱讀原文篓冲。
原則
不要做任何優(yōu)化除非的確需要優(yōu)化
任何的性能優(yōu)化都必須以測(cè)量數(shù)據(jù)為基礎(chǔ)李破，如果你懷疑代碼存在性能問題宠哄，首先通過測(cè)試來驗(yàn)證你的想法。
性能優(yōu)化三問
- 我還能做哪些工作從而讓代碼變得更有效率嗤攻？
- 流行的JavaScript引擎通常會(huì)做哪些優(yōu)化工作毛嫉？
- 哪些優(yōu)化是JavaScript引擎不能做的，垃圾回收器是否能清理我們期望清理的妇菱？
對(duì)JavaScript引擎的深入了解有助于我們編寫高效的JavaScript代碼承粤，但不要只針對(duì)某一特定引擎做性能優(yōu)化。
V8的幾個(gè)關(guān)鍵概念
- 基礎(chǔ)編譯器闯团，解析你的JavaScript代碼并生成Native Machine Code執(zhí)行辛臊，而不是執(zhí)行字節(jié)碼或是直接對(duì)JavaScript解釋執(zhí)行。
- 在V8中房交，對(duì)象以object model的形式存在彻舰。對(duì)象在JavaScript中是以關(guān)聯(lián)數(shù)組的形式存在，但V8采用的是Hidden Classes——一種對(duì)查找操作進(jìn)行了優(yōu)化的內(nèi)部類型系統(tǒng)涌萤。
- 運(yùn)行時(shí)探查器監(jiān)視運(yùn)行中的系統(tǒng)淹遵，并識(shí)別出Hot functions，即是耗用了較長(zhǎng)時(shí)間的代碼
- 優(yōu)化編譯器重新編譯并優(yōu)化由運(yùn)行時(shí)探查器識(shí)別出來的Hot代碼
- V8支持反優(yōu)化负溪，優(yōu)化編譯器能夠發(fā)現(xiàn)過度優(yōu)化的代碼并對(duì)其進(jìn)行處理
- V8有自己的垃圾回收器
垃圾回收
垃圾回收是一種內(nèi)存管理機(jī)制透揣，垃圾回收器會(huì)嘗試清理掉不再被使用的對(duì)象，并回收內(nèi)存川抡。
- 在絕大多數(shù)情況下都不需要手動(dòng)解除引用
- 你不可能強(qiáng)制垃圾回收器工作
刪除引用的誤區(qū)
盡可能不要使用delete辐真，在下面的列子中，delete 帶來的弊遠(yuǎn)遠(yuǎn)大于利
var o = { x: 1};
delete o.x;
主要的原因是為了避免在運(yùn)行時(shí)修改Hot對(duì)象的結(jié)構(gòu)崖堤，因?yàn)楣潭ǖ膶?duì)象結(jié)構(gòu)有助于JavaScript引擎對(duì)其進(jìn)行優(yōu)化侍咱，而delete會(huì)導(dǎo)致對(duì)象結(jié)構(gòu)改變
另外一個(gè)誤區(qū)是將對(duì)象設(shè)置為null，將對(duì)象設(shè)置為null不會(huì)刪除對(duì)象密幔，只是將對(duì)象指向null楔脯，這要好過采用delete，但通常也是不必要的胯甩。
全局變量在整個(gè)頁面生命周期中都是不會(huì)被清理的昧廷，無論頁面打開多長(zhǎng)時(shí)間，除非是刷新頁面或者轉(zhuǎn)到其他頁面偎箫。局部變量(Function-scoped)在方法執(zhí)行完后木柬，且沒有被引用的情況下將會(huì)被回收。
所以淹办，請(qǐng)盡量避免使用全局變量
經(jīng)驗(yàn)法則
為了使垃圾回收器盡早回收對(duì)象眉枕，不要保持不必要的對(duì)象引用
- 比手動(dòng)解除引用更好的方法是將對(duì)象放在合適的變量域中，能用局部變量就不要采用全局變量
- 當(dāng)事件監(jiān)聽不再需要時(shí)，請(qǐng)解除事件綁定速挑，尤其是當(dāng)事件綁定的DOM對(duì)象被刪除時(shí)
- 如果有使用本地緩存谤牡，請(qǐng)確保有合適的清理機(jī)制（比如時(shí)效機(jī)制），從而避免大量無用的數(shù)據(jù)存儲(chǔ)梗摇。
方法 (Function)
如前面所說拓哟，垃圾回收器只有在對(duì)象不可觸及的時(shí)候才會(huì)對(duì)其做回收處理×媸冢考慮如下兩個(gè)列子
function foo(){
var bar = new LargeObject()
bar.someCall();
}
function foo(){
var bar = new LargeObject()
bar.someCall();
return bar;
}
var b = foo();
在第一個(gè)例子中断序，bar指向的對(duì)象會(huì)在方法執(zhí)行完畢后處于可回收狀態(tài)；在第二個(gè)列子中糜烹，由于在局部變量外維護(hù)了一個(gè)全局變量b违诗，bar指向的對(duì)象無法被回收。
閉包 (Closures)
當(dāng)一個(gè)方法返回一個(gè)內(nèi)部方法時(shí)疮蹦，被返回的內(nèi)部方法能訪問外部方法的局部變量域即使外部方法已經(jīng)執(zhí)行完畢诸迟。
function sum(x){
function sumIt(y){
return x + y;
}
}
var sumA = sum(4);
var sumB = sumA(3);
在上面的例子中，sumIt方法即使處于sum的局部變量域中愕乎，但由于存在一個(gè)sumA全局變量阵苇，在sum執(zhí)行完畢后也無法被回收。
再看兩個(gè)例子
var a = function(){
var largeObj = new LargeObject();
return function(){
return largeObj;
}
}();
var a = function(){
var smallObj = new SmallObj();
var largeObj = new LargeObj();
return function(n){
return smallObj;
}
}();
第一個(gè)例子中感论，largeObj可以通過變量a訪問绅项，因此不可被回收；在第二個(gè)例子中比肄，方法一旦執(zhí)行完畢快耿，largeObj就無法被訪問了，因此處于可回收狀態(tài)芳绩。
定時(shí)器 (Timer)
在setTimeout / setInterval 方法中的引用掀亥，只有當(dāng)定時(shí)器執(zhí)行完成后才能被回收
V8優(yōu)化小貼士
某些行為會(huì)導(dǎo)致V8停止優(yōu)化工作，比如try-catch, 為了能弄清哪些代碼可以被優(yōu)化妥色，哪些不能搪花，你可以在V8命令行工具中使用
—trace-opt file.js獲得有用的信息。-
如果你在意速度嘹害，那就盡可能保證你的方法是”單形的（monomophic）"
不要做類似如下的嘗試
function add(x, y){ return x+y; } add(1,2); add('a','b'); add(my_custom_object, undefined); 不要加載沒有被初始化或者已被刪除的元素鳍侣，盡管在輸出上沒有不同，但卻會(huì)讓代碼變得更慢
不要寫大方法吼拥，因?yàn)樗麄兒茈y被優(yōu)化。
對(duì)象還是數(shù)組线衫， 如何選擇凿可？
如果存儲(chǔ)的是大量數(shù)字，或者是相同類型的對(duì)象列表，采用數(shù)組枯跑；
如果根據(jù)語義你需要一個(gè)有很多屬性的對(duì)象惨驶，那就采用對(duì)象，在內(nèi)存利用方面這會(huì)很高效敛助，同時(shí)也很快粗卜；
-
無論是數(shù)組還是對(duì)象，采用整數(shù)索引都最快的纳击。
var sum = 0; for (var x=0; x<arr.length; ++x){ sum + = arr[x].payload; }var sum = 0; for(var x in obj){ sum += obj[x].payload; }var sum = 0; for(var x=0; x<1000,++x){ sum += obj[x].payload; }var sum = 0; var keys = Objects.keys(obj); for(var x=0; x<keys.length;++x){ sum += obj[keys[x]].payload; }在上面的四段代碼中续扔，第一段和第三段速度比第二段和第四段要快很多。其中焕数，第一段代碼執(zhí)行最快纱昧，最后一段代碼執(zhí)行最慢。
相比數(shù)組中的元素堡赔，對(duì)象的屬性在結(jié)構(gòu)上相對(duì)復(fù)雜识脆。在引擎層面，內(nèi)存中越是簡(jiǎn)單的結(jié)構(gòu)越容易被優(yōu)化善已，尤其是包含數(shù)字的數(shù)組灼捂。因此，如果你需要向量换团，采用數(shù)組而不是一個(gè)包含x, y, z屬性的對(duì)象會(huì)有更優(yōu)的性能表現(xiàn)悉稠。
在JavaScript中，數(shù)組和對(duì)象最重要的不同是數(shù)組的length屬性啥寇，如果你能自己維護(hù)這個(gè)值偎球，對(duì)象在V8中也能跑出數(shù)組的速度。
使用對(duì)象的性能小貼士
- 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象辑甜，因?yàn)樗胁捎猛粯?gòu)造函數(shù)創(chuàng)建的對(duì)象都具有相同的hidden class衰絮，另外，采用構(gòu)造函數(shù)創(chuàng)建對(duì)象也比
Object.create()這種方法略塊磷醋。 - 盡管JavaScript沒有限制類型數(shù)量和對(duì)象的復(fù)雜度猫牡，但長(zhǎng)原型鏈和大量的對(duì)象屬性會(huì)對(duì)性能造成損害。因此盡可能保持較短的原型鏈和較少的對(duì)象屬性邓线。
對(duì)象的拷貝
for..in循環(huán)是性能殺手淌友，通過該方法遍歷對(duì)象屬性進(jìn)行拷貝非常低效『С拢拷貝大對(duì)象始終會(huì)降低性能震庭，盡可能不要干這樣的事情，當(dāng)然大對(duì)象的存在本身就是一個(gè)錯(cuò)誤你雌。如果你確實(shí)需要在性能攸關(guān)的代碼中拷貝對(duì)象器联，可以采用如下的方式二汛。
function clone(original){
this.foo = original.foo;
this.bar = original.bar;
}
var copy = new clone(original);
緩存采用模塊化編程（Module Pattern）的方法
// prototypal
Klass1 = function(){}
Klass1.prototype.foo = function(){
log('foo');
}
Klass1.prototype.bar = function(){
log('bar');
}
// Module pattern
Klass2 = function(){
var foo = function(){
log('foo');
}
var bar = function(){
log('bar');
}
return {foo:foo,bar:bar}
}
// Module pattern with cached functions
var fooFn = function(){
log('foo');
}
var barFn = function(){
log('bar')
}
Klass3 = function(){
return{
foo: fooFn,
bar: barFn
}
}
執(zhí)行速度從快到慢依次是
Module Pattern with Cached functions → prototypal → Module pattern
使用數(shù)組的性能小貼士
- 不要?jiǎng)h除數(shù)組元素，當(dāng)數(shù)組的Key set分布分散后拨拓，V8會(huì)將存儲(chǔ)方式轉(zhuǎn)為字典肴颊，導(dǎo)致速度變慢。
- 數(shù)組常量更高效渣磷，尤其是小數(shù)組和中等大小的數(shù)組婿着。
var a = [1, 2, 3, 4]
var a = [];
for(var i=1, i<=4; i++){
a.push(i);
}
不要采用第二段代碼中的方法初始化數(shù)組。
- 不要在數(shù)組中存儲(chǔ)不同類型的元素
- V8中醋界，稀疏數(shù)組( Sparse Arrays)是被當(dāng)成字典對(duì)待的竟宋，因此相比密集數(shù)組(Full Arrays)，執(zhí)行速度更慢
- 與緊湊的數(shù)組相比物独，滿身是洞的數(shù)組執(zhí)行更慢袜硫，即使是從密集數(shù)組中刪除一個(gè)元素，也會(huì)帶來性能上的損失挡篓。
- 不要預(yù)先給大數(shù)組（大于64k）分配一個(gè)最大值
var arr = [];
for(var i = 0; i< 1000000; i++){
arr[i] = 1;
}
var arr = new Array(1000000);
for(var i=0; i<1000000; i++){
arr[i]=i;
}
需要注意的是婉陷，不同引擎在這一點(diǎn)上有不同，在Nitro(Safari）中官研，第二段代碼跑得更快秽澳，但在V8(Chrome), SpiderMonkey(Firefox)中，第一段更快戏羽。
