4

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...

Terence Chow
  • 10,755
  • 24
  • 78
  • 141
  • Expensive in what context? Taking 10ms to render instead of 5? If you're worried about this, then run a test. –  Jul 04 '15 at 04:54

2 Answers2

1

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.

Community
  • 1
  • 1
lloan
  • 1,383
  • 8
  • 23
0

It depends on how do you render the layout.

Because you don't have any DEMO, so I can only guess and provide some knowledge to you.

  1. You can use chrome developer tools to find out the performance issue.

check this (in timeline, enable Show paint rectangles to figure out the performance problem)

  1. I think you can try css property will-change: transform, if you want to use many transform in the same layer. It will help you to accelerate render speed, just like use transform3d instead of transform2d

more about will-change

I give you the common performance issue. You can find out the remaining by yourself

, or you can give more DEMO to us. :)

mrjumpy
  • 64
  • 10