高性能网站建设指南(八)使用外部JavaScript和CSS
in Blog
JavaScript和CSS是应该包含在外部文件中还是内联在页面中？ 通常使用外部文件更好。如果JavaScript和CSS是外部文件，浏览器就能缓存它们，HTML文档的大小减小，而且不会增加HTTP请求的数量。
页面浏览量（Page Views）
每个用户产生的页面浏览量越少，内联JavaScript和CSS的论据越强势。反之，使用外部文件提供JavaScript和CSS带来的收益会随着每用户每月的页面浏览量或每用户每会话产生的页面浏览量的增长而增加。
空缓存VS完整缓存（Empty Cache VS. Primed Cache）
在比较内联和外部文件时，知道用户缓存外部组件的可能性这一点很重要。这些度量结果随着网站的类型而变。知道这些统计值有助于评估使用外部文件相对与使用内联带来的潜在收益。如果你的网站本质上能够为用户带来高完整缓存率，使用外部文件的收益就更大。如果不大可能产生完成缓存，则内联是更好的选择。
组件重用（Component Reuse）
如果你的网站中每个页面使用了相同的JavaScript和CSS，使用外部文件可以调高这些组件的重用率。在这种情况下使用外部文件更加具有优势，因为当用户在页面间导航时，JavaScript和CSS组件已经位于浏览器的缓存中了。
相反，如果没有任何两个页面共享相同的JavaScript和CSS，重用率就会非常低
当把JavaScript和CSS打包到外部文件中时，应该把边界划在哪里？
如果你的网站不符合这两种极端的情况，最好的答案是折中处理。
主页使用内联的方式反而更好。
两全其美（The Best of Both Worlds）
- 加载后下载（Post_onload Download）
当主页使用内联的方式后，我们希望能为后续的页面浏览量提供外部文件。这可以通过在主页加载完成后动态下载外部组件来实现（通过onload事件）。
- 动态内联（Dynamic Inlining）
如果服务器知道一个组件是否在浏览器的缓存中，它可以在内联或使用外部文件之间做出最佳的选择。可以使用cookies做指示器。如果cookie不存在，就内联JavaScript和CSS。反之，浏览器缓存中可能已存在外部组件了，并使用了外部文件。
