【问题标题】:Are large absolutely positioned divs expensive?绝对定位的大 div 贵吗?
【发布时间】:2015-09-21 21:20:14
【问题描述】:

我有一个高度约为 5000 像素的网站(即相对较大)。为了绝对定位它,我创建了以下设置:

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

我想知道在如此大的页面上,我的绝对定位 div 和相对 div 的高度各为 100%,处理成本是否很高?

我这样做的原因是因为我正在使用translateY(使用 GPU)转换父 div。然而translateY 相对于它们的高度翻译元素。如果我对图像执行此操作,则很难以相同的速度移动多个元素,因为它们的高度不同。 IE。我需要translateY(200%) 来获取一个高度为其他图像一半的图像。

但是移动父级绝对 div 要容易得多。

但我担心的是它的成本非常高,因为它是一个如此大的 div。有更多知识的人可以让我知道拥有如此大的绝对位置 div 和相对 div 是否不好?请注意,我的网站上有很多图片...

【问题讨论】:

  • 在什么情况下贵?渲染需要 10 毫秒而不是 5 毫秒?如果您对此感到担心,请进行测试。

标签: html css


【解决方案1】:

如果他们是parsed from HTML or dynamically generated with JavaScript.,通常会归结为后者(JS)与前者(HTML)相比非常快。

如果您使用的这些图像被正确压缩以在网络上使用,我会更加担心,您会惊讶于有多少人认为改变大小就足够了。这个答案有很多变量需要考虑,你必须考虑每个 div 的内容、CSS 的使用、每个 div 中使用的图像数量、你使用的浏览器等等。

您还可以在使用 div 时调用它们,而不仅仅是因为页面加载而加载它们。这将需要使用 JS。如果您担心性能,我可以立即告诉您,担心图像以及如何加载这些图像。

【讨论】:

    【解决方案2】:

    这取决于你如何渲染布局。

    因为你没有任何DEMO,所以我只能猜测并提供一些知识给你。

    1. 您可以使用 chrome 开发者工具找出性能问题。

    check this(在时间线中,启用Show paint rectangles 以找出性能问题)

    1. 我想你可以试试css属性will-change: transform,如果你想在同一层使用很多变换。它将帮助您加快渲染速度,就像使用 transform3d 而不是 transform2d

    more about will-change

    我给你一个常见的性能问题。 剩下的你可以自己找出来


    ,或者你可以给我们更多的DEMO。 :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-23
      • 2013-01-26
      相关资源
      最近更新 更多