js性能優化之--數據訪問選取

在javascript裏有4種數據存儲的方式：

直接量：僅表示本身，不存儲於某特定的位置，沒有指向

變量：js中使用var關鍵字建立並存儲信息

數組：具備數字索引，存儲一個數組對象

對象：具備字符串索引，存儲一個js對象

在代碼中訪問數據都會形成必定的操做負擔，毋庸置疑，電腦的每一次操做都會佔用性能

而對於4中存儲的訪問照成的性能負擔都是有差別的

如下使用一張圖表表示對不用數據類型進行200000次讀操做的時間（引用自《高性能的javascript》）

儘管不能表明所有，但整體來講，經過這些數據能夠發現，

在訪問直接量和變量的時候所耗費的性能會遠遠低於訪問數組和對象所耗費的性能，

因此，咱們在寫js程序的時候，能夠使用直接量和變量的就不要使用數組和對象存儲，

一小段js也許看不出什麼差別，但一整個程序下來，能夠挽回的性能就不是一個小數了

 

做用域優化：

做用域是javascript中的一個重要的知識點，懂的此處可忽略往下看，是每個javascript開發者都應該掌握的

先來看一個例子：

var a="hellow"
function a(){
    var a = "world"
}
console.log(a)        //hellow

以上程序打印出來的是「hellow」，相信全部人都看得出來這個結果

但是，有沒有想過這是爲何？

這裏面就涉及了做用域的問題

當js開始運行時，會有一個全局執行環境通常指向window對象

每個函數都已一個本身的執行環境，每一個執行環境都有一個與之關聯的變量對象

當執行流進入該執行環境時，該執行環境的變量對象將處於激活狀態並創建該執行環境下的做用域鏈，當函數執行完後執行環境銷燬

當前的執行環境對象將處於做用域鏈的最前端

以上打印出來的hellow是由於console.log(a)處於全局執行環境下，做用域鏈中找不到函數中的變量

一樣的，若是在a方法中執行打印，則會打印出world，這是由於做用域鏈是從前端開始逐級搜索，當在a的執行環境下搜索到該變量後

便中止了繼續搜索，因此才找到了world這個結果，而hellow這個結果在做用域鏈的後面，被忽略

以上的說法比較含糊，沒必要較真，這裏是想說關於做用域的優化，略過

OK，淺淺理解了下做用域，接着聊

當進入一個執行環境後

每次js引擎對做用域鏈的逐級搜索都會耗費必定的性能

因此，咱們在編碼的時候要注意的是，儘可能讓須要的值或對象放在該執行環境下做用域的最前沿

一個好的經驗法則是：用局部變量存儲本地範圍以外的變量值，若是它們在函數中的使用多於一次（高性能的javascript）

var ui = "ui";
function UI(){
    console.log(ui+"是誰");
    console.log(ui+"是alex");
}UI();

如以上的代碼

UI函數執行流程：

第一個console.log

先搜索當前執行環境對象，找不到ui值，繼續往做用域上級搜索

找到window對象，發現ui值，搜索結束

第二個console.log

先搜索當前執行環境對象，找不到ui值，繼續往做用域上級搜索

找到window對象，發現ui值，搜索結束

函數結束

經過做用域的知識，咱們能夠對這個函數進行優化：

var ui = "ui";
function UI(){
    var copy = ui;
    console.log(copy +"是誰");
    console.log(copy +"是alex");
}UI();

UI函數執行流程：

賦值，

先搜索當前執行環境對象，找不到ui值，繼續往做用域上級搜索

找到window對象，發現ui值，搜索結束，進行賦值操做

第一個console.log

先搜索當前執行環境對象，找到copy值，搜索結束

第二個console.log

先搜索當前執行環境對象，找到copy值，搜索結束

優化結束

當一個函數中須要大量使用到執行環境以外的對象數據時，使用這種方式將節省大量的性能損耗

 

 

不對之處請指正

 

我的原創，轉載請註明來源

 

博客：http://www.cnblogs.com/alex-web/

 

注：小瘋紙的yy