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!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
How to use Lotties in Figma
Jun 14, 2025 am 10:17 AM
In the following tutorial, I will show you how to create Lottie animations in Figma. We'll use two colorful designs to exmplify how you can animate in Figma, and then I'll show you how to go from Figma to Lottie animations. All you need is a free Fig
External vs. Internal CSS: What's the Best Approach?
Jun 20, 2025 am 12:45 AM
ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed
Does my CSS must be on lower case?
Jun 19, 2025 am 12:29 AM
No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.
CSS Case Sensitivity: Understanding What Matters
Jun 20, 2025 am 12:09 AM
CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
What are CSS counters?
Jun 19, 2025 am 12:34 AM
CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.
CSS: When Does Case Matter (and When Doesn't)?
Jun 19, 2025 am 12:27 AM
In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.
