CSS移至头部

文档中心 >Google PageSpeed

概览

通过允许所有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