JavaScript performance optimization [inline cache] V8 engine features

Time:2021-8-20

javascriptIs a single threaded, dynamically typed language, so how do we write code with the best performance when coding? This will be explained belowV8Inline optimization of the engine. Using inline caching, we can write better code.

What is inline caching

Quote the official description: inline caching is an optimization technology adopted by the runtime system of some programming languages. It was first developed for Smalltalk. The goal of inline caching is toRemember that you were directly at the call pointThe results of the method query on to speed up the speed of runtime method binding. Inline caching is particularly useful for dynamically typed languages, where most (if not all) method bindings occur at run time, so virtual method tables are usually unavailable.

  • We can understand that every time JavaScript stack execution encounters the call of external functions and objects, the address cache record will be generated. When the next execution reaches this position, the corresponding record will be directly taken from the cache, eliminating the process of re searching, so as to speed up the execution of the program.

Convert to code

Analog computing logic (pseudo code)

In order to better optimize the inline cache, we logically align all methods of the object.

        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
            }
        }
Code that does not use inline optimization policies
function notOptimization(val, type) {
            Calculator[type] (VAL) // dynamic execution function, the current point cannot determine the address.
        }

        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')

The above code uses hash to quickly find the corresponding function, but abandons the inline cache strategy. Code execution results for 5 times, with an average of about 80ms
JavaScript performance optimization [inline cache] V8 engine features

Use inline cache policy code
        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')

This code uses multiple layers of if else to make function calls (switch or array should be used correctly to optimize the inline cache strategy). Let’s take a look at the results of five executions, with a speed of 55 ~ 50ms
JavaScript performance optimization [inline cache] V8 engine features

To sum up, we try to minimize the use of dynamic call operations in the coding process, but the method of obtaining hash and array relative to object attribute values is much faster than if and switch