Are the absolute absolute divisions costly?

advertisements

I have a site that is ~5000 pixels in height (ie relatively large). In order to position things absolutely on it I've created the below setup:

absolute div --> relative div --> multiple absolutely positioned images

I'm wondering if it is costly for processing purposes that my absolutely positioned div and relative div are 100% height each on such a large page?

The reason I am doing this is because I am transforming the parent div with translateY (which uses the GPU). However translateY translate elements relative to their height. If I do this on the images, it becomes difficult to move multiple elements with the same speed since they will be different height. I.e. I will need to translateY(200%) for an image that is half the height as the other image.

However moving the parent absolute div is much easier.

But my concern is that it is quite costly in that it is such a large div. Can someone with more knowledge let me know if this is bad to have such a large absolutely position div and relative div? Note I have a lot of images on my site...


It usually falls down to if they're parsed from HTML or dynamically generated with JavaScript. The latter(JS) is very fast compared to the former(HTML).

I'd be more worried if those images you are using are properly compressed for use on the web, you'd be surprised how many people think changing the size is enough. This answer has many variables to consider, you have to think about the content of each div, usage of CSS, amount of images used in each div, the browser you are using, etc.

You could also call divs as they are used, not just load them because the page loads. This would require the use of JS. If you are worried about performance, I can tell you right off the bat, worry about the images and how you load those.