Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Assuming I have an element with the style top: 5px, and then I execute element.style.top = "5px";, will the browser readjust its position and trigger a layout again? Or does it recognize that there is no need to change anything? (Is this behavior specified in W3C standards?)

What is the reason for this behavior?

I am configuring certain values based on scrolling. For instance, when the scrollTop goes from 100 to 300, the top position of an element should transition from 25px to 50px.

If the user scrolls rapidly, moving from a scrollTop of 285 to 310, it means that the element's top position will not reach exactly 50px but rather end up at something like 48.125px.

To solve this issue, I adjust all scroll values above 300 so that the element's top position remains fixed at 50px.

javascriptjquerycsshtml

Answer №1

Not all browsers behave the same way, but in Chrome specifically, if you set a CSS property of an element to the same value or one that doesn't affect its appearance, it won't trigger a redraw. For more information on this topic, check out these resources: HTML5 Rocks & phpied

To test this behavior in Chrome, go to the Developer Tools settings (the three dots in the top right corner) and under "More tools," select "Rendering settings."

Enable "Paint flashing."

Create a blank page with the following code snippet (note: this won't work in iframes due to different criteria for redrawing): 

  window.onscroll = function(){
document.body.style.background="yellow";
}
body{
  height: 200vh;
  }

As you scroll, you'll see only the scrollbar flashing green, indicating redraw. However, if you change the body opacity incrementally with each scroll event, it will trigger a redraw until the opacity reaches >=1.

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

Incorporate a section of text to flow around a floated image within a paragraph

How can I achieve the text wrapping above an image similar to the layout in the sunflower picture? I have tried using relative positioning and adjusting the top property, but it doesn't allow the text to wrap around the image. Setting the position to ...

htmlcss

What is the best way to handle the completion of the mongoose .exec function?

I am a bit confused about asynchronous code in Node.js and Mongoose. In simple terms, I want to post an array of usernames and check if each username is in the database. If it is, I want to add it to the valid array, otherwise, add it to the invalid array. ...

javascriptnode.jsmongoose

Validate whether the path parameter in NextJS is null or empty before executing the query

Currently seeking a method to determine if the query value is empty using the path parameter approach. Have a file named pages/search/[variable1].js Below is the code snippet: import { useRouter } from "next/router" const Variable= () => { ...

javascriptnext.js

The function you are trying to access does not exist in this.props

Trying to pass this.state.user to props using the isAuthed function is resulting in an error: this.props.isAuthed is not a function . The main objective is to send this.state.user as props to App.js in order to show or hide the Sign out button based on ...

javascriptreactjsreact-routerreact-router-dom

What is the best way to generate dynamic components on the fly in ReactJS?

Could you please guide me on: Techniques to dynamically create react components, such as from simple objects? Is it possible to implement dynamic creation in JSX as well? Does react provide a method to retrieve a component after its creation, maybe b ...

javascriptreactjs

The value produced by the interval in Angular is not being displayed in the browser using double curly braces

I am attempting to display the changing value on the web page every second, but for some reason {{}} is not functioning correctly. However, when I use console.log, it does show the changing value. Here is an excerpt from my .ts code: randomValue: number; ...

javascriptangulartypescript

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

htmlcss

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

javascriptphpjqueryhtml

A more concise validation function for mandatory fields

When working on an HTML application with TypeScript, I encountered a situation where I needed to build an error message for a form that had several required fields. In my TypeScript file, I created a function called hasErrors() which checks each field and ...

javascripthtmlvalidationtypescript

Displaying search results seamlessly on the same page without any need for reloading

I am looking to create a search engine that displays results without the need to refresh the page. I have come across using hash as a potential solution, but I don't have much knowledge about web programming. So far, with the help of tutorials, I have ...

phpjavascriptjqueryajax

Troubleshooting issue with AJAX asynchronous call to PHP function for updating MYSQL database records

Having an issue with the following script: $(function (){ $('.press_me').click(function(){ var request = $.ajax({ type: "POST", url: "counter.php" ...

phpjquerymysqlajaxasynchronous

Using InputAdornment with MUI AutoComplete causes the options list to disappear

I created a custom AutoComplete component with the following structure: <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} ...

javascriptreactjsmaterial-uijsx

PHP code that generates a drop-down list using a foreach iteration

all I'm encountering a slight issue with trying to create a dynamic drop down list. Here's the code I've written: <select name='categoryID' > <?php foreach( $categories as $category)?> <option value="<?p ...

phphtml

.delete is functional on Chrome and Safari, but ineffective on Firefox and Internet Explorer

Recently, I came across a jQuery script that enables the creation of a table with a button to add rows at the bottom. Each row also contains links for deleting specific rows. While this functionality works seamlessly in Chrome and Safari, it seems to encou ...

jqueryinternet-explorerfirefox

Cross-Origin Resource Sharing using Express.js and Angular2

Currently, I am attempting to download a PLY file from my Express.js server to my Angular/Ionic application which is currently hosted on Amazon AWS. Here is the Typescript code snippet from my Ionic app: //this.currentPlyFile contains the entire URL docum ...

javascriptangularjsnode.jsexpresscors

Achieve the central element while scrolling on the window

What am I doing wrong? I've been attempting to target the #second element on scroll Here is an example with console.log CODEPEN EXAMPLE $(window).scroll(function(){ var section = $("#second").offset().left, scrollXpos = $( ...

javascriptjqueryscrolloffset

Tips for stopping an image from stretching the cell in flexbox using CSS

When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed it ...

htmlcssflexboxgrid

AngularJS: Reset all numeric text boxes to blank when clicked/tapped in Kendo

I am facing a challenge in AngularJS where I have an uncertain number of NumericTextBoxes that are generated using ng-repeat: <input kendo-numeric-text-box k-format="'c2'" class="form-control" k-min="0" k-max="10000000" k-ng-model ...

jqueryangularjskendo-uikendonumerictextbox

Encountering issues with Office.context.document.getFileAsync function

I am experiencing a strange issue where, on the third attempt to extract a word document as a compressed file for processing in my MS Word Task Pane MVC app, it crashes. Here is the snippet of code: Office.context.document.getFileAsync(Office.FileType.Co ...

javascriptms-officeapps-for-office