Javascript性能優化【內聯緩存】 V8引擎特性

javascript 是單線程、動態類型語言，那麼咱們在編碼時候如何編寫性能最優代碼呢？下面將講解 V8引擎的內聯優化。利用內聯緩存這個特性咱們能夠編寫更加優秀的代碼。

什麼是內聯緩存

引用官方的描述：內聯緩存（Inline caching）是部分編程語言的運行時系統採用的優化技術，最先爲Smalltalk開發。內聯緩存的目標是經過記住之前直接在調用點上方法查詢的結果來加快運行時方法綁定的速度。內聯緩存對動態類型語言尤其有用，其中大多數（如非所有）方法綁定發生在運行時，所以虛方法表一般沒法使用。

• 咱們能夠理解爲javascript每一次的棧執行遇到調用外部函數、對象時候都產生地址緩存記錄，下回執行到這個位置時候直接從緩存中取出對應記錄，省去從新查找這一過程從加快程序執行速度。

轉換成代碼

模擬計算邏輯（僞代碼）

爲了更好提現出現內聯緩存的優化，咱們把對象全部方法邏輯爲一致。

let value = 0
        const Calculator = {
            add1(val) {
                value += val
            },
            add2(val) {
                value += val
            },
            add3(val) {
                value += val
            },
            add4(val) {
                value += val
            },
            add5(val) {
                value += val
            },
            add6(val) {
                value += val
            },
            add7(val) {
                value += val
            },
            add8(val) {
                value += val
            },
            add9(val) {
                value += val
            },
            add10(val) {
                value += val
            }
        }

不實用內聯優化策略的代碼

function notOptimization(val, type) {
            Calculator[type](val) // 動態執行函數，當前調點沒法肯定地址
        }

        const CalculatorKey = Object.keys(Calculator)

        console.time('notOptimization')
        for(let i = 0; i < 1000000; i ++) {
            const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]
            notOptimization(1, key)
        }
        console.timeEnd('notOptimization')

上面這段代碼使用哈希快速查找對應函數，可是放棄內聯緩存策略。代碼5次執行結果，平均爲80ms左右

使用內聯緩存策略代碼

function optimization(val, type) {
            if (type === 'add1')
                Calculator.add1(val)
            else if (type === 'add2')
                Calculator.add2(val)
            else if (type === 'add3')
                Calculator.add3(val)
            else if (type === 'add4')
                Calculator.add4(val)
            else if (type === 'add5')
                Calculator.add5(val)
            else if (type === 'add6')
                Calculator.add6(val)
            else if (type === 'add7')
                Calculator.add7(val)
            else if (type === 'add8')
                Calculator.add8(val)
            else if (type === 'add9')
                Calculator.add9(val)
            else
                Calculator.add10(val)
        }
        const CalculatorKey = Object.keys(Calculator)

       console.time('optimization')
       for(let i = 0; i < 1000000; i ++) {
           const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]
           optimization(1, key)
       }
       console.timeEnd('optimization')

這段代碼用了多層if else 進行函數調用（爲了提現內聯緩存策略的優化，正確應該用switch或數組查找），咱們看看執行5次結果，速度爲55～50ms

總結，因此在編碼過程咱們儘可能少使用動態調用運算，可是相對對象屬性值獲取哈希、數組的方式是遠遠快於if、switch的