擁抱Javascript效能

作者：李麗媛

郵件：lly219#gmail.com

 

前言

在涉及JavaScript效能最佳化之前想和大家探討一
下：過早最佳化

Donald
Knuth
曾經說過：“過早最佳化是萬惡之源”（Premature optimization is the root of all
evil
）。

在他的論文——Structured
Programming with go to Statements
中，他寫到"編程者花費大量的時間去思考，擔心，他們程式中並不佔關鍵部
分的效率問題，然而這些在debugging和考慮程式維護的實際中有著很強的負面影響。我們應該忘記小的效率所帶來的影響，比如說97%的時間：過早優
化是萬惡之源。"
也就是說我們不應該錯過關鍵的3%，一個好的程式員不會花大量的時間在如何提高並不佔關鍵區段的效能效率，他所關注的是關鍵區段
的代碼；但這通常在代碼確定後。
簡而言之就是說：過早關注不重要的部分，而忽略行動和目標本身。以靜態思維來最佳化，殊不知，事務發展總是動態
的，“最佳化”是需要長期的實
踐積累才可以獲得。出發點是好的，但往往好心辦壞事，折騰大量的時間，做了很多不該做的，而該做的、重要的反而沒做。強化外部條件、工具等外在，而忽略內
在因素和行動本身，或者，過多期望將來，而忽略當下眼前。

“DO NOT, EVER, OPTIMIZE PREMATURELT!”

 

本文

1.避免函數調用

function methodCall(){
  
 function square(n){ return n*n };
    var i=10000, sum = 0;
  
 while(i-‐) sum += square(i);
}

function inlinedMethod(){
  
 var i=10000, sum = 0;
    while(i-‐) sum += i*i;
}

註：在IE8中methodCall()將在1s後彈出警告框：A script on
this page is causing Internet Explorer to run slowly.If it continues to
run, your computer might become unrespensive.

2.擁抱語言

2.1

function
literals(){
    var a = [], o = {};
}
function classic(){
  
 var a = new Array, o = new Object;
}

2.2

parseInt(12.5);

~~(1
* "12.5")

3迴圈

3.1

var test =
'';
for (var i = 0;i<10000;i++)
    test = test + str;

var
test = '', i = 10000;
while(i--) test = test + str;

 

3.2

function normalLoop(){
var
i=60, j=0;
while(i-‐) j++;
}

function unrolledLoop(){
var
j=0;
j++; j++; j++; j++; j++; j++;
j++; j++; j++; j++; j++; j++;
j++;
j++; j++; j++; j++; j++;
j++; j++; j++; j++; j++; j++;
j++; j++;
j++; j++; j++; j++;
j++; j++; j++; j++; j++; j++;
j++; j++; j++;
j++; j++; j++;
j++; j++; j++; j++; j++; j++;
j++; j++; j++; j++;
j++; j++;
j++; j++; j++; j++; j++; j++;
}

4全域 cache

function
uncached(){
var i = 10000;
while(i-‐) window.test = 'test';
}

function
cached(){
var w = window, i = 10000;
while(i-‐) w.test =
'test';

5運算式交換

var b = false, n = 99;
function(){
return
n*n && b;
}

function(){
return b && n*n;
}

6不需要使用的部分

6.1

function(){
var
obj = { prop: 'test', str: '' };
    with(obj){
    var i =
10000;
    while(i-‐) str += prop;
        return str;
  
 }
}
function(){
var obj = { prop: 'test', str: '' }, i =
10000;
while(i-‐) obj.str += obj.prop;
return obj.str;
}

6.2

var a = 0;
function(){
  
 try{
        a += 1;
    } catch(e) {}
}

function(){
  
 a += 1;
}

參考文獻：


《Extreme
JavaScript Performance》

http://c2.com/cgi/wiki?PrematureOptimization

http://www.watch-life.net/life-thinking/no-premature-optimization.html

http://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf

 

轉載請註明作者資訊和出處，Thx

：)