高效編寫JavaScript代碼的技巧

如何能高效的編寫出優秀的JavaScript代碼，有哪些技巧?下面YJBYS小編為你介紹!

　　原則

不要做任何優化除非的確需要優化

任何的性能優化都必須以測量數據為基礎，如果你懷疑代碼存在性能問題，首先通過測試來驗證你的想法。

　　性能優化三問

我還能做哪些工作從而讓代碼變得更有效率?

流行的JavaScript引擎通常會做哪些優化工作?

哪些優化是JavaScript引擎不能做的，垃圾回收器是否能清理我們期望清理的?

對JavaScript引擎的深入瞭解有助於我們編寫高效的JavaScript代碼，但不要只針對某一特定引擎做性能優化。

　　V8的幾個關鍵概念

基礎編譯器，解析你的JavaScript代碼並生成Native Machine Code執行，而不是執行字節碼或是直接對JavaScript解釋執行。

在V8中，對象以object model的形式存在。對象在JavaScript中是以關聯數組的形式存在，但V8採用的是Hidden

Classes——一種對查找操作進行了優化的內部類型系統。

運行時探查器監視運行中的系統，並識別出Hot functions，即是耗用了較長時間的代碼

優化編譯器重新編譯並優化由運行時探查器識別出來的Hot代碼

V8支持反優化，優化編譯器能夠發現過度優化的`代碼並對其進行處理

　　V8有自己的垃圾回收器

垃圾回收垃圾回收是一種內存管理機制，垃圾回收器會嘗試清理掉不再被使用的對象，並回收內存。

在絕大多數情況下都不需要手動解除引用

你不可能強制垃圾回收器工作

　　刪除引用的誤區

儘可能不要使用delete，在下面的列子中，delete 帶來的弊遠遠大於利

var o = { x: 1};delete o.x;

主要的原因是為了避免在運行時修改Hot對象的結構，因為固定的對象結構有助於JavaScript引擎對其進行優化，而delete會導致對象結構改變。

另外一個誤區是將對象設置為null，將對象設置為null不會刪除對象，只是將對象指向null，這要好過採用delete，但通常也是不必要的。

全局變量在整個頁面生命週期中都是不會被清理的，無論頁面打開多長時間，除非是刷新頁面或者轉到其他頁面。局部變量(Function-scoped)在方法執行完後，且沒有被引用的情況下將會被回收。

所以，請儘量避免使用全局變量。

經驗法則為了使垃圾回收器儘早回收對象，不要保持不必要的對象引用。

比手動解除引用更好的方法是將對象放在合適的變量域中，能用局部變量就不要採用全局變量

當事件監聽不再需要時，請解除事件綁定，尤其是當事件綁定的DOM對象被刪除時

如果有使用本地緩存，請確保有合適的清理機制(比如時效機制)，從而避免大量無用的數據存儲。

　　方法 (Function)

如前面所説，垃圾回收器只有在對象不可觸及的時候才會對其做回收處理。考慮如下兩個列子：

function foo(){

var bar = new LargeObject()

Call();}

function foo(){

var bar = new LargeObject()

Call();

return bar;}var b = foo();

在第一個例子中，bar指向的對象會在方法執行完畢後處於可回收狀態;在第二個列子中，由於在局部變量外維護了一個全局變量b，bar指向的對象無法被回收。

　　閉包 (Closures)

當一個方法返回一個內部方法時，被返回的內部方法能訪問外部方法的局部變量域即使外部方法已經執行完畢。

function sum(x){

function sumIt(y){

return x + y;

}}var sumA = sum(4);var sumB = sumA(3);

在上面的例子中，sumIt方法即使處於sum的局部變量域中，但由於存在一個sumA全局變量，在sum執行完畢後也無法被回收。再看兩個例子

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;

}}();

第一個例子中，largeObj可以通過變量a訪問，因此不可被回收;在第二個例子中，方法一旦執行完畢，largeObj就無法被訪問了，因此處於可回收狀態。

定時器 (Timer)在setTimeout / setInterval方法中的引用，只有當定時器執行完成後才能被回收。

　　V8優化小貼士

某些行為會導致V8停止優化工作，比如try-catch,為了能弄清哪些代碼可以被優化，哪些不能，你可以在V8命令行工具中使用—trace-opt 獲得有用的信息。

如果你在意速度，那就儘可能保證你的方法是”單形的(monomophic)"

不要做類似如下的嘗試

function add(x, y){

return x+y;}add(1,2);add('a','b');add(my_custom_object, undefined);

不要加載沒有被初始化或者已被刪除的元素，儘管在輸出上沒有不同，但卻會讓代碼變得更慢

不要寫大方法，因為他們很難被優化。

　　對象還是數組， 如何選擇?

如果存儲的是大量數字，或者是相同類型的對象列表，採用數組;

如果根據語義你需要一個有很多屬性的對象，那就採用對象，在內存利用方面這會很高效，同時也很快;

無論是數組還是對象，採用整數索引都最快的。

var sum = 0;for (var x=0; x

sum + = arr[x]oad;}

var sum = 0;for(var x in obj){

sum += obj[x]oad;}

var sum = 0;for(var x=0; x<1000,++x){

sum += obj[x]oad;}

var sum = 0;var keys = (obj);for(var x=0; x

sum += obj[keys[x]]oad;}

在上面的四段代碼中，第一段和第三段速度比第二段和第四段要快很多。其中，第一段代碼執行最快，最後一段代碼執行最慢。

相比數組中的元素，對象的屬性在結構上相對複雜。在引擎層面，內存中越是簡單的結構越容易被優化，尤其是包含數字的數組。因此，如果你需要向量，採用數組而不是一個包含x,y, z屬性的對象會有更優的性能表現。