我使用stellar.js创建了视差网站。但事实证明有点滞后/笨拙。所以我跳进来调试这个。我整天都在看各种关于加快网站性能的视频,我发现了更多关于chrome devtools的信息,特别是时间线标签。事情变得更好,但在时间轴上,最昂贵的事情就是绘画。这是因为图像正在调整大小。 这里的问题是为什么bg-image在每个滚动事件上调整大小?在我看来,浏览器渲染图像并在我加载页面时调整它们的大小,而不是在每个滚动上。我知道应该在每个卷轴上计算位置,但这是否意味着bowser还需要重新计算图像大小?如果是这样,有没有解决这个问题?在某些视频/文章中,我看到了transform: translateZ(0);
,但在我的情况下它并没有帮助。
这是每个幻灯片包的代码。我知道background-size:cover;
代价很高,但这是我保持全屏背景的唯一方式,它们很大(2000x1200),但不重(350kb)。
.slide{
background-attachment: fixed;
height: 100%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
感谢任何想法。或者只讨论一般的“绘画”事物