CSS教程:简化CSS选择器

qq826958498

qq826958498

2016-02-19 23:58

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS教程:简化CSS选择器,希望可以对大家能有小小的帮助。

本文是《Even Faster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最后一章。上篇帖子《Performance Impact of CSS Selectors》(中文版)最后提出了一段假设:

对大多数网站而言,优化CSS选择器活得的性能提升很小,不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题。

我收到了很多反馈。David Hyatt的文章《Writing Efficient CSS for use in the Mozilla UI》披露:

样式系统渲染一条规则是从最右边开始之后依次向左移动。在你的小子树(subtree)持续检测的时候,样式系统将继续向左侧移动直到它不匹配CSS规则或匹配错误。

由此得出,我们优化工作的重点应该是:匹配大量页面元素的最右侧的CSS选择器。我上篇博文测试的CSS选择器看起来很费性能,但是按这条新观点审视,我们发觉这其实不值得担心,比如:

这个选择器有5层,看起来很复杂,但是我们来看最右侧的选择器 A.class0007 ,我们发现,在整个页面中需要浏览器逆向匹配的只有一个元素。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

优化CSS选择器的关键点在于最右侧的选择器,也叫做key selector (巧合?)。有一个更昂贵的选择器

尽管这个选择器看起来更简单,但对浏览器匹配而言更昂贵。因为浏览器要从右至左,开始后要检查匹配 * 的所有元素。这意味着浏览器会尝试匹配页面中的所有元素。下图为普通选择器与先前的后代选择器加载时间的对比:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/) 

它清晰的反映出一个匹配很多元素的key selector会严重的拖慢页面。其他可能会大量增加浏览器工作的key selector包括:

不是所有的CSS选择器伤害性能,尽管看起来如此。CSS选择器的关键点在于泛匹配的key selector。这对于含有大量DOM元素、CSS规则,更高 reflow 的Web 2.0应用更加重要。

展开更多 50%)
分享

猜你喜欢

CSS教程:简化CSS选择器

Web开发
CSS教程:简化CSS选择器

CSS教程:驯服CSS选择器

Web开发
CSS教程:驯服CSS选择器

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS入门教程:CSS选择器

Web开发
CSS入门教程:CSS选择器

CSS教程:征服高级CSS选择器

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS教程:征服高级CSS选择器

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

渲染CSS选择器

Web开发
渲染CSS选择器

css 类选择器和id选择器

Web开发
css 类选择器和id选择器

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS优化:less优化CSS

CSS优化:less优化CSS

CSS教程:制作圆角矩形的网站头像

CSS教程:制作圆角矩形的网站头像
下拉加载更多内容 ↓