CSS slows down page display

Question

We have a page where the use can view 2000 max profiles, we add 20 profiles when the user browses to the end of the page. After 500 elements, adding profiles becomes slower, and after 1000 it is very difficult to scroll down.

At first we thought that this was the result of too many DOM objects, but after debugging it turned out that CSS was a real problem, if we remove CSS from the page scroll, it will become very smooth up to 2000 profiles. Can someone tell me why CSS does this? and how can we improve it to show 2000 profiles.

Our profile contains only one image and text.

CSS is as follows.

 .profileCard { width: 25rem; height: 10rem; float: left; } .profileCard .imageHolder { width: 9.9rem; height: 9.9rem; float: left; } .profileCard .imageHolderSecondary { height: 100%; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .profileCard .imageHolderSecondaryTwo { width: 100%; height: 100%; overflow: hidden; } .imageCard .profileCard { width: 18.75rem; height: 18.75rem; background-color: white; } .imageCard .profileCard .imageHolder { width: 100%; height: 100%; } .imageCard .profileCard .imageHolder .profileImage { min-width: 18.75rem; min-height: 18.75rem; } 

HTML

 <div class="profileCard"> <div class="imageHolder"> <div class="imageHolderSecondary"> <div class="imageHolderSecondaryTwo"> <div class="profileImageContainer"> <img id="imageUrl" class="profileImage" src="http://graph.facebook.com/xyz/picture?type=large" title="undefined"></img> </div> </div> </div> </div> </div> </div> 

Answer 1

What kind of layout are you targeting as swimming seems excessive, especially with no signs of cleaning. The browser is likely to have a nightmare associated with all these float positioning calculations.

EDIT: Not exactly the same situation, but it looks like someone had a similar webkit issue. I have no idea what QT is, but it looks like this is very similar to a scroll issue. https://bugreports.qt-project.org/browse/QTWEBKIT-122

Answer 2

Change the use of REM to EM and everything will be fine. Given that REM is a CSS3 feature, it is not widely supported and definitely not as widely optimized.

This article gives a good explanation of how to use EM effectively, and also discusses REM.

Answer 3

This is a very interesting problem. By looking at your code, I think you can speed it up if you set explicit sizes for your 100% elements. I believe that the browser should constantly iterate over the dom in order to find out the size of 100% every time you load one of these elements. This is a simple test to try static size to make sure this is the right direction.