Who dominates redraw and reflow in the rendering phase?
Redraw and reflow in the rendering phase: who plays the leading role?
With the continuous advancement of Web technology, the rendering process of web pages has become more and more complex. In the process of browser rendering web pages, repaint and reflow are two very important concepts. This article will introduce in detail the concepts of redraw and reflow and their role in the rendering process, and further illustrate their operating mechanism through specific code examples.
First of all, it needs to be clear that redrawing and reflow are two independent stages of web page rendering. Redrawing occurs when the appearance of an element changes without affecting its layout. Reflow refers to the operation performed when the size, position, or other layout properties of an element change. The reflow operation is relatively more computationally intensive because it requires recalculating the layout.
So, in the rendering process, which one plays the leading role, redrawing or reflow? Really, it depends on the trade-offs between various factors. Generally speaking, if there is only a redraw operation, redraw will play a dominant role because the cost of redraw is relatively low. And if there is a reflow operation, no matter where the reflow mark appears, reflow will play a leading role because the cost of reflow is higher.
Next, we will use a specific code example to illustrate the relationship between redrawing and reflow. Let's say we have a simple web layout that contains a button element and a textbox element. When the button is clicked, the redraw and reflow operations of the text box element are triggered by changing the value of the text box. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>重绘和回流示例</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: #ccc;
}
.btn {
padding: 10px;
background-color: #f00;
color: #fff;
}
.input {
width: 180px;
height: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn" onclick="changeText()">改变文本</button>
<input class="input" type="text" value="原始文本">
</div>
<script>
function changeText() {
var input = document.querySelector('.input');
input.value = '改变后的文本';
}
</script>
</body>
</html>In this example, when we click the button, the value of the text box is changed through JavaScript code. This operation will trigger the redraw and reflow operations of the text box element. Specifically, changing the value of the text box will cause the size and content of the text box to change, causing reflow; at the same time, changing the appearance of the text box will also cause redrawing.
To sum up, redrawing and reflow are two important concepts in web page rendering. Redraw mainly involves a change in the appearance of an element, while reflow involves a change in the layout of an element. During the rendering process, the costs of redrawing and reflowing are different and need to be weighed on a case-by-case basis. In the process of writing web page code, you can reduce the redrawing and reflow operations of the web page through reasonable layout design and code optimization, thereby improving the rendering performance of the web page.
References:
- https://developers.google.com/web/fundamentals/performance/rendering#css
- https://developers.google .com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
The above is the detailed content of Who dominates redraw and reflow in the rendering phase?. For more information, please follow other related articles on the PHP Chinese website!
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
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
How to render orthogonal top view in Kujiale_Tutorial on rendering orthogonal top view in Kujiale
Apr 02, 2024 pm 01:10 PM
1. First open the design plan to be rendered in Kujiale. 2. Then open top view rendering under the rendering menu. 3. Then click Orthogonal in the parameter settings in the top view rendering interface. 4. Finally, after adjusting the model angle, click Render Now to render the orthogonal top view.
Is Ace Racing Post-Holiday Syndrome: The real experienced drivers have already begun to prepare for the Lantern Festival
Feb 21, 2024 pm 06:04 PM
The Lantern Festival is coming soon. Ace Racing has specially prepared a Lantern Festival riddle guessing activity for everyone. If you guess the riddles and successfully answer 6 questions correctly, you can receive gold coin rewards. If you accumulate a certain number of riddles, you can also get generous rewards. Specific details Let’s take a look at the details of this event. Is Ace Racing Post-Holiday Syndrome: The real experienced drivers have already begun to prepare for the Lantern Festival. Hey, dear drivers, they all say that the Spring Festival is not the end until after the Lantern Festival. We welcome the lantern festival, eat glutinous rice balls, and set off fireworks...the Festival of Speed is everywhere In the festive and lively atmosphere of the festival, Xili has also prepared some interesting lantern riddles that "only real experienced drivers" can get for everyone to warm up in advance. Let's guess together~ (PS: Drivers can go to today's public account Tweet to see the answer!) How about it, riders?
'Let's Go Muffin' starts a new linkage, and the line puppy style PV is announced
Apr 28, 2024 pm 04:46 PM
Good news! The healing adventure-placement mobile game "Let's Go, Muffin" developed by Xindong has been officially announced - the game will launch a public beta of the national server on May 15th! Not only that, the first public beta of the national server will also be launched simultaneously on the day of the public beta. In collaboration with two IPs, Maifen officially launched the slogan "Puppy even with wheat, happy Say Hi!", and joined hands with the popular IP "Line Line Puppy" to bring everyone a different kind of healing! In order to welcome this linkage, Line Puppy official also A linkage PV was specially created using the simple style of a puppy with lines. We can see the game mascot Muffin, the cute white Maltese and the little golden retriever, having fun in the world of line muffins. They drove around in the RV, passed through layers of love, used rainbows as slides, went to the beach to dance, and defeated the terrifying black shadow in the middle of the night.
Is Android 12 smoother than Android 11? 'Performance comparison between the latest Android 12 and Android 11'
Feb 07, 2024 am 08:13 AM
Android 12 is a brand new system released by Google on May 19, 2021. It is the official iteration of Android 11 and is also the latest version of the current Android system. All major domestic mobile phone manufacturers will launch major releases from the end of this year to the beginning of next year. Large-scale push of major version updates based on Android 12. For example, the upcoming MIUI 13 has been confirmed to be based on Android 12 (some low-end models are based on Android 11). So what kind of improvements will Android 12 bring compared to Android 11? What changes are there for ordinary users? Let’s talk about them in this article. 01. UI changes. User perception intensity: Domestic user perception is relatively low. One of the biggest improvements in Android 12 comes from UI design, but since we may rarely see it in our country
Meitu AI partial redrawing technology revealed! Change it however you want! Partial redrawing of beautiful pictures allows you to do whatever you want
Mar 02, 2024 am 09:55 AM
Recently, the "AI image enlargement" function has caused a sensation with its sudden enlargement effect. Its funny and interesting auto-fill results have frequently become popular and set off a craze on the Internet. Users actively tried this feature, and its huge 180-degree transformation also made people marvel, and the popularity of the topic continued to rise. While arousing laughter and enthusiasm, it also means that people are constantly paying attention to whether AI can really help them solve real-world problems and improve user experience. With the rapid development of AIGC technology, AI application scenarios are accelerating to be implemented, which indicates that we will usher in a new productivity revolution. Recently, Meitu's WHEE and other products have launched AI image expansion and AI image modification functions. With simple prompt input, users can modify images at will.
'Collapsed Star Railroad' Mikhail Where Are You Going Achievement Guide
May 09, 2024 pm 09:20 PM
Collapse Star Dome Railway Where Are You Going Mikhail achievement guide. With the update to version 2.2 of Honkai Dome Railway, there are a lot of new content in the game that can be experienced. I believe that many friends have encountered some difficulties when completing the achievement "Where Are You Going, Mikhail?" I don’t know how to complete it, so today I will take you through the detailed process. Guide to the Collapsed Star Railroad Where Are You Going Mikhail 1. When we inherited the capabilities of the Tongtun Pioneers and solved the crisis in Sinokonni, everything settled and we returned to the top of Flowing Dream Reef. The transfer point is the one marked in the picture below; 2. After reaching it, go straight forward, look at Mikhail again, and investigate the balcony in front of him; 3. After completing the investigation, you can obtain the achievement Mikhail
The computer I spent 300 yuan to assemble successfully ran through the local large model
Apr 12, 2024 am 08:07 AM
If 2023 is recognized as the first year of AI, then 2024 is likely to be a key year for the popularization of large AI models. In the past year, a large number of large AI models and a large number of AI applications have emerged. Manufacturers such as Meta and Google have also begun to launch their own online/local large models to the public, similar to "AI artificial intelligence" that is out of reach. The concept suddenly came to people. Nowadays, people are increasingly exposed to artificial intelligence in their lives. If you look carefully, you will find that almost all of the various AI applications you have access to are deployed on the "cloud". If you want to build a device that can run large models locally, then the hardware is a brand-new AIPC priced at more than 5,000 yuan. For ordinary people,
How to apply for QQ backup mailbox with QQ mailbox? How to apply for QQ backup mailbox with QQ mailbox
Mar 05, 2024 am 09:30 AM
The article brought to you today is about QQ mailbox software. Do you know how to apply for QQ backup mailbox with QQ mailbox? The following content brings you the method of applying for QQ backup mailbox with QQ mailbox. Let us take a look below. . After logging in to your QQ mailbox, you can look for an icon with a triangle logo on the homepage of your mailbox. If you can't find the icon, you can view detailed annotations on the image to help locate it. After finding it, click the 3-corner logo, and then click the Apply for Backup Email button. After clicking, we click the email account button in the upper right corner of the page that just came out. After clicking, we enter the new registration email name, password, mobile phone number and other operations and then click the registration button. After the registration is completed, we return to the email page just now and click on the box that just popped up to enter the account number.
