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

An addition operation in Javascript

Recently, I dipped my toes into the world of Javascript. However, I found myself puzzled by the script and its corresponding HTML output provided below. Script: <h1>JavaScript Variables</h1> <p id="demo"></p> <script> var ...

javascript

``There was an attempt to install uniqid, however, I am unable to utilize its functionality

After installing the package uniqid from npm, I encountered an issue. Whenever I try to use the uniqid() function, it displays an error message stating "TypeError: _uniqid.uniqid is not a function". import { uniqid } from 'uniqid'; console.log( ...

javascript npm

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.net css master-pages

What is the best way to divide a pair of words onto two lines individually?

Looking for a way to break the word 'Mon 24' into separate lines like this: Mon 24 I attempted using word-break: break-all without success. Check out my code example here: https://codepen.io/bbk_khadka/pen/zbVLEp ...

html css

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

I am attempting to attach the information from a .html file to the body of my main webpage. Essentially, I am striving to create a reusable section of html that can be loaded into any page with a basic JavaScript function. Below is the content of my navig ...

javascript html ajax

The gltf model fails to load on Chrome for Android when using Threejs

I encountered an issue while attempting to showcase a basic GLTF 3d model on my website. Surprisingly, it functions smoothly on desktop Mac and Windows, as well as on iOS in Safari and Firefox. However, it fails to load on Android's Chrome browser. St ...

javascript android reactjs three.js gltf

Searching for a specific value in various Json files: A guide

My goal is to create an application where users can input longitude and latitude coordinates of a location, and the application will return the associated grid code from one of three JSON data files. I am attempting to search through all three files simult ...

javascript jquery arrays json

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

this is my unique html content <ul class="dialogs"> {% if t_dialogs %} <li class="grouping">Today</li> {% for item in t_dialogs %} <li class=&qu ...

javascript html jquery ajax

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

html angularjs validation

Importing CSS and JavaScript files into a JSP page in Spring MVC

After adding a CSS file to my JSP file, I encountered an issue that prompted me to search for solutions. Despite trying the tutorial from the following link, it did not work for me: My project was created using Spring Tool Suite and here is my file struct ...

java css spring jsp spring-mvc

Issue with the first-child selector

Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...

css css-selectors

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascript html css

The background-size:cover property fails to function properly on iPhone models 4 and 5

I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...

javascript html css background

Filling out a form within a webpage fetched through a DOMParser

Creating automation software in JavaScript using TamperMonkey. The script performs several AJAX requests that retrieve HTML to be parsed with a DOMParser. Is there a way to submit these forms without opening the newly retrieved HTML on the main page? ...

javascript ajax dom tampermonkey

When running "npx create-nuxt-app" followed by "npm run dev", an error occurs stating that there

Recently, I started using Nuxt and initiated my app with npx create-nuxt-app my-app, setting the parameters as follows: Project name: client Programming language: JavaScript Package manager: Npm UI framework: Tailwind CSS Nuxt.js modules: Axios - Prom ...

javascript node.js vue.js npm nuxt.js

Hidden text within a webpage that remains concealed until a specific link is activated

Just getting started with HTML and wanting to add animation to my project. I have a vision of an animation where clicking on an image will split open a half page of text and stuff. It should be similar to this example: ...

javascript html

Get a file from a distinct internal server than the one where the website is operating

I am trying to download a file from an internal server that is separate from the one where the website is hosted. I have attempted various methods such as... <a href="javascript:Start('file://servername/path/filename.txt')> <a href="// ...

javascript html

navigating through an array with a loop (for)

I created a basic phone book program where users can input a name and it will search an array of objects for the corresponding phone number. If the name is found, it will display the name and phone number. However, I am facing an issue where even though ...

javascript arrays loops

Steps for inserting a script tag in an Angular component

My Angular/Typescript website needs to integrate a third-party script that generates a table. However, I'm facing issues with rendering the table within the home.component.html file. I've managed to embed the script, but it doesn't seem to ...

javascript html angular typescript embed

JQuery .click function functioning properly on alternate clicks

Currently, I am integrating JQuery with ReactJS. However, there seems to be an issue where the action that should occur when clicking a button only works on every other click. The first click doesn't trigger anything, but the second one does. I attem ...

javascript jquery reactjs

CSSer Q&A