LWCs cause 10-20 seconds of lag populating a small amount of elements on the page
I have an LWC template like this:
<input list="counties">
I load the county records from the server. There are about 3,000 of them. When the counties are loaded and the template updates, it hangs the entire page for 10-20 seconds.
This is a fairly small amount of elements to insert into the DOM.
- Why are LWCs so slow when updating the DOM? What about them under the hood makes this such an inefficient operation?
- How can I speed this up, so that my autocomplete input can be populated by accurate information without hanging the entire page for 20 seconds?
It's not LWCS, actually, but rather Locker Service that's causing the problem.
I created a pure LWCS as a baseline without Locker Service interfering.
This runs in a fraction of a second, much less than 10 seconds or more; the page may take a second or two to compile the code, but the actual page execution is incredibly quick.
This has been a known issue since pretty much the beginning of Locker Service (API v40.0), such as this example.
You can avoid this problem by making sure the data isn't proxied. This can mean either copying the data beforehand, or passing in a single JSON string and then parsing it in connectedCallback() or a setter method, depending on if you need reactivity (see example in the second link, above).
The "under the hood" problem is that the entire array has to pass through a filter callback every time you use an index operator, so 3,000 elements becomes at least 9,000,000 callbacks, you can see the result. Once you copy the data out so it's no longer caught in this filter trap, everything runs blazingly fast.
I've heard that salesforce.com is aware of the problem, but we don't yet have a timeline for a fix. Stay tuned.