Microsoft Internet Explorer 11 Performance Issues Due to CSS Style Calculations

Liferay Support does not recommend or endorse specific third-party products over others. Liferay is not responsible for any instructions herein or referenced regarding these products. Any implementation of these principles is the responsibility of the subscriber.

This article documents performance limitations when using Internet Explorer 11 (IE11) to view a page—with high levels of content displayed—on Liferay DXP 7.0. This is most evident if the content has lots of CSS. The issue is multiple style recalculations which then caused the performance issues.

Resolution

To demonstrate:

1. Start DXP 7.0
2. Navigate to Content → Web Content.
3. Create a Web Content article with some CSS for additional formatting. For example, if the article contains a link, use a different background color when there is a mouseOver over the link:

   <style type="text/css">
   
   a:hover {
   	background-color: yellow;
   	
   }
   </style>
   

4. Publish the article. Thus, when the article is displayed on any browser, the background color is changed to yellow if the mouse is hovering over the link.
5. View the article on IE11.
6. Click the Tools icon → F12 Developer Tools.
7. Go to the Performance tab.
8. Create a profile that shows the DOM events logged when mousing over or scrolling up and down the page while clicking on different parts of the page.

It should show that the CSS Styles were recalculated several times by comparison to other similar browsers' performance metrics. The root issue is how IE11 processes CSS selectors. The more complex the page, the more noticeable the performance issues are.

Moreover, Microsoft also recognizes that its browsers take too much time to render a page with too many CSS rules. See this blog post for more information about benchmarks.

There is little that Liferay Support can do to resolve this issue because it concerns how Microsoft IE11 and Edge renders and calculates CSS styles.

Additional Information

For more information on how to use the Developer Tools, see the Microsoft Edge Performance documentation. 

For similar issues on IE11 Compatibility Mode, see Internet Explorer 11 with Compatibility Mode May Lead to Slow Page Loads.