Repaint areas

We can find the repaint areas if we enable "Show paint rectangles" in the settings of Chrome Developer Tools. The result can be surprising and will give us a better understanding of how rendering works.

In the following example, we can see a fairly simple screen with one <span> element that has a number and one absolutely positioned <div> element that when clicked, increments this number.

An entire line gets repainted if a number is changed

Assuming how repaints will happen is not a good idea. We need to test in our own situation, see how the browser (this one!) behaves and make the necessary adjustments. If we repaint large areas every time the user interacts with the page, the time required will be in the seconds range. Similarly, a great site that has a long page transition time will be tiresome to use. Everything that is repeated many times must as efficient as possible and this includes user interactions as well.

We need to know not only how to complete a project, but also how it will be handled by the browser as an intermediary between us and the user. But we should not limit ourselves in this position. Staying close to the user allows us to learn about its working environment and the laws that are valid in it. Being aware of what is seen as appropriate delay for our kind of system and how different technological constraints influence this delay allows us to serve a range of users and not just a tiny group of have-it-all individuals. At the end, the milliseconds of the few are often the seconds of the many.