网站设计时如何提高CSS的呈现速度

在 网站设计时有没有想过网站的CSS的大小？可能会降低页面的加载速度，拖延页面呈现。 虽然CSS不是网站中最大的资产类型，但它是浏览器发现的第一个。因为浏览器直到CSS被下载和解析后，才会渲染页面，所以css必须尽可能的精简。 

在网站设计时这里有几个技巧来帮助你解决这方面的问题。

01.在网站设计时使用浅选择器

在CSS方面使用浅选择器可以修剪大样式的千字节。比如在网站设计时以下情况：

nav ul li.nav-item

这可以更简洁地表达：

.nav-item

除了帮助保持CSS的细节外，浏览器还可以更快地渲染由浅选择器定向的元素。浏览器从右到左读取选择器。选择器越深，浏览器渲染并重新渲染这些选择器应用的元素所需的时间越长。对于经常回流的复杂DOM，短选择器也可以减少倾斜。

在理想情况下，您希望选择器尽可能的浅，但这并不意味着您应该将所有内容都进行简化。有时您需要额外的特性来扩展组件。

02.使用CSS的速记属性

简化不必要的CSS代码这似乎是常识，可你会发现在编译中不必要地使用的频率非常大。以下是使用中的一些属性示例：

font-size: 1.5rem;line-height: 1.618;font-family: "Arial", "Helvetica", sans-serif;

对于这些CSS！让我们整理一下：

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

该字体的速记属性可以凝结几个声明编辑层方便的一行，这样在网站设计时占用空间就少得多了。

在上面所示的例子中，速记法使用的空间比平常的css编译方法少了近40％。

当然，字体代码属性不是您可以使用的唯一速记。例如边缘顶部，边缘权限等，我们都可以使用速记方法。 

该填充属性的工作方式相同。为了更多的方法来清理您的CSS，我们可以参考一些简易属性列表。

如果我们需要在级联中进一步覆盖一个值，该怎么办？例如，假设您有一个标题元素，需要更改其较大显示器的字体大小。 

在这种情况下，您可以使用更具体的font-size属性：

h1{

    font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;}@media (min-width: 60rem){

    h1{

        font-size: 2rem;

    }}

这样不仅方便，还增加了组件的灵活性。如果底层字体属性的任何其他部分被修改，这些属性更改将会渗透到更高一层的显示中。非常适用于组件覆盖。

03.使用预加载资源提示

预加载资源的提示可以提高给浏览器加载你的网站的CSS。该预加载资源的提示告诉浏览器启动的早期获取的代码。

例如网站设计时可以将其设置为HTML中的<link>标记：

<link rel="preload" href="/css/styles.css" as="style">

或者作为服务器配置中的HTTP标头：

Link: </css/styles.css>; rel=preload; as=style

在这两种情况下，preload可以让浏览器开始加载/css/styles.css。在HTTP头中使用预加载优先属性，可以使浏览器提早加载css，而不是稍后在主体中进行响应。

在HTTP头中使用预加载的另一个原因是它可以在大多数HTTP / 2启动服务器的事件推送。服务器推送是一种机制，通过这种方法，信息在内容请求时被抢先推送到客户端，并提供类似于内联CSS的性能优势。

服务器推送在HTTP / 1上不可用。但是，在HTTP / 1环境中使用预加载仍可以提高性能。

04.用剔除冗余软件来处理css

有些软件或网站可以检查CSS是否存在规则重复或冗余代码。当然其中大部分是需要收费的，例如我们之前在网站设计时使用的CSS优化

可以检查您的CSS冗余如下： 

csscss -v styles.css

此命令列出哪些选择器共享您可以取消复制以节省空间的规则：

{h1} AND {p} share 3 declarations

  - color: #000

  - line-height: 1.618

  - margin: 0 0 1.5rem

您可以在一个选择器下剔除重复的规则： 

h1, p{

    color: #000;

    line-height: 1.618;

    margin: 0 0 1.5rem;}

我们在设计大型的网站时利用这些功能可以节省很多空间。