The Hidden Cost of Optimizations

Introduction

As front-end developers, we're constantly looking for ways to improve the performance of our applications. One technique that's often used is the will-change property, which provides a hint to the browser about the kinds of changes that will be made to an element. However, as I recently discovered, this property can have unintended consequences that can lead to significant performance issues.

The Problem

I was working on a project where I had added the will-change property to a container element in order to improve the performance of some complex animations. However, after making this change, I noticed that the memory usage of the page had increased significantly - by around 5 MB. This was unexpected, as the will-change property only added around 600 kB to the page.

Investigating the Issue

In order to understand what was causing this issue, I opened up the DevTools and started investigating. I sorted the layers on the page by memory usage, and was surprised to see that a text section was using a significant amount of memory - around 4.1 MB. I checked the CSS for this element, and was surprised to see that it didn't have any will-change, transform, filter, or position: fixed properties that would cause it to be promoted to a GPU layer.

.text-section {
  position: relative;
  display: flex;
  background-color: #fff;
}

However, when I checked the Compositing Reasons, I saw that the element was being promoted to a GPU layer due to overlaps with other composited content. This was causing the element to be dragged along by z-order rules, and was resulting in a significant increase in memory usage.

Implicit Compositing

This issue is related to implicit compositing, which is a technique used by browsers to improve the performance of complex animations and transitions. When an element is promoted to a GPU layer, any elements that overlap with it will also be promoted to a GPU layer, in order to ensure that the animation is smooth and seamless.

// Example of implicit compositing
<div style={{ position: 'relative' }}>
  <div style={{ position: 'absolute', top: 0, left: 0 }}>
    // This element will be promoted to a GPU layer
  </div>
  <div style={{ position: 'relative' }}>
    // This element will also be promoted to a GPU layer, due to overlap
  </div>
</div>

Conclusion

In conclusion, while the will-change property can be a useful tool for improving the performance of complex animations, it's not a silver bullet. It's possible for this property to have unintended consequences, such as promoting elements to GPU layers and increasing memory usage. As developers, it's our responsibility to understand the underlying mechanics of the browser, and to use our tools wisely in order to avoid these kinds of issues.