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.

Example

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

Paste this code into the code console.

1function build(count) {
2    var table = document.createElement("table");
3    for (var contact = 0; contact < count; contact++) {
4        for(var day = 0; day < 7; day++) {
5            var tr = document.createElement("tr");
6            var td = document.createElement("td");
7            td.textContent = contact;
8            tr.appendChild(td);
9            for(var hour = 6; hour < 22; hour++) {
10                td = document.createElement("td");
11                td.className = "officeDivider";
12                tr.appendChild(td);
13
14                td = document.createElement("td");
15                td.className = "officeHourIn";
16                tr.appendChild(td);
17
18                td = document.createElement("td");
19                td.className = "officeHourIn";
20                tr.appendChild(td);
21
22                td = document.createElement("td");
23                td.className = "officeHourIn";
24                tr.appendChild(td);
25
26                td = document.createElement("td");
27                td.className = "officeHourIn";
28                tr.appendChild(td);
29            }
30            table.appendChild(tr);
31        }
32    }
33    return table;
34};
35
36build(10);

Click Benchmark.
The FASTEST column in the results window shows that the code runs 6.5 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.

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.

Example with Improved Performance

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.

Paste this code into the code console.

1function build(count) {
2    var html = "<body>"
3    for (var contact = 0; contact < count; contact++) {
4        for (var day = 0; day < 7; day++) {
5            html += "<td>" + contact + "</td>";
6            for (var hour = 6; hour < 22; hour++) {
7                html += "<td class='officeDivider'></td>";
8                html += "<td class='officeHourIn'></td>";
9                html += "<td class='officeHourIn'></td>";
10                html += "<td class='officeHourIn'></td>";
11                html += "<td class='officeHourIn'></td>";
12            }
13        }
14    }
15    html += "</body>";
16    return html;
17};
18
19var div = document.createElement('div');
20div.innerHTML = build(10);

Click Benchmark.

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.08 times faster when Lightning Locker is disabled, as opposed to 6.5 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.

Lightning Aura Components Developer Guide

Benchmark Lightning Locker Effect on JavaScript Code

Example

Example with Improved Performance

See Also