识别: 我正在寻找所有可能的解决方案,用于检测由于浏览器优化性能而导致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问题,也部分包含了这个问题.