加速DOM树的渲染

Question

因此，我出于某种原因构建的网站在渲染实际DOM元素时非常慢......

  

我的意思是，当你滚动页面时，它非常慢。几乎   就像一个低帧率的游戏

我正在玩CSS并注意到当我删除了具有不透明度的元素或只是使它们为1 。 网站速度急剧加快。

所以问题是如何在不损害页面渲染速度的情况下保持这种视觉样式

这是链接

http://imagedeconstructed.com/

Answer 1

1. 您正在运行checkVis函数onscroll。根据浏览器的不同，每个鼠标滚轮滚动功能可能会激活几次。

2. 在checkVis函数中，您多次使用jQuery构造函数。这意味着滚动事件每次触发，您将遍历DOM以查找这些元素。

为了最大限度地提高性能，缓存选择器非常重要非常。

---

Twitter在某些时候遇到了同样的问题，滚动速度非常慢，他们不得不暂时回到旧版本的代码中。

您可以在John Resig的博文中了解有关该事件的更多信息（John是jQuery的创建者）：

John Resig - Learning from Twitter。

---

P.S。您还可以考虑通过计时器（onscroll / setTimeout）运行setInterval事件处理程序。约翰把它全部覆盖在那里......

Answer 2

从我看到你使用javascript加载图片并附加了将图像添加到页面到onscroll事件的功能。因此，每当用户滚动页面时，该函数 - checkVis() - 都会被调用，并且它似乎没有被优化...

另一种方法是在标记中插入图像并使用像lazyload这样的脚本（尽管它使用类似的方法，它更加优化）只有在它们位于视口中时才加载它们。 / p> 编辑：似乎lazyload它不是一个可用的解决方案（正如它在他们的网站上所说）。我的错误。