IE10 + 11：滚动和转换滞后性能答案

【问题标题】：IE10 + 11: onscroll & transform laggy performanceIE10 + 11：滚动和转换滞后性能
【发布时间】：2016-07-25 17:33:54
【问题描述】：

我有一个简单的 sn-p 来创建一个带有 JS 和 CSS 转换的“固定标题”。在现代浏览器上性能非常好，但在 IE 10 和 11 上表现出色。

不知道是IE的滚动事件慢还是样式改变了。

有没有提高性能的解决方法？

还是我需要走另一条路？ (position:fixed) - 我真的很讨厌沿着位置固定的路径走，因为 translateY 解决方案也适用于表格标题。

var el = document.getElementById('test');

window.onscroll = function() {
  var wintop = window.pageYOffset;
  var offset = el.offsetTop;
  el.style.transform = 'translateY(' + (window.pageYOffset - el.offsetTop) + 'px)';
};

试用已结束here。

【问题讨论】：

标签： javascript html css performance internet-explorer

【解决方案1】：

scroll 事件被触发太多次，这可能是您在 IE 中遇到性能滞后的原因。

我建议使用debounce、throttle 或使用超时实现您自己的解决方案，以控制您允许函数随时间执行的次数。

阅读the article 了解更多详情。

【讨论】：

感谢您的建议，在这种情况下，节流或去抖动似乎没有任何区别。我已经用油门和去抖动功能更新了 codepen
@Facius 事实证明，你必须使用position: fixed。顺便说一句，它不需要任何 JS 并且性能更高。
谢谢，我知道这是一个“简单的粘性标题”的可能解决方案。但是，如果您需要在动态表上放置一个粘性标题（列的宽度被拧紧），它就不能很好地工作。我提供的示例是一个极其简化的版本，真正的解决方案要大得多且非常灵活。