性能提升的14条规则（八）

规则8——使用外部的JavaScript和CSS

内联VS外置

内联示例只有一个HTML文档，其大小为87KB，所有的 JavaScript和CSS都包含在HTML文件自身中。外部示例包含一个HTML文档（7KB）、一个样式表（59KB）和三个脚本（1KB、11KB和9KB），总计87KB。尽管所需下载的总数据量是相同的，内联示例还是逼外部示例快30%~50%。这只要是因为外部示例需要承担多个HTTP请求带来的开销。尽管外部示例可以从样式表和脚本的并行下载中获益，但一个HTTP请求与五个HTTP请求之间的差距导致内联示例更快一些。

尽管结果如此，现实中还是使用外部文件会产生较快的页面。这是由于本例中没有涉及的、外部文件所带来的收益——JavaScript和CSS文件有机会被浏览器缓存起来。HTML文档——至少是那些包含动态内容的HTML文档——通常不会被配置为可以进行缓存。当遇到这种情况时（HTML文档没有被缓存），每次请求HTML文档都要下载内联的JavaScript和CSS。另一方面，如果JavaScript和CSS是外部文件，浏览器就能缓存它们，HTML文档的大小减小，而且不会增加HTTP请求的数量。

关键因素是，与HTML文档请求数量相关的，外部JavaScript和CSS之间被缓存的频率。这个因素尽管难以量化，但可以通过下面的手段进行衡量。

页面查看

每个用户产生的页面查看越少，内联JavaScript和CSS的论据越强势。想像一个普通用户每个月只访问你的网站一次。在每次访问之间，外部JavaScript和CSS文件很有可能从浏览器的缓存中移除，即使该组件有一个长久的Expires头。

另一方面，如果普通用户能够产生很多的页面查看，浏览器很可能将（具有长久的Expires头的）外部文件放在其缓存中。使用外部文件提供JavaScript和CSS带来的收益会随着每用户每月的页面查看次数或每用户每会话产生的页面查看次数的增加而增加。

空缓存VS完整缓存

在比较内联和外部文件时，知道用户缓存外部组件的可能性这一点非常重要。具有完整缓存的页面查看所占的百分比比携带完整缓存的唯一用户的百分比高，这是因为很多用户在一次会话中进行了多次页面查看。每天，用户可能只有开始的一次访问携带的是空缓存，之后的多次后续页面查看都具有完整缓存。