我目前正在维护一个旧的遗留项目,我刚刚注意到我的浏览器发出一条关于滚动链接效果如何降低渲染性能的消息。
应用程序正在渲染一个大表单,底部有一个包含大量数据的 slider ,这些数据将异步加载(并且只有当用户向下滚动时,它才会进入他的 View )。然后,它会创建大量 DOM 元素(很多意味着典型的 100-300 个图形,每个图形包含图像、文本和一些属性),这些元素将添加到 slider 中。
所以我在读about Scroll-linked effects on MDN解决这个性能问题,但我不知道最佳实践是什么。我既不能使用有关“粘性定位”也不能使用“滚动捕捉”的示例。我也不想以任何方式自定义滚动。 此行为的目标是尽可能延迟加载大量数据(因为只有当用户向下滚动此页面时,他才真正需要这些数据)。
您能帮助我如何利用这一点,在不失去延迟加载功能的情况下优化应用程序的滚动性能吗?
最佳答案
您可以使用检查视口(viewport)中可见的元素
+ requestAnimationframe
的组合
关于javascript - 滚动链接效果已被弃用,现代浏览器中有什么更好的选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42712789/