Benchmark Lightning Locker Effect on JavaScript Code

Benchmark your JavaScript code with and without Lightning Locker and view relative performance metrics.

Benchmarking enables you to see the performance difference with Lightning Locker enabled and disabled, without requiring you to create an app to test your component.

Let’s look at an example where you study the performance of a series of nested loops.

  1. Paste this code into the code console.

  2. Click Benchmark.

    The FASTEST column in the results window shows that the code runs 16.11 times faster when Lightning Locker is disabled. This difference in speed is the cost of security, and whether the performance loss is acceptable depends on each specific case.

    Locker Console benchmark results for JavaScript code with DOM API calls inside nested loops

The benchmark action allows you to tweak your code and see how the change affects running time. This rapid iterative process is useful when you're optimizing computationally intensive sections of the code.

To show how to reduce the overhead of Lightning Locker, let's build the same table using a string of HTML and benchmark to evaluate the difference.

  1. Paste this code into the code console.

  2. Click Benchmark.

    Locker Console benchmark results for JavaScript code without DOM API calls inside loops

Because there are no DOM API calls, such as document.createElement(), inside the loops in this example, the performance of the build() function is similar whether Locker is on or off. The code runs 1.15 times faster when Lightning Locker is disabled, as opposed to 16.11 times faster in the previous example that had multiple DOM API calls.

Plain JavaScript is generally much faster than the DOM API, and the more often a section of code connects to the DOM, the slower the code runs. The DOM API causes most of the Locker overhead. Here, we accelerate the code by reducing the number of times we touch the DOM, which also greatly reduces the overall Locker overhead.

See Also