实现CSS渲染更高效的方法

发布时间:2020-03-10编辑:脚本学堂
我们写的css的效率是怎么样的呢?浏览器渲染的速度又如何呢?本文就此问题展开一些讨论,需要的朋友参考一下。

我们来了解下主要的东西,然后讨论他们的实用性。
从右到左
浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul > li a[title="home"] ,这样的选择器,a[title="home"] 将是最先被读取的。这一部分通常被称为 “key selector” 选择器的最后一部分,也是被选择的标签。
ID's 是最有效率的,通用符是最慢的。

有四种目标选择器:ID, class, tag和通用符。各自的效率如何:
 

复制代码 代码示例:
#main-navigation { } /* ID (最快) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (最慢) */
#content [title='home'] /* Universal */ 然后我们结合从右到左和目标选择器的概念,我们可以知道下面这个选择器
并不高效:
#main-nav > li { } /* 看着很快实则很慢 */
 

尽管这让人有点费解......因为ID's是最高效的,浏览器可以通过ID迅速的找到 li。但事实是,li 标签是被先读取的。
不要用标签修饰,不要像下面这样:
 

复制代码 代码示例:
ul#main-navigation { }
 

ID's 是唯一的,所以不需要用标签修饰,这只会让它更低效。
如果你可以避免的话,也不要用它修饰 class 。class 不是唯一的,所以理论上你可以把它用在不同的标签。如果你愿意的
话,你可以用标签控制不同的样式,这样你可能需要标签修饰(比如:li.first),但这样做的人很少。

绝对没有比用后代选择器更糟糕的做法了:
David Hyatt:
后代选择器是CSS里最昂贵的选择器,昂贵得可怕——特别是当它放在标签和通用符后面时。
如下面一样,绝对的效率毒瘤:
 

复制代码 代码示例:
html body ul li a { }
 

你有大量的选择器在css样式表里无法找到,这样的事情貌似很离奇,但必需注意的是,从右到左的解释一个选择器来说,一旦它找不到,那它就会停止尝试。然而如果它找到了,那它就需要花更多精力去解释了。试想一下为何你这样写选择器:
 

复制代码 代码示例:
#main-navigation li a { font-family: Georgia, Serif; }
 

你可能不需要从 a 选择器开始(如果你只是想换个字体)。下面这个可能更高效些:
以下为引用的内容:
 

复制代码 代码示例:
#main-navigation { font-family: Georgia, Serif; }

你可以按照上面的方法去做,因为它并不会限制你的CSS制作。如果你没发现你的网站明显的css渲染缓慢,那大可别太在意,在以后的工作中多注意就行了。
我们知道ID's 是最高效的选择器。当你想让渲染速度最高效时,你可能会给每个独立的标签配置一个ID,然后用这些ID写样式。那会超级快,。这样的结果是语义极差,维护难到了极点,我认为这个可以提醒我们不要为了高效的CSS放弃语义和可维护性。