CSS和HTML是一对基友，两者是密不可分的。没有HTML，CSS的表现没有载体。没有CSS，HTML就没有那么多的布局和样式了。那么，如何给HTML添加样式呢？

添加样式

  1. 内联CSS，优点是不会阻断HTML的加载。缺点是会增加HTML文件的体积，同时不利于样式的管理和阅读，可读性不强。所以，一般只是首屏的关键CSS才会这样写。可以搜索css trigger具体了解用法。

  2. Link标签

    1
    <link href='xxx.css' rel='stylesheet'>

    上面这种写法可以会阻断HTML的渲染，不会阻塞HTML的构建，具体流程参考关键路径

    1
    <link href='xxx.css' rel='stylesheet' media='none' onload='this.media=all'>

    上面这种写法，既不会阻塞HTML的构建，也不会阻塞渲染，算是异步加载css文件的异种pollyfill的手段。

    1
    <link rel='preload' href='xxx.css' as='style' onload='this.rel=stylesheet'>

    这种写法，也是异步加载，而且是官方提供的，但是各个浏览器的支持度不够高。

样式选择器

独立选择器：

  • 属性选择器
  • 类选择器
  • ID选择器
  • 标签选择器
  • 伪类选择器
  • 伪元素选择器
  • 通用选择器

组合选择器：

  • 分组选择器(a, b)
  • 后代选择器(a b)
  • 子选择器(a > b)
  • 相邻选择器 (a + b)
  • 同辈选择器(a ~ b)

在使用选择器的时候，尽量避免嵌套多个选择器，因为选择器是从右到左，过多嵌套会加重计算。同时减少重流和重绘。会出发CSS重流重绘的元素可以参考：http://csstriggers.com.

关键渲染路径

image-20200210125405891

上图是在没有JS的情况下，DOM和CSSOM的构建过程，可以看到，DOM和CSSOM是并行的，两个互不影响，而Render Tree的形成时间则是由两者中耗时最长的路径决定的。

而在有JS文件的情况下，由于JS会改变CSS和HTML。所以，JS会阻断HTML的DOM构建，而且，JS的执行是在CSSOM形成之后。所以，在有JS参与的情况，关键路径如下所示：

此时的Render Tree形成由路径上节点耗时的总和。所以，我们需要对关键路径进行优化。

  1. 减少HTML文件大小，使用HTTP Cache

  2. 将不必要的CSS文件只用异步加载，减少CSSOM的构建时间。

  3. 加载JS文件时，使用async

    1
    <script async src='xxx.js' />

  4. Critical CSS