文档中心 >Google PageSpeed

HTML内嵌小资源

概览

通过在HTML里内嵌CSS、JS和图片，可以减少网络往返时间（RTT:Round Trip Time）。

说明

此改写通过直接插入外部的小CSS内容、JavaScript和图像文件到HTML文档，可以减少网页的请求数量。这可以减少花费来显示内容给用户，特别是在旧的浏览器的时间。此改写上不同类型的资源，以及相应的实施例的操作如下。

实例

内嵌CSS

内嵌CSS前HTML代码是这样的

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="small.css">
  4.   </head>
  5.   <body>
  6.     <div class="blue yellow big bold">
  7.       Hello, world!
  8.     </div>
  9.   </body>
  10. </html>

而small.css的代码是这样的

  1.   .yellow {background-color: yellow;}
  2.   .blue {color: blue;}
  3.   .big { font-size: 8em; }
  4.   .bold { font-weight: bold; }

使用内嵌CSS的方法重写后，HTML代码是这样的

  1. <html>
  2.   <head>
  3.     <style>
  4.       .yellow {background-color: yellow;}
  5.       .blue {color: blue;}
  6.       .big { font-size: 8em; }
  7.       .bold { font-weight: bold; }
  8.     </style>
  9.     </head>
  10.   <body>
  11.     <div class="blue yellow big bold">
  12.       Hello, world!
  13.     </div>
  14.   </body>
  15. </html>

这样，浏览器将去除对small.css的请求，变为把代码写在HTML里。

内嵌JavaScript

例如，HTML原先是这样写的

  1. <html>
  2.   <head>
  3.     <script type="text/javascript" src="small.js"></script>
  4.   </head>
  5.   <body>
  6.     <div>
  7.       Hello, world!
  8.     </div>
  9.   </body>
  10. </html>

而small.js的代码为

  1. /* contents of a small JavaScript file */

内嵌JavaScript后，HTML代码变为这样

  1. <html>
  2.   <head>
  3.     <script type="text/javascript">
  4.       /* contents of a small JavaScript file */
  5.     </script>
  6.   </head>
  7.   <body>
  8.     <div class="blue yellow big bold">
  9.       Hello, world!
  10.     </div>
  11.   </body>
  12. </html>

这样，浏览器将去除对small.js的请求，变为把代码写在HTML里。

内嵌图片

这里将使用到一种图片转码技术，先把图片转换成base64编码，然后使用data:URL直接把编码写入HTML里。

例如，原先HTML代码是这样的

  1. <html>
  2.   <head>
  3.     <title>Image test example</title>
  4.   </head>
  5.   <body>
  6.     <img src="images/Cuppa.png">
  7.   </body>
  8. </html>

通过重写，HTML代码变成这样

  1. <html>
  2.   <head>
  3.     <title>Image test example</title>
  4.   </head>
  5.   <body>
  6.     <img src="data:image/png;base64,...Base64 data">
  7.   </body>
  8. </html>

这样，浏览器将去除对Cuppa.png的请求，变为内嵌到HTML里。

注，使用图片内嵌的方法时需要慎重考虑图片的base64编码的代码长度，并且视整个HTML页面有多少图片以及内嵌图片后HTML的总体积，而选择是否需要内嵌图片。

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

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