4 Anti-Patterns That Microsoft Recommends Web Devs Avoid

Microsoft has spent the past year “diving deep into web performance,” Rob Paveza, a principal software engineering manager, said during Microsoft’s conference, Build, a live and in-person event held this week.

Paveza and Zohar Ghadyali, program manager on the Microsoft Edge Dev Tools team, introduced a slew of new and experimental features available in Edge 114, which is in beta but scheduled for stable release June 2. The features are designed to improve performance as well as developer experience and include debugging assistance, a new JSON viewer, new dev tools, and Focus Mode.

But the team didn’t just examine what it could do differently to address web performance. Paveza also identified four common anti-patterns that developers can avoid to improve the speed of their web applications.

Anti-Pattern One: Using SVG Animations

SVG animations can be used to apply transformations, but they cause abnormally high CPU usage and “unexpected outcomes that we were surprised to see,” Paveza said, adding that it “caused a bit of work for the web platform team to go investigate and track down.”

What the team learned is that CSS animations have better performance. The animation tool and Dev Tools has much better support for CSS animations, he added.

Anti-Pattern Two: CSS Properties That Trigger Reflow

“Another issue that the browser runs into is reflow,” Paveza said. “This is when the browser recalculates the positions and geometries of the elements on the page with the goal of re-rendering part or all of the page. This is a costly operation and can block user input.”

Developers should minimize using CSS properties that trigger reflow or changing them, he said.

“Some CSS properties can actually be handled by the compositor thread instead of the main thread,” he added. “When you do have to change these properties at runtime, the ones that are better to use are those like transform and opacity. So we strongly encourage you to do that.”

Anti-Pattern Three: The Large DOM

It makes sense intuitively that the browser will take longer to handle DOM mutations, or recalculate cells, or compute layout when there’s a large DOM, simply because there are more elements on the page, Paveza said.

“When you’re using libraries like React that render components for you, we found some techniques like using React fragments, or just plain open bracket close bracket, instead of actual elements, can improve performance,” he suggested.

Another important technique to know about is the Shadow DOM.

“This is another major functionality of the web platform that we want to call out, because it provides containment, meaning that subsets of your DOM can mutate or need to be restyled without affecting all of the other elements outside of that shadow,” he said.

Anti-Pattern Four: CSS in JavaScript

Keep your CSS out of your JavaScript for faster performance, advised Pavez.

“CSS in JS absolutely has some benefits from a developer ergonomics perspective — you can write styles for specific components, you can specify dynamic styles, and it simplifies the amount of things that you have to juggle as a web developer between JavaScript, HTML and CSS,” Paveza explained. “However, we absolutely have observed poor performance.”

Injecting these styles into JavaScript takes longer to handle than vanilla CSS, he added.

“We strongly recommend extracting your CSS in JS to a stylesheet, and then serving that alongside your JavaScript for better performance,” he added.