CSS 技巧：加速CSS渲染的5个建议

很多人在编写CSS代码时，可能并没有想到它的渲染速度问题，认为只要效果达到就可以了，代码怎样写都影响不大。之所有有这个想法，是因为我们在开发环境中，无论硬件还是网络速度，都是很好的，这样就看不到代码的优劣对速度的影响程度有多大。然而，一旦在某些环境中，例如手机信号突然减弱，从4G变成2G的网络，又或者手机/电脑硬件配置不好时，这个时候设计上的每一个细节的影响就会被放大，优劣代码的运行速度就能凸显出来。因此，一个优秀的程序编写人员，是不能忽视细节的，考虑尽可能周全一些，代码编写精益求精。

在这篇文章中，将从5个方面，介绍加速CSS渲染的技巧。

加速CSS渲染的5个建议

1、通过指定图像尺寸避免回流和重绘

为避免不必要的回流和重绘，始终为所有图像指定宽度和高度，它允许浏览器在图像下载之前渲染页面，否则浏览器将在图像下载后需要回流和重绘。你可以在 HTML img标签或 CSS 中指定所有图像的宽度和高度。如果你需要较小的图像，请在图像编辑器中缩放它并将其尺寸设置为匹配，避免使用宽度和高度规范来动态缩放图像。

.banner {
width: 468px;
height: 60px;
}

2、通用选择器效率最低，ID 效率最高

以下是根据渲染速度的选择器：

#sidebar  {}             /* ID (Fastest) */
.home #slider {}         /* ID */
.footer {}               /* Class */
ul li a.arrow {}         /* Class */
ul {}                    /* Tag */
ul li a }                /* Tag */
* {}                     /* Universal (Slowest) */
#content [title='home']  /* Universal */

例如这个选择器不是很有效：

#sidebar > li

因为IDs是最有效的，你会认为浏览器可以通过 ID 快速找到它，然后找到 li，但它不会加快渲染速度，因为浏览器从右到左渲染选择器。

从右到左的原则

了解浏览器如何读取你的 CSS 选择器非常重要。他们从右到左读取 CSS，因此 ol > li a[title="link"] 首先解释的是选择器 a[title="link"] （它也被称为“键选择器”）。

选择器的从右到左解释一旦匹配失败，它就会停止尝试，因此与继续解释所需的能量相比，它消耗的能量更少。

3、将链接元素从文档正文移动到文档标题

始终将外部 CSS 和 style 块放在该 head 部分。在 HTML 文档的正文中指定外部样式表和内联样式块可能需要浏览器更多的时间来呈现文档。

例如，当css代码量不多时，就不建议这样写。

index.html

style.css

.title{
  height:23px;
  padding:7px 10px 0;
  color:#fff;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

而是这样写：

<html>
<head>
<style type="text/css">
.title{
height:23px;
padding:7px 10px 0;
color:#fff;
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 0px;
}
</style>
</head>
<body>
</body>
</html>

4、后代选择器

CSS 中最昂贵的选择器是后代选择器。它非常昂贵，特别是如果它属于标签或通用类别。例如，像这样的选择器是一个非常糟糕的选择：

html body nav a span {}

利用 CSS 级联

有时你可以在不使用额外选择器的情况下实现你想要的结果。例如考虑这个代码：

nav li a {font-size:14px}

由于 font-size 级联，你不需要特别声明你的 CSS ，并且它更有效率：

nav {font-size:14px}

过度限定的选择器

不要这样做：

form#UserLogin {}

ID选择器是唯一的；这只会降低它们的效率，因为它们不需要标签名称。类不是唯一的，但在类上避免这种方法也是一个好主意。