解读Yahoo!网站性能优化组定义的34条准则 - 使用外部Javascript和CSS文件

使用外部Javascript和CSS文件

许多这些性能优化的规则处理如何管理外部组件。然而，在这些因素出现之前你应该问一个更基本的问题：JavaScript和CSS是否应该放在外部文件中或内嵌在网页里？

在现实世界中网页使用外部文件普遍会快一些，因为JavaScript和CSS文件会被浏览器缓存。内嵌的JavaScript和CSS会在每次HTML文件下载时一起下载，这虽然减少了一些HTTP请求，但必然增加HTML文件的大小。另一方面，如果浏览器将JavaScript和CSS等外部文件缓存了，HTML文件大小减少的同时也不增加HTTP请求数。

关键因素是考察使用被缓存的外部JavaScript和CSS的频率相对与HTML文件请求数。这个因素，虽然难以量化，但可以利用各种指标来衡量。如果用户每次在你的网站上有多个PV，并且许多网页重用了相同的脚本和样式表，那么使用外部文件带来很大的好处。

 

许多网站不符合此定律。这些网站最好的解决办法通常是把JavaScript和CSS作为外部文件部署。唯一的例外情况，需要让JavaScript合CSS内置的网页，如雅虎首页和My Yahoo！。这些主页，每个session中PV不多（也许只有一个），因此我们发现内置的JavaScript和CSS可以得到更快的最终用户响应时间。

对于头版通常是许多PV的第一页，利用内置一些内容来减少HTTP请求数，同时利用使用外部文件的缓存等技术。一个技术是在第一页用内置的JavaScript和CSS，当夜猫完成加载后又动态地下载外部文件。后续的网页需要用到的外部文件，应该已经在浏览器的缓存。