Performance issues can always be an unexpected gotcha when developing your latest and greatest web 2.0 application, and a lot of times performance problems surface through the most benign of operations. Recently Coach Wei has taken the task of doing a quick study of the cost of many different Javascript operations as well as the differences in performance across browsers. The results aren't really all too surprising.
As expected, eval is still evil, performing very slowly on all browsers. Of particular interest though is that eval doesn't seem to fair as bad on Safari, taking only 9.4ns as opposed to 172ns and 546ns on IE7 and Firefox, respectively. Shift and Join array operations are a drag on all browsers.
An interesting point result that stuck out, as expected, IE tends to fare worse than other browsers when it comes to performance, especially in crucial areas such as computed box model calculations, String manipulation, and HTML DOM operations. Also of interest (which we've seen before) is that DOM operations in general are costly across all browser versions, although newer releases have seen some improvement. However, using innerHTML still seems to outperform the equivalent DOM manipulation that would be needed to accomplish the same task.
Other notable aspects of the study:
- Safari's pop array operation is signiffently slower than other browser implementations
- calculating computed style and computed box model can be expensive... the guess is that this cost is due to properties on currentStyle being recalculated on each call
- object creation and the “in” operation seem to run slower on Firefox than in other browsers
The table of his results are worth a look, and may provide some guidance in debugging performance bottlenecks of your own.
/filters:no_upscale()/sponsorship/topic/25afca57-6bcb-4c42-9a70-fbea10ce4fc7/MicrosoftLogoRSB-1678874949003.png)
/articles/open-source-java-profilers/en/smallimage/unleash-power-of-open-source-java-profilers-small-1681206807197.jpg)
/articles/rapid-startup-of-your-cloud-native-java/en/smallimage/logo-1680293937095.jpg){kind=logo}
/presentations/java-compiler-intermediate-representation/en/smallimage/chris_seaton-s-1679038354209.jpg)
/presentations/jfr-observability/en/smallimage/Ben Evans-s-1675024642432.jpg)
/articles/graalvm-java-compilers-openjdk/en/smallimage/small-image-jdk-2023-1671096273181.jpg)
/articles/java-jvm-trends-2022/en/smallimage/InfoQ-Trends-Report-small-1670863712433.jpeg)
/minibooks/jhipster-mini-book-7/en/smallimage/logo-1677849630224.jpg){kind=logo}
/articles/qworum-modular-ui-architecture/en/smallimage/logo-1677607675773.jpg){kind=logo}
/presentations/module-federation/en/smallimage/Zack Jackson-s-1675669107665.jpg)
/articles/gdpr-with-spring-and-aop/en/smallimage/easy-implementation-of-GDPR-with-aspect-oriented-programming-small-1684505109873.jpg)
/articles/rmi-to-websocket/en/smallimage/migrate-a-RMI-based-legacy-application-to-WebSocket-small-1680106723513.jpg)
/articles/billions-messages-minute/en/smallimage/LOGO-1679471830613.jpg){kind=logo}
/articles/series-apache-kafka-streams/en/smallimage/apache-kafka-article-series-logo-small-1673455781546.jpg){kind=logo}
/articles/secure-kafka-cluster-strimzi/en/smallimage/securing-a-kafka-cluster-in-kubernetes-using-strimzi-small-1671647644310.jpg)
/minibooks/2022-infoq-trends-reports/en/smallimage/LOGO-1672051527011.jpg){kind=logo}
/presentations/lyft-cd-benefits-challenges/en/smallimage/tom-wanielista-small-1685002834068.jpg)
/presentations/green-software-growth/en/smallimage/Marco-Valtas-small-1685609473905.jpg)
/articles/test-automation-ci-cd/en/smallimage/effective-test-automation-approaches-for-modern-CI-CD-pipelines-small-1685355310638.jpg)
Community comments
Might be good to modularize JS benchmarking
by Porter Woodward,
innerHTML -vs- appendChild
by Peter Wagener,
Might be good to modularize JS benchmarking
by Porter Woodward,
Your message is awaiting moderation. Thank you for participating in the discussion.
It occurs to me as I read these JS benchmarks (there was another one just a couple of months ago) that there needs to be some modularization of the benchmarking.
1> Core. Standard JS tasks like string and array manipulations. JS that can be run anywhere, inside a browser, via an external interpreter, etc. With scripting coming to both the CLR, and JVM - as well as external interpreters already out there - it might be handy to baseline browsers against external implementations.
2> DOM. Depending on whether this can be broken into two approaches it'd probably be beneficial to disentangle Visual from non-visual manipulation of the DOM. Just because we add elements to a tree, or manipulate elements of the tree doesn't mean we want to see it rendered on the page right away. In any case that would allow the separation of the rendering performance from the back-end.
3> DOM/Visual. Turn rendering on. Just because we want to know how fast the back end is - it won't matter much if the front end renderer is hideously slow. While not strictly a JS test - it is important for helping to determine overall user experience (also note it's irrelevant to JS implementations outside a browser).
4> I/O. Again, while not strictly a JS performance issue I/O affects overall user experience. Being able to make XMLHTTPRequests - and other I/O calls and getting an idea of their performance will probably tell more about the HTTP and networking implementation of a browser and OS combo than anything else (and can we make XMLHTTPReqs from Rhino, etc.?). But as these are fairly critical to AJAX apps - making requests, caching results, etc - it might be nice to understand their performance characteristics.
Just my $0.02
innerHTML -vs- appendChild
by Peter Wagener,
Your message is awaiting moderation. Thank you for participating in the discussion.
Virtually all the JS performance studies we've seen in the past few years have shown two things consistently:
1. node.innerHTML = "Some Text" is faster than node.appendChild(someTextNode)
2. IE is incredibly slow at string manipulation... especially large string concatenation.
Taking the above into account, has anyone built a large-scale JS application where they have been able to use 'innerHTML' to build up the DOM tree, and been able to avoid long string concatenation? I'm curious how other folks solved this conundrum.
In my experience, I haven't been able to do so. As a result, I've built most of the applications using DOM operations. The code usually comes out cleaner & more manageable as well.
Any other experiences?