Other options besides re-flowing and repainting

After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources.

I am interested in learning about alternative CSS/JS techniques to avoid the need for computationally demanding tasks such as re-paints using display:none or re-flows using visibility:hidden.

To clarify further, in a typical re-flow situation, when you toggle the display of an element by setting it to display:none, the browser initially displays everything beneath it as visible content before having to re-flow it all because the dropdown menu needs to be hidden.

If anyone has insights on whether the impact of re-flow and re-paint on performance is something worth considering, feel free to share your thoughts.

Answer №1

It seems like there may have been a misunderstanding with that statement.

When it comes to dynamically generating elements, there are a couple of different approaches to consider:

One option is to generate an element and immediately add it to the DOM in succession.
Alternatively, you could create a DOMDocumentFragment first, add all the elements to the fragment, and then insert the fragment into the DOM once complete.

The first method involves a re-paint for each individual element added, whereas the second method only triggers one repaint at the end. If you have a small number of elements to add, method 1 may suffice. However, if you're dealing with a large number of nodes, method 2 will likely offer significantly faster performance.

This concept illustrates why re-paints are considered costly.

Think of it this way:

Let's say a re-paint has a base cost of 100 units. Creating a DOM element and appending it costs just 1 unit. If you use method 1 with 7 elements, your total cost would be (1 + 100) * 7 = 707 units. On the other hand, with method 2, the cost would simply be 1 * 7 + 100 = 107 units - much more efficient. While these numbers are simplified examples, they effectively highlight the key difference in re-paint performance between the two methods.

Answer №2

There is no one-size-fits-all solution when it comes to handling reflows and repaints in web browsers. Each browser has its own methods for managing these processes, with a goal of minimizing reflows due to their costly nature.

It's important to remember that certain actions will always trigger a reflow, such as modifying the DOM tree by adding, removing, or moving nodes, changing calculated CSS properties like offsetWidth, and accessing computed CSS values using functions like getComputedStyle.

To learn more about when reflows occur in a DOM environment, visit this helpful resource.

Although setting styles can often lead to a reflow, modern browsers are designed to minimize this impact if the changes don't affect other elements' layouts or dimensions^{[source needed]}.

For an entertaining exploration of reflows, check out the article "Will it reflow?" at this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ajax is unintentionally duplicating the request

When the "async" parameter is set to "true", ajax sends two requests at the same time. But, when it is set to "false", there are no issues. To prevent the page from reloading, I am using the following code: $(document).ready(function() { $(document).on(& ...

javascript jquery ajax

ajax is providing identical data when called too frequently

Using my barcode scanner triggers the function below, but scanning multiple barcodes quickly results in duplicate data being processed. The issue seems to be related to the async setting - when it's false, the process slows down significantly. Is the ...

javascript ajax loops exit

A guide on accessing the JSON file data using jQuery

Currently, I am attempting to retrieve data from an API. Essentially, there is a URL that returns JSON data which I need to utilize. var url = "http://212.18.63.135:9034/played?sid=1&type=json"; $.getJSON(url, function(data) { console.log(data) ...

javascript jquery json ajax getjson

What is the best way to encapsulate a function that uses `this.item.findElement()` from Selenium in a separate file?

I'm currently working on setting up a Selenium Webdriver and Cucumber.js test environment using Node.js. In the homePageSteps.js file, I have a check to verify if a banner exists on a page: Then('there should be a banner', async function() ...

javascript node.js selenium-webdriver cucumberjs

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

css material-ui

Enzyme fails to locate text within a div even though it is present

In my current test scenario, I have a set of data displayed in Material-UI Cards. The data is provided through a JSON array consisting of objects with fields like projectName, crc, dateCreated, createdBy, and lastModified. { projectName: 'P ...

javascript reactjs jestjs material-ui enzyme

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascript jquery html css animation

Error: The Tabs component is expecting a different `value`. The Tab with the current `value` ("0") is not present in the document structure

I am encountering an issue while using MUI tabs. The error message I receive is as follows: MUI: The value assigned to the Tabs component is not valid. The Tab with this value ("0") does not exist in the document layout. Please ensure that the tab item is ...

javascript reactjs material-ui tabs

What is the optimal method for assigning a value to a specific key within a JavaScript JSON object?

Below is the information stored in a file called "fokontanys.json": { "vzdveg643": { "lldistrict":"Ambilobe", "id_province": 7, "id": null }, "vzvsdv5327": { "lldistrict ...

javascript arrays json object

"The latest version of Angular, version 15, experiencing issues with javascript loading

Currently, I am diving into the world of Angular and encountering a puzzling dilemma. Surprisingly, my application performs flawlessly on various browsers such as Chrome, Firefox, Brave, Opera, and even on mobile versions except for Safari. Both the deskto ...

javascript angular safari readystate domcontentloaded

Exploring ways to incorporate various classes into my validate() elements using jQuery

I'm currently using the jQuery method validate to verify this particular form: <form id="emailRecover"> <div class="row light-field-container error-container"> <input type="text" id="dniPassword" name="dniPassword" requ ...

javascript jquery validation

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

javascript arrays json typescript filtering

TypeScript and Next.js failing to properly verify function parameters/arguments

I'm currently tackling a project involving typescript & next.js, and I've run into an issue where function argument types aren't being checked as expected. Below is a snippet of code that illustrates the problem. Despite my expectation ...

javascript typescript duck-typing structural-typing

What is the process for changing text to red when hovering over it in a nested list?

a { color:black; } a:hover { color:red; } <ol> <a href="#"><li>Main1</li></a> <a href="#"><li>Main2</li> <a href="#"><li>Main3 <ol> ...

html css

Performing an RxJS loop to retrieve the httpGet response, followed by executing httpPut and httpPost requests based

I am currently working on a UI form that allows users to update or add translation text. To achieve this, I need to create an rxjs statement that will perform the following tasks: Send an httpGet request to the database to retrieve translations in mult ...

javascript typescript rxjs

Ways to navigate to a different page in React when a user clicks?

When working on my react app, I encountered an issue where the useHistory hook was undefined. How can I troubleshoot this problem and ensure that useHistory is properly defined? App.js import 'bootstrap/dist/css/bootstrap.css' import React f ...

javascript node.js reactjs

React.js: The art of nesting components within each other

One common feature in many template languages is the use of "slots" or "yield" statements, which allow for a form of inversion of control by wrapping one template inside another. Angular offers the "transclude" option for this purpose. Ruby/Rails utilize ...

javascript template-engine composition reactjs transclusion

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

When I press the back button, I am attempting to retrieve the previous state. Upon inspecting, I noticed that the popstate function is also triggered by the forward button. However, it does not revert to the previous state even though the popstate function ...

javascript html angularjs html5-history web-frontend

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

My plan involves utilizing a Java web service to fetch the HTML content from a specific URL using Jsoup, and then returning it as a string to the requesting party, which could be an Angular or JS script. I am keen on preserving this content somewhere and l ...

javascript java html angularjs iframe

Analyzing an HTML document

My current challenge involves extracting the username from an HTML Page based on who is accessing it. The username is displayed on the page, but its location may vary depending on the user. I'm curious to hear how others would approach this issue. My ...

java html jsoup

CSSer Q&A