文档中心 >Google PageSpeed

CSS移至头部

概览

通过允许所有CSS在head单元被声明,可以优化浏览器渲染速度。

说明

这种重写,通过确保所有CSS样式(内嵌和外部)在任何body元素引入之前在文档头部解析,可以减少浏览器必须回流文档的次数。所有<style><link>标签,在头部和body里的,全部移到头部,保留他们的相对顺序。

操作

这个重写分析HTML文档,找出所有<style><link>标记,然后把它们的标签移到头部单元后面。

实例

例如,HTML原先是这样的

<html>
  <head>
  </head>
  <body>
    <style type="text/css"> .big { font-size: 8em; } </style>
    <div class="big">
      Hello, world!
    </div>
  </body>
</html>

重写后,是这样的

<html>
  <head>
    <style type="text/css"> .big { font-size: 8em; } </style>
  </head>
  <body>
    <div class="big">
      Hello, world!
    </div>
  </body>
</html>

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/pagespeed/service/MoveCSSToHead