我们有一个页面,用户最多可以浏览2000个个人资料,当用户滚动到页面底部时,我们会添加20个个人资料。在添加了500个元素之后,添加个人资料的速度变慢,而在添加了1000个元素后,向下滚动就非常困难了。
我们最初认为这是由于太多的DOM对象导致的,但在调试后发现,
我们最初认为这是由于太多的DOM对象导致的,但在调试后发现,
CSS
才是实际问题,如果我们从页面中移除CSS,则滚动变得非常平滑,直到2000个个人资料为止。有谁能告诉我为什么CSS会出现这种情况?我们如何改进它以显示2000个个人资料。我们的个人资料只包含一张图片,没有文字。
CSS如下。
.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>