文档中心 >Google PageSpeed
HTML内嵌小资源
概览
通过在HTML里内嵌CSS、JS和图片，可以减少网络往返时间（RTT:Round Trip Time）。
说明
此改写通过直接插入外部的小CSS内容、JavaScript和图像文件到HTML文档，可以减少网页的请求数量。这可以减少花费来显示内容给用户，特别是在旧的浏览器的时间。此改写上不同类型的资源，以及相应的实施例的操作如下。
实例
内嵌CSS
内嵌CSS前HTML代码是这样的
<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue yellow big bold">
Hello, world!
</div>
</body>
</html>
而small.css的代码是这样的
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }使用内嵌CSS的方法重写后，HTML代码是这样的
<html>
<head>
<style>
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div class="blue yellow big bold">
Hello, world!
</div>
</body>
</html>
这样，浏览器将去除对small.css的请求，变为把代码写在HTML里。
内嵌JavaScript
例如，HTML原先是这样写的
<html>
<head>
<script type="text/javascript" src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
而small.js的代码为
/* contents of a small JavaScript file */
内嵌JavaScript后，HTML代码变为这样
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div class="blue yellow big bold">
Hello, world!
</div>
</body>
</html>
这样，浏览器将去除对small.js的请求，变为把代码写在HTML里。
内嵌图片
这里将使用到一种图片转码技术，先把图片转换成base64编码，然后使用data:URL直接把编码写入HTML里。
例如，原先HTML代码是这样的
<html>
<head>
<title>Image test example</title>
</head>
<body>
<img src="images/Cuppa.png">
</body>
</html>
通过重写，HTML代码变成这样
<html>
<head>
<title>Image test example</title>
</head>
<body>
<img src="data:image/png;base64,...Base64 data">
</body>
</html>
这样，浏览器将去除对Cuppa.png的请求，变为内嵌到HTML里。
注，使用图片内嵌的方法时需要慎重考虑图片的base64编码的代码长度，并且视整个HTML页面有多少图片以及内嵌图片后HTML的总体积，而选择是否需要内嵌图片。
本页面中的内容已获得知识共享署名3.0许可，并且代码示例已获得Apache 2.0许可；另有说明的情况除外。
文章源地址：https://developers.google.com/speed/pagespeed/service/InlineSmallResources