我目前正在维护一个旧的遗留项目,我刚刚在浏览器中发现了一条关于滚动链接效果如何降低渲染性能的消息。
应用程序呈现一个大表单,底部有一个包含大量数据的滑块,它将异步加载(并且只有当用户向下滚动时才会进入他的视图)。之后它会创建很多DOM元素(很多意味着典型的100-300个数字,其中包含图像,文本和一些属性),这些元素将被添加到滑块中。
所以我正在阅读about Scroll-linked effects on MDN来关注这个性能问题,但我不知道最佳做法是什么。我也不能使用关于“粘性定位”和“滚动捕捉”的例子。另外,我不想以任何方式自定义滚动。 这种行为的目标是尽可能延迟加载大量数据(因为只有当用户向下滚动此页面时,他才真正需要这些数据)。
你能帮助我如何利用这一点,优化应用程序的滚动性能而不会丢失延迟加载功能吗?
答案 0 :(得分:0)
您可以使用check element visible in the viewport
+ requestAnimationframe