《高性能网站建设》（9）--使用外部JavaScript和CSS

通常情况下，JavaScript和CSS包含在外部文件中更好

纯粹而言，内联快一些

在下载量相同的情况下，内联比外部更快一些（外部文件需要承担多个HTTP请求带来的开销，由此可见减少HTTP请求数量的重要性）。尽管外部示例可以从样式表和脚本的并行下载中获益，但是HTTP请求数量的差距使内联示例在响应时间上更快一些。

但是现实中还是使用外部文件会产生更快的页面，外部文件所带来的收益是JavaScript和CSS文件有机会被浏览器缓存起来（如果JavaScript和CSS是外部文件，浏览器就能缓存它们以减小HTML文档的大小并且不会增加HTTP请求的数量）

页面浏览量

用户如果能够产生较多的页面浏览量，浏览器很可能将（具有长久Expires头的）外部文件放在其缓存中。

组件重组

两种极端：

1.页面的JavaScript和CSS的重用既不可能100%重叠也不可能100%无关。

这一种极端就是为每一个页面提供一组分离的外部文件。

缺点在于每个页面都强制用户使用另外一组外部组件并产生令响应时间变慢的HTTP请求。

优点是这种方式对于普通用户只访问一个页面和很少进行跨页访问的网站来说是有意义的。

2.创造一个单独的，联合了所有JavaScript的文件，在创见一个包括所有CSS的文件。

这种极端只要求用户生成一个HTTP请求，但是增加了用户首次进行页面浏览时的下载数据量。

缺点是用户浏览页面时要下载的JavaScript和CSS要多于所需的数量，而且任何一块独立的脚本和样式表改变之后，都需要更新文件（先前缓存的版本无效）。

优点是这种方式对于那些每用户每月会话数量较高，普通用户在一个会话中访问多个不同页面的网站室友意义的。

如果不符合这两种极端情况，那就折中。

将页面划分成集中页面类型，为每个类型创建单独的脚本和样式表。这比维护一个单独的页面要复杂，但通常比为每个页面维护不同的脚本和样式表要容易，并且对于给定的任意页面都只需要下载很少的多余JavaScript和CSS.

总结就是你做出的JavaScript和CSS外部文件边界相关的决定影响着组建的 重要程度。

典型的对比结果

在对内联和使用外部文件进行分析对比时，关键在于与HTML文档请求数量相关的，外部JavaScript和CSS组件被缓存的频率。

主页

1.页面浏览量

2.空缓存VS完整缓存

3.组件重用

两全其美

两种技术方法可以激活的内联的优势也可以缓存外部文件：

1.加载后下载

可以通过在主页加载完成后动态下载外部组件来实现（通过onload事件）以便能够将外部文件放在浏览器的缓存中以便用户接下来访问其他页面。

2.动态内联

在服务器不能查看浏览器缓存中有些什么的情况下，可以使用cookies作指示器(有cookie则表示有可能外部组件位于浏览器的缓存中并使用了外部文件）。如果cookie不存在，就可以内联JavaScript和CSS。

当用户第一次访问页面时，服务器发现没有cookie，于是生成一个内联了组件的页面。然后服务器添加JavaScript来在页面加载后动态下载外部文件（并设置cookie）。下依稀访问页面时，服务器看到了cookie,就会生成一个使用外部文件的页面。