为带有交叉观察器的延迟加载图像优化批处理大小

时间:2018-12-28 06:04:53

标签: javascript optimization google-chrome-devtools lazy-loading intersection-observer

我正在创建一个显示大量无限滚动图像的画廊。

当容器的div进入视口时,我正在使用相交观察器api延迟加载图像标签元素。列表末尾还有一个哨兵DOM元素,该元素使用相交观察器一旦进入视口(即用户已到达列表末尾),就会触发调用以获取更多图像。

我意识到,我向列表中引入的每个其他观察元素都引入了更多的处理器和内存开销。如果我要侦听滚动事件的元素太多,则该应用程序将变得无法使用。

我可以通过匹配过程找到适当数量的元素,其中,我只是用不同的“批”大小来测试应用程序。但是,我很好奇,是否有人可以通过Chrome开发工具或其他方式将我指向适当的度量标准或可量化的性能指标,我可以在其中确定(a)每个其他交叉路口观察者在内存或性能方面的边际成本是多少,并且( b)了解这些信息后,我应该在每批提取的图像中侦听多少个屏幕外图像。

0 个答案:

没有答案