身為前端工程師，對於javascript大家都不陌生，這篇文章從更深層的方向－JS引擎去理解javascript到底是怎麼運作的，從而進行最佳化。
JS Engine—— JS 引擎介紹
一、基本介紹
##js引擎是專門運行javascript的解釋器(interpreter)。目前比較主流的js 引擎和介紹，大家可以簡單了解一下：
JS Code—— Talk is cheap
#看到這，你一定會想，我知道這有啥用，Talk is cheap，有沒有程式碼可以分析的。那麼大家請看以下範例程式碼，透過分析程式碼後，我再詳細介紹其中的原理範例程式碼一：
// first case
var a = {}
var b = {}
console.time()
for (let k = 0; k < 9999999; k++) {
a[k] = 0
}
for (let i = 0; i < 9999999; i++) {
b[i] = 0
}
console.timeEnd()
// second case
var a = {}
var b = {}
console.time()
for (let k = 0; k < 9999999; k++) {
a[k] = 0
}
for (let i = 10000000; i < 19999999; i++) {
b[i] = 0
}
console.timeEnd()
// third case
var a = {}
var b = {}
console.time()
for (let k = 0; k < 9999999; k++) {
a[k] = 0
}
for (let i = 9999999; i < 0; i--) {
b[i] = 0
}
console.timeEnd()V8 Engine —— Hidden Class
我們知道，js是動態腳本語言，什麼意思呢，就是你可以很簡單的給object添加/刪除屬性，或改變其類型，大部分的js解釋器(interpreter)使用字典結構，在記憶體中儲存變數屬性值的位址，這種方式比起java和C#(非動態語言，當然了C#的dynamic類型另當別論，不在此贅述)要低效率的多，因為js的類型是可以隨時轉換的，本來使用字典結構結合固定的類型進行判斷，可以較容易的找到變數屬性值的位置，而在js中就難以實現了。 所以V8引擎就用了一個高效率的方法叫做Hidden Class。其他的引擎也有類似的方法，有叫Map的, Structures的,Hidden Class的等等，在這裡我們用Shape來定義它，這樣方便大家理解。 當我們定義一個object的時候，它會包含以下內容：那麼，當我們為object新增屬性的時候呢？ V8引擎會根據類別過渡（class transition）原理創建新的shape來標記位置，如下圖
也就是說，我們創建了3個shape，透過過渡鏈(transition chain)來實作一個object的追溯。
看到這裡，大家肯定在想，每多一個shape肯定就會多佔用一塊內存，那麼我為了優化的話，盡量在初始化的時候把屬性都定義好就能優化了，Bingo~我們可以參考下圖來驗證：
#透過以上的原理解釋，相信大家肯定能夠推算解釋出，我們的範例程式碼的執行速度的區別了。
First Case:
1. Shape (empty) for a和b
2. Shape 1....9999999 for a
3. Shape 1 ....9999999 for b
a和b都共用了相同的shape，可以重複使用
Second Case:
1. Shape (empty) for a和b
2. Shape 1....9999999 for a
3. Shape 10000000....19999999 for b
#一共定義了1 到199999999的shape，那麼second case肯定##時間要比first case要花多一倍的時間了
Thrid Case:
#1. Shape (empty) for a和b
2. Shape 1... .9999999 for a
3. Shape 9999999 ....1 for b
源碼：https://github.com/likeconan/Alipay_Wechat_Integration
更多JavaScript知識請關注PHP中文網js特效大全欄位。
以上是理解並優化javascript程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
