html - 定位到屏幕外的元素会影响滚动性能吗？

Question

我已经搜索了很长时间，遗憾的是无法找到我确切问题的答案。

各种网站上有很多主题，例如 stackoverflow（例如this question）和许多试图“修复”position:fixed元素缓慢滚动性能的博客（例如benfrain.com）。但是，我还没有遇到有人讨论放置在屏幕外的元素的影响，这很可能也是position:fixed.

让我们看下面的例子。

我最近开发了一个使用类似布局的网站，其中我将元素放置在屏幕外，以确保链接也可用于屏幕阅读器等（移动导航元素是特定的）。但是，鉴于许多网站描述了由于position:fixed元素而导致的各种浏览器中滚动性能降低的情况，我很好奇：

问题：屏幕外的固定元素是否也以与屏幕上的元素相同的方式呈现 - 因此，它们是否会导致滚动性能降低？

编辑：尽可能重复标记允许我详细说明：我的问题只是考虑元素在滚动时仍然位于屏幕外的情况。这与屏幕外元素的实际动作/运动/动画无关，也与视口的其他重绘无关。

for (i = 0; i < 50; i++) {
  $("body").append("<p>Pardon me being lazy, inserting 'content' jQuery-way.</p>");
};
$(".show-one").on("click", function() {
  $(".one").toggleClass("show");
});
$(".show-two").on("click", function() {
  $(".two").toggleClass("show");
});

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: lightblue;
}

button {
  width: 50%;
  float: left;
  height: 100%;
}

.off-screen {
  position: fixed;
  width: 100%;
  height: 30%;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  transition: transform .77s ease;
}

.one {
  top: 50px;
  background: lightgreen;
  transform: translate3d(100vw, 0, 0);
}

.two {
  top: 50%;
  background: pink;
  transform: translate3d(0, 100vh, 0);
}

.show {
  transform: translate3d(0, 0, 0);
}

body {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <button class="show-one">Toggle off-screen one</button>
  <button class="show-two">Toggle off-screen two</button>
</div>
<div class="off-screen one"></div>
<div class="off-screen two"></div>

标签： htmlcss