文档中心 >Google PageSpeed

CSS移至头部

概览

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

说明

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

操作

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

实例

例如，HTML原先是这样的

  1. <html>
  2.   <head>
  3.   </head>
  4.   <body>
  5.     <style type="text/css"> .big { font-size: 8em; } </style>
  6.     <div class="big">
  7.       Hello, world!
  8.     </div>
  9.   </body>
  10. </html>

重写后，是这样的

  1. <html>
  2.   <head>
  3.     <style type="text/css"> .big { font-size: 8em; } </style>
  4.   </head>
  5.   <body>
  6.     <div class="big">
  7.       Hello, world!
  8.     </div>
  9.   </body>
  10. </html>

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

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