Performance Issue in Object Cloning using JSON.parse(JSON.stringify()) on safari and firefox

[Omerisra6]

The core.js package is used by WordPress and many WordPress plugins. The Elementor drag-and-drop page builder is the most popular WordPress plugin, used by over 15 million active websites.

Elementor uses JSON.parse( JSON.stringify( object ) ) to clone objects. However, our users report significant performance issues on Safari and FireFox browsers. Our performance team confirmed that the loading time on Chrome is faster compared to Safari and FireFox.

This happens because in our particular use case, we had 10 functions using object cloning with JSON.parse( JSON.stringify( object ) ). We managed to reduce the usage by replacing the code with structuredClone( object ). However we couldn't replace all the occurrences as structuredClone() doesn't accept methods. Using alternative solutions to deep clone objects either increased loading time or had no effect.

This problem appears to be associated with the following commit: 08ceeb1

We discussed with WordPress core developers, and they suggested opening a ticket at core.js repo to optimize JSON.parse( JSON.stringify( object ) ) for non-Chrome browsers.

[zloirock]

As you can see in the mentioned commit, it's caused by a polyfill of JSON.parse source text access. In Chromium it's supported natively, but, sure, it causes overhead (in some cases - significant) in engines where polyfilling is required.

Since it's a stage 3 proposal, most likely, it will be supported in the actual versions of browsers in some months and they will not have this overhead.

It's still a ES proposal, so you could load only polyfills for stable ES or you could exclude those modules.

Also, you could propose some changes that will increase performance, however, this overhead cannot be completely eliminated.