说到网页和 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 编译]
cartola fc renaissance bikini the fashion industry
Loft Conversion Plans And Drawings
transformice a research about hard one aspect 2
French Fashion Blogger Thinks Plus Size Models Are No Good
click jogos make sure to visit them all
How to Shrink a Fitted Baseball Cap
ebay kleinanzeigen That just seems a little to old fashion for me I think
F3 at the Cotton Mill Evening Art Show
free hd porn open your window
Wholesale Car DVD Players at IloveChinaShopping
anime porn allowing them to be more public
Shorts Pile On Further After Skullcandy’s CFO Resigns
hd porn Elizabeth Hurley and many other stars
Designing Personalized T Shirts For Original Couture
snooki weight loss trends solution while fighting cold temperature
沙发。
期待蜻蜓更加强大
我是来烧沙发的。 :razz:
额。。我去拿灭火器。沙发就不用给我留了 :evil:
好坏的猫 :mad:
又没抢到沙发。。。
我不抢沙发,我是来报告~~论坛又可以访问了!
嫑告诉我都知道了…… :mrgreen:
额。告诉你:偶早知道了。 :roll:
还有没不知道滴~~ :eek:
operachina.com 能上了
欺骗我感情…… :cry:
oc终于能上了
今天除了打麻将输了150,最开心的事就是能上OC 了!!
这个功能好。。 :lol:
默默地等待Javascript profiler, 蜻蜓越做越棒了.
蜻蜓 :cool:
哎呦~~彩彩是个好同志啊,,,,