Jef*_*ert 5 javascript performance dom dom-events requestanimationframe
识别: 我正在寻找所有可能的解决方案,用于检测由于浏览器优化性能而导致FPS下降或重新绘制/回流在浏览器中停止发生的时间,因为文档区域不在视野范围内.
观察: 到目前为止,我研究过的大多数原生HTML/JS解决方案都没有考虑到DOM的一部分,这部分被页面的其他部分所掩盖,或者是在首屏之下的DOM.有时内容将直接嵌入父文档中,有时可能在框架或iframe中.
测试结果: mozPaintCount是窗口dom回流的精确表示,当窗口或框架中的文档被遮挡时,它会正确响应.似乎Firefox正确识别dom的部分而不是在它们被遮挡时重新绘制它们,当某些东西不在视野时可以通过firefox检查器工具进行目视检查,但是检查员在绘制时可能不会考虑视图层次结构.重新粉刷区域的亮点.感谢你,Mozilla!
当屏幕关闭时,Flash也显示FPS减速,最新的Flash Player 11.2有一个专用事件,当出于优化原因被浏览器限制时会触发该事件.Flash也不是值得信赖的解决方案,因为它在许多浏览器中默认禁用.
页面可见性更改事件的当前浏览器实现能够在窗口已更改为另一个选项卡或窗口变为非活动时进行广播,但不考虑折叠下方的元素/窗口/文档的滚动位置或其他模糊DOM.然而,在本规范的第二稿中,已经建议浏览器考虑视口和DOM层次结构以提供更准确的结果.
参考文献:推荐页面可见性,2011年和草案页面可见性,2013年
当CSS元素被遮挡时,它们似乎不会被优化掉,因此无法正确测量它们.我尝试了许多不同的属性导致回流(高度,宽度,框阴影等),并且无法从中获得任何有意义的指标.
requestAnimationFrame似乎仅在更改选项卡并且浏览器窗口变得模糊时才限制动画,但不处理折叠以下的内容.此外,由于raf仅附加在窗口级别,因此无法绑定到特定的dom节点(在其实现中似乎是短视的).
我还没有完成对WebGL的测试,但是这仅限于少数现代浏览器(对于旧版浏览器,闪存解决方案可接受的结果).
我还没有完成测试画布,但这可能是一个很好的解决方案,因为它得到了比WebGL更广泛的浏览器支持.
我甚至没有开始考虑嵌入式对象以及它们可以提供的内容.
我没有查看ActiveX控件,看看是否有任何可能有帮助的东西.
我没有看过HTML5视频.
动画GIF似乎只在Firefox中进行了优化.再次感谢,Mozilla!
因此,每个浏览器供应商如何优化页面呈现的神秘和魔力继续扼杀我的进步.然而,单独的元素位置不能仅依赖于元素实际上是否可见的真实指示,因为页面可能具有使框架内容模糊的其他层,或者内容可能以排除任何有意义的可见渲染的方式显示(例如更改内容的三维旋转,使其不可见.)
任何关于浏览器如何实际优化显示内容或其他方向或该问题的实际答案的头脑风暴都受到欢迎.
同样,这是一个较旧的SO问题,也部分包含了这个问题.
我在下面的代码中使用了 Mozilla mozPaintCount，但我没有得到我期望的 FPS 值。
第 1 部分：运行此代码一次以填充变量。
var currentFrames = window.mozPaintCount, currentTime = new Date();
第 2 部分：在第 1 部分之后随时运行此代码。
(window.mozPaintCount - currentFrames)/((new Date() - currentTime)/1000)
结果显示 FPS，对于我的网站，我得到 9FPS。Chrome FPS 计数器显示为 60FPS。
总体而言，浏览器的页面渲染性能是 Web 开发世界中一个相对较新的话题。除了 Chrome DevTools 之外，其他所有主要供应商似乎都对公开性能工具没有太大兴趣。由于对网页渲染性能的兴趣是有限的，因此大量数据也是有限的。
开发人员关注的主要性能理念是。滚动性能、绘制时间的 CSS 效果、您提到的动画 Gif，当然还有 requestAnimationFrame。 http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
确实，在进入这个领域之前，我建议您花一点时间实际了解浏览器如何呈现您的页面并更新该页面。 http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
我会为您添加更多链接，但我的 SO 代表太低了。