分割CSS

对于不同的浏览终端，同一终端的不同模式，我们可能会提供不同的规则集：

@media  print  {
  html  {

      font-family:  'Open Sans';

      font-size:  12px;

  }
}
@media orientation:landscape  {

  //
}

如果将这些内容写到统一个文件中，浏览器需要下载并解析这些内容（虽然不会实际应用这些规则）。更好的做法是，将这些内容通过对link元素的media属性来指定：

<link href="print.css"  rel="stylesheet"  media="print">
<link href="landscape.css"  rel="stylesheet"  media="orientation:landscape">

这样，print.css和landscape.css的内容不会阻塞Render Tree的建立，用户可以更快的看到页面，从而获得更好的体验。

高效的CSS规则

CSS规则的优先级

很多使用SASS/LESS的开发人员，太过分的喜爱嵌套规则的特性，这可能会导致复杂的、无必要深层次的规则，比如：

#container  {

  p  {

      .title  {

          span  {

              color:  #f3f3f3;

          }

      }

  }

}

在生成的CSS中，可以看到：

#container  p  .title span  {

  color:  #f3f3f3;

}

而这个层次可能并非必要。CSS规则越复杂，在构建Render Tree时，浏览器花费的时间越长。CSS规则有自己的优先级，不同的写法对效率也会有影响，特别是当规则很多的时候。这里有一篇关于CSS规则优先级的文章可供参考。

使用GPU加速

很多动画都会定时执行，每次执行都可能会导致浏览器的重新布局，比如：

@keyframes  my  {

  20%  {

      top:  10px;

  }

  50%  {

      top:  120px;

  }

  80%  {

      top:  10px;

  }

}

这些内容可以放到GPU加速执行（GPU是专门设计来进行图形处理的，在图形处理上，比CPU要高效很多）。可以通过使用transform来启动这一特性：

@keyframes  my  {

  20%  {

      transform:  translateY(10px);

  }

  50%  {

      transform:  translateY(120px);

  }

  80%  {

      transform:  translateY(10px);

  }

}

异步JavaScript

我们知道，JavaScript的执行会阻塞DOM的构建过程，这是因为JavaScript中可能会有DOM操作：

var element = document.createElement('div');
element.style.width = '200px';
element.style.color = 'blue';

body.appendChild(element);

因此浏览器会等等待JS引擎的执行，执行结束之后，再恢复DOM的构建。但是并不是所有的JavaScript都会设计DOM操作，比如审计信息，WebWorker等，对于这些脚本，我们可以显式地指定该脚本是不阻塞DOM渲染的。

<script src="worker.js" async></script>