This article is excerpted from the book "The Master of CSS" written by Tiffany Brown. The book is available in major bookstores around the world, and you can also purchase the e-book version here.
CSS certain properties and values trigger reflow, which is expensive and may reduce the user interface's response speed - page rendering, animation fluency and scrolling performance will be affected, especially on mobile phones and tablets on low-power devices such as TVs.
What is rearrangement? {.title}
Rearrangement refers to any operation that changes part or all of the layout of the page. For example, change the size of an element or update its left position. They cause the browser to recalculate the height, width, and position of other elements in the document.
Repaint (repaint) is similar to repainting, and forces the browser to re-render part of the document. For example, changing the color of the mouse when hovering over a button is a redraw operation. Redraw has less impact on re-arrangement because it does not affect the size or position of the node; however, redraw should also be minimized.
Rearrangement and redrawing are usually triggered by DOM operations, such as adding or removing elements. But they can also be caused by changes in attributes that affect element size, visibility, or position. This is true whether the changes are caused by JavaScript or CSS-based animations.
Note: Page loading {.title}
When the page loads, the browser parses the initial HTML, CSS, and JavaScript, which always triggers reordering and redrawing.
It is difficult to completely avoid redrawing and rearrangement in projects. However, we can use timeline tools to identify them and reduce their impact.
Timeline Tool{.title}
The timeline tool can be a little confusing at first. They measure the performance of the front-end and record the time it takes for various tasks to complete. By recording activity while interacting with the page, we can find out which CSS code can cause performance bottlenecks.
To use the timeline, click the Timeline tab in the Developer Tools interface. In Chrome, Opera, and Firefox, it is aptly named "Timeline". Safari named it the plural form "Timeline". Internet Explorer 11 uses the more descriptive name "UI Responsiveness". [9]
In any browser, press the "Record" button to start the recording process. Interact with the part of the page that has problems, and when finished, click the corresponding button to stop recording.
Depending on the browser you are using, you may see the data immediately, or after stopping the recording. Safari and Firefox display data in real time, while Chrome, Opera, and Internet Explorer render performance charts after you stop recording.
Document loading, function calls, DOM events, style recalculation, and drawing operations are all recorded in each browser, allowing us to outline the performance bottlenecks. As for CSS performance, we need to focus on at least two related aspects:
- A lot of style recalculation and drawing operations
- Long time-consuming operation, larger blocks in the timeline represent
To understand the actual situation, we will compare two basic documents, Example A and Example B. In both cases, we move a series of div{.literal} elements from x position 0 to x position 1000. Both examples use CSS conversion. However, in Example A, we will animate the left attribute. In Example B, we will use the transformation transformation and animate the transform attribute.
The marks of the two examples are the same (the results are shown in Figure 3.16):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Performance example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" id="move">Move</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<🎜>
</body>
</html>
moved
var move = document.getElementById('move');
move.addEventListener('click', function(e) {
var objs = document.body.querySelectorAll('div');
Array.prototype.forEach.call(objs, function(o){
o.classList.toggle('moved');
});
});Our CSS code is a different part of the two. The CSS used in Example A is as follows: After
div {
background: #36f;
margin-bottom: 1em;
width: 30px;
height: 30px;
position: relative;
left: 0;
transition: left 2s ease-in;
}
.moved {
left: 1000px;
}, this animation will generate a large number of style calculations and redraw indicators in our timeline. The following image shows the timeline output of this conversion in Safari (Figure 3.17), Chrome (Figure 3.18), Internet Explorer (Figure 3.19), and Firefox (Figure 3.20).
Figure 3.17. Timeline output of left position conversion in Safari browser 
Figure 3.18. Same output in Chrome browser 
Figure 3.19. Timeline output of left position conversion in Internet Explorer 11 browser 
Figure 3.20. The reason for the output in Firefox browser left Attributes trigger reordering when changed, even if the changes are caused by animation or transformation. left
div {
background: #f3f;
margin-bottom: 1em;
width: 30px;
height: 30px;
position: relative;
left: 0;
transition: transform 2s ease-in;
transform: translateX(0);
}
.moved {
transform: translateX(1000px);
}Here we use the conversion and convert between and translateX(0). translateX(1000px)
-webkit-transform attribute conversion in Safari browser 
transform attribute using 
transformFigure 3.24. Timeline output of
Unfortunately, there is no clear list of which properties will cause rearrangement and redrawing. Paul Lewis's CSS Triggers are closest, but it's Chrome-specific. However, browsers do behave similarly for many of these properties, so this resource at least gives you an idea of which properties may cause problems.
Once you know which properties may be problematic, the next step is to test the hypothesis. Use a comment or add a temporary x- prefix to disable the property and rerun the timeline test.
Remember that performance is relative, not absolute or perfect. The goal is to improve: make it perform better than before. If the performance of the attribute or effect is too slow to accept, it is completely removed.
The above is the detailed content of Debugging CSS for UI Responsiveness. For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Chinese version
Chinese version, very easy to use
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
