加速DOM树的渲染

Question

因此,我出于某种原因构建的网站在渲染实际DOM元素时速度很慢......

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

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

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

链接在这里

http://imagedeconstructed.com/

Answer 1

1. 你正在运行你的checkVis功能onscroll.根据浏览器的不同,每个鼠标滚轮可能会激活几次.

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

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

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

您可以在John Resig的博客文章中了解有关该事件的更多信息(John是jQuery的创建者):

John Resig - 从Twitter学习.

PS您可能还考虑onscroll通过计时器(setTimeout/ setInterval)运行事件处理程序.约翰把它全部覆盖在那里......