使用外部的JavaScript和CSS (Make JavaScript and CSS External)

tag:javascript,css

很多性能规则都是解决怎样处理独立的组件的问题的。但是，考虑这些之前，你应该先考虑一个更基本的问题：JavaScript和CSS应该被放于外部的文件，还是内联在页面里？

在实际应用中使用外部的文件往往产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和CSS会在每次请求页面时下载。这会减少所需的HTTP请求数，但增大HTML文档的体积。而另一方面，如果放在外部文件里的JavaScript和CSS被浏览器缓存，则既不用增加HTTP请求的数量，HTML文档的体积也会减少。

关键的问题是，外部的JavaScript和CSS的组件被缓存的频率和HTML文档被请求的次数相关。虽然很难去量化，但可以被用很多指标衡量。如果你的网站的用户在每个会话中浏览了很多网页而且很多页面重用了相同的JavaSctipt和样式表，缓存外部文件是有很大潜在的好处的。

很多网站都符合这样的指标。对于这些网站来说，最好的解决方案是把JavaScript和CSS发布为单独的文件。唯一的例外，对于主页，内联的文件更好一些，例如 Yahoo!'s front page 和 My Yahoo!。主页在每个会话中只有很少浏览（也许只有一次），你会发现内联的 JavaScript和CSS会让终端用户的响应更快。

对于有很多页面浏览量的首页来说，有很多能平衡内联文件所提供的HTTP请求减少的效果与外部文件缓存获得的好处的技巧。一种这样的技巧就是把JavaScript和CSS内联在说夜里，但在页面完成加载时动态下载外部文件。随后的页面会调用浏览器中已经缓存的外部文件。