优化网站设计（三十四）：将组件直接打包到页面

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow 这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第三十二条原则：Pack Components Into a Multipart Document （将组件直接打包到页面）。

这是一个特殊的技术，它在一个我们耳熟能详的互联网应用中使用很广泛：邮件和邮件附件。我们可以在一个邮件中包含一个或者多个附件，这些附件（虽然本身是独立的文档）可以作为邮件正文的一部分，直接嵌入到邮件中。这样做的好处就是用户收取邮件的时候，其实只需要一个连接（一次请求）就可以完成，而不需要先用一个请求得到邮件，然后再分别用多个请求去得到附件。

【备注】邮件中还可以直接插入图片，这种图片也是作为正文的一部分被编码进去的，无需单独用一个请求去获得。

这个理念用到网页中也具有一定的意义，正如我们之前讨论到的那条原则：优化网站设计（一）：减少请求数 。

网站开发中也确实有这样的技术来对这种需求进行支持，例如我们可以使用Data:url这种做法将某些小数据（图片，样式表，脚本）直接嵌入到网页中。可以参考 http://en.wikipedia.org/wiki/Data:_URL。

常见的几个用法如下：

• 可以在Html的Img对象中使用，例如  <img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
• 可以在Css的background-image属性中使用，例如

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}

• 可以在Html的Css链接处使用，例如

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

• 可以在Html的Javascript链接处使用，例如

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

这里的一个小的难点，就是如何将图片、样式表、脚本生成为base64的字符串。好在有一些不错的工具，例如：

1. http://www.greywyvern.com/code/php/binary2base64

 

将组件直接打包到页面的好处是减少了请求数，但它的问题就是增加了页面体积，同时可能存在一定的浏览器兼容性问题（这个问题现在已经较为不严重了）。

所以事情是相对的，当这些组件较小的时候（而且重用机会不大的话），可以考虑将它们打包进网页。反之，就应该单独用一个文件来保存他们，然后在网页中进行引用。这个做法就好比，所有邮箱对于附件大小都是有所限制的，如果你要传输很大的附件，就只能采取将附件先放在网络上一个位置，然后在邮件中提供下载链接。（QQ邮箱在这方面做得相当的不错）。