Is ReactJS so fast?
I offer readers of "Habrahabr" a translation of the publication "Is ReactJS really fast?" From the blog of the company 500Tech.
Most developers take it for granted that ReactJS is a super fast engine compared
to other more heavyweight frameworks like AngularJS and EmberJS.
And even the publication of fake results is not suspicious, but if you dig deeper and analyze the test code, you will be very surprised .
We all understand that manipulating the DOM is rather slow. This is where ReactJS went, introducing the new idea of a virtual DOM, which allows all manipulations on virtual objects to be performed, and only the difference in the real tree of browser objects, thereby minimizing the number of queries to the DOM model and thereby speeding up the application.
Intuitively, this approach is perceived as the possibility of a serious performance improvement, but no one thinks about how much performance will affect the execution of sufficiently resource-intensive javascript code to execute this idea.
And it’s also strange that there are no examples of performance improvements when using Virtual-DOM, except for examples of comparison with other frameworks.
We all saw these demos, I propose to consider them more carefully.
This most popular video produced a “wow” effect on the public, the difference in speed is really amazing. Below are links to the original examples used in the video:
- Link to the video
- ReactJS demo
- AngujarJS demo
But if you look at the code, we find that the author did not think to use the basic feature to improve performance in Angular: " track by "
If you just correct one line in the source:
On the:
Then we get the following result:
link
Surprised?
Unfortunately, in Angular, most performance improvement recommendations are poorly documented and not automatically supported. However, even this small change will dramatically fix performance
in 95% of reactJS versus AngularJS benchmark tests .
This presentation also caused a “wow” effect. I advise you to see the end of the presentation, where the phenomenal performance of Angular 2.0 and the subsequent apologies of the speaker are shown:
Here is an example from this presentation: watch
Another problem was discovered here, not in drawing, but in data processing. The ReactJS example explicitly indicated which column had changed, while the AngularJS example said “something has changed”, which led to a double-check of everything.
Disabling the call to redraw all data and leaving only the change check as follows:
Updated to:
We get the following result:
watch
In recent versions of Angular, this is done as follows: $ timeout ([func], [timeout], false);
It turns out that frameworks based on Virtual-DOM do not have the demonstrated speed advantages over conventional frameworks such as AngularJS or EmberJS. The claim that adding ReactJS impurities to an AngularJS application will magically fix performance is not based on actual data, but on
development errors .
Not. ReactJS is a great framework that we use and love at 500Tech. There are many advantages to using reactJS in your next project, but speed is not one of them.
tl; dr; Not.
Most developers take it for granted that ReactJS is a super fast engine compared
to other more heavyweight frameworks like AngularJS and EmberJS.
And even the publication of fake results is not suspicious, but if you dig deeper and analyze the test code, you will be very surprised .
Virtual-dom
We all understand that manipulating the DOM is rather slow. This is where ReactJS went, introducing the new idea of a virtual DOM, which allows all manipulations on virtual objects to be performed, and only the difference in the real tree of browser objects, thereby minimizing the number of queries to the DOM model and thereby speeding up the application.
Intuitively, this approach is perceived as the possibility of a serious performance improvement, but no one thinks about how much performance will affect the execution of sufficiently resource-intensive javascript code to execute this idea.
And it’s also strange that there are no examples of performance improvements when using Virtual-DOM, except for examples of comparison with other frameworks.
We all saw these demos, I propose to consider them more carefully.
React.js Conf 2015
This most popular video produced a “wow” effect on the public, the difference in speed is really amazing. Below are links to the original examples used in the video:
- Link to the video
- ReactJS demo
- AngujarJS demo
But if you look at the code, we find that the author did not think to use the basic feature to improve performance in Angular: " track by "
If you just correct one line in the source:
ng-repeat="(key, db) in databases"
On the:
ng-repeat="(key, db) in databases track by key"
Then we get the following result:
link
Surprised?
Unfortunately, in Angular, most performance improvement recommendations are poorly documented and not automatically supported. However, even this small change will dramatically fix performance
in 95% of reactJS versus AngularJS benchmark tests .
Let's analyze another popular presentation
This presentation also caused a “wow” effect. I advise you to see the end of the presentation, where the phenomenal performance of Angular 2.0 and the subsequent apologies of the speaker are shown:
Here is an example from this presentation: watch
Another problem was discovered here, not in drawing, but in data processing. The ReactJS example explicitly indicated which column had changed, while the AngularJS example said “something has changed”, which led to a double-check of everything.
Disabling the call to redraw all data and leaving only the change check as follows:
$timeout(function() {
$scope.status.isSearching = false;
$scope.status.searchResults = ...
Updated to:
setTimeout(function() {
$scope.status.isSearching = false;
$scope.status.searchResults = ...
$scope.$digest();
We get the following result:
watch
In recent versions of Angular, this is done as follows: $ timeout ([func], [timeout], false);
What is the result?
It turns out that frameworks based on Virtual-DOM do not have the demonstrated speed advantages over conventional frameworks such as AngularJS or EmberJS. The claim that adding ReactJS impurities to an AngularJS application will magically fix performance is not based on actual data, but on
development errors .
Is ReactJS Bad?
Not. ReactJS is a great framework that we use and love at 500Tech. There are many advantages to using reactJS in your next project, but speed is not one of them.