Opera Dragonfly 新功能预览 – 样式 profiler

说到网页和 web 应用的性能的话题时，CSS 选择器匹配经常被人无视。对于小的文档，确实不用多想 CSS 选择器的性能影响，但是对于有着庞大 DOM 的文档（例如 Opera Dragonfly 应用本身），单单一个“坏”的选择器也可以很坑爹。

CSS 选择器匹配，即是指浏览器在 DOM 中试图使用选择器匹配某元素的过程。单就性能而言，选择器当中是有优劣之分的。例如，ID 选择器就比通配选择器 (*) 更优，因为前者只匹配一个元素，而且匹配结果会被缓存。在大体积的 DOM 中使用许多不够具体的选择器来匹配元素，很可能导致网页渲染显著变慢。

之前 Opera 某测试版加入了对样式分析 (profiling) 的支持。而现在介绍的，是它在 Opera Dragonfly 上的应用的首个预览。

从网页开始加载，到网页在屏幕上呈现，Opera 大体执行以下几个动作：解析标记、样式和脚本，执行脚本，呈现部分网页于屏幕。这些在渲染时发生的所有事件会被呈现在 profiler 的时间线 (timeline) 当中。样式 profiler 关注的，是提供 CSS 选择器的细节信息。点击 “Style recalculation”，或者时间线当中某个单独的样式重新计算事件，就会列出若干最耗费性能的选择器。

注意：这是 Opera Dragonfly 的一个特别版本，功能尚未并入实验版 (experimental) 或前沿版 (cutting-edge)。并且只有 Profiler 这个标签可以使用。若要试用，请使用最近发布的 Opera 版本（11.60 或 12），将 Developer Tools URL 设置为
https://dragonfly.opera.com/app/stp-1/profiler/
记住这只是早期预览版。正式发布此功能之前还会有很多修改工作要做。

为了说明真实世界中 CSS 选择器对网页性能的影响之大，本文原作者做了一个确实坑爹的演示。最耗费性能的选择器包含“:link”和“:visited”。试试把它们改成“a:link”和“a:visited”（对于这个案例而言，它们改不改，匹配的元素都是一样的）。这么一改之后，浏览器将缓存匹配结果，并且选择器匹配耗时从 14 秒减为 11 秒。

除了选择器匹配的性能细节，你可以在时间线中悬停鼠标以查看更多信息。例如，悬停在一个绘制 (paint) 事件上，将显示绘制事件的相关信息和视口 (viewport) 面积。

以上只是 Dragonfly profiler 的第一部分。Javascript profiler 已经在路线图上，敬请期待。

[ Via Opera Dragonfly Blog – Opera.IM 编译]