Debugging CSS for UI Responsiveness-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Debugging CSS for UI Responsiveness

Jennifer Aniston

Feb 18, 2025 pm 01:13 PM

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>

Debugging CSS for UI Responsiveness

Figure 3.16. Our HTML demo page in Safari browser, the JavaScript code for both documents is also the same. Clicking the "Move" button will switch

class on each div element: 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).

Debugging CSS for UI Responsiveness 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

style calculation and redrawing is with us The properties of the conversion are related to:

. left Attributes trigger reordering when changed, even if the changes are caused by animation or transformation. left

Now, let's take a look at the CSS of Example B:

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)

In most browsers, conversions do not trigger reordering, and our timeline will contain fewer repaint operations. This is evident in Safari (Figure 3.21), Chrome (Figure 3.22), and Internet Explorer (Figure 3.23). Firefox is the exception; compare Figure 3.20 and Figure 3.24. The timelines of the left conversion and the conversion transformation are very similar.

Debugging CSS for UI Responsiveness

Figure 3.21. Timeline output of -webkit-transform attribute conversion in Safari browser

Figure 3.22. The same output of transform attribute using

attribute in Chrome browser Debugging CSS for UI Responsiveness

Figure 3.23. Output in Internet Explorer 11 browser Debugging CSS for UI Responsiveness

transformFigure 3.24. Timeline output of

attribute conversion in Firefox browser

## Identify the line of code to be removed {.title}

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles

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

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Saving in R.E.P.O. Explained (And Save Files)

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

4 weeks agoByDDD

Hot Tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software