Performance – Reflection rendering in IE8

I encountered a problem with React webapp in IE8. In the latest versions of Chrome and FF, the performance is very good. But, don’t you know, the client is running IE8 and the application is running Loading view in this browser is very slow, loading time is 4 seconds is normal.
I use IE8 Developer tool (IE8 running in VirtualBox VM) in IE8 to analyze the application.
In the generated call tree , The two code areas occupy an average of 2 seconds each.
Deeply researching these codes, I found React rendering methods, such as mountComponent, mountChildren and createContentMarkup. These calls have a very long tree, and continuous MountComponent calls occupy It took a relatively small amount of time (100-300 ms).

It seems that the composite component added to the view takes a long time to be added to the DOM, which is very exciting for React. Surprised.

Does anyone have experience in the same situation, I am not sure how to proceed, except for removing the added composite components and testing the problem

Thank you for your suggestion

If anyone is reading this, then my only answer is to simplify your components. Use less nested components , Reduce complexity, use state to render content only when needed, and even replace complex components (nested lists) with simple buttons, and display the nested list when the button is clicked (if it makes sense). Most IE8 seems to be unable to handle A lot of React update/rendering/installation code. This simplifies your UI design, for example, the label is not all the information in a view, and reduces the complexity of the component.

I am in IE8 I encountered a problem with React webapp. In the latest version of Chrome and FF, the performance is very good. But, don’t you know, the client runs IE8 and the application loads views in this browser very slowly, the loading time is 4 seconds, normal .
I use IE8 Developer tool (IE8 running in VirtualBox VM) to analyze the application in IE8.
In the generated call tree, the two code areas each take 2 seconds on average.
Digging into these codes, I found React rendering methods, such as mountComponent, mountChildren and createContentMarkup. These calls have a very long The long tree, and the continuous MountComponent call takes relatively little time (100-300 ms).

It seems that the composite component added to the view takes a long time to be added to the DOM This is surprising for React.

Does anyone have experience in the same situation, I am not sure how to proceed, except for removing the added composite components and testing the problem

< p>Thank you for your suggestion

If anyone is reading this, then my only answer is to simplify your components. Use less nested components, lower Complexity, use state to render content only when needed, and even replace complex components (nested lists) with simple buttons, and display the nested list when the button is clicked (if it makes sense). Most IE8 seems to be unable to handle a large number of React updates/renders/installs the code. This simplifies your UI design, for example, tags are not all the information in a view, and reduces the complexity of components.

Leave a Comment

Your email address will not be published.