使用外联的Javascript和CSS
我们应该使用外联拓展Javascript和Css还是在页面中内联他们?我们将会发现，使用拓展文件通常会更好。
内联VS外联
让我们开始来权衡下内联和外联这两种方式。
在原始条件下，内联比较快
我制作了两个例子来说明内联JS和CSS比外联引用他们有更快的响应。
内联JS和CSS http://stevesouders.com/hpws/inlined.php
外联JS和CSS http://stevesouders.com/hpws/external.php
内联例子包含一个87K大的HTML文档，所有的JS和CSS都在页面里面。外联的例子包含一个7K的HTML文档，一个59K的样式文件，和三个JS(1K,11K和9K)，总共87K,虽然总大小是一样的，但是内联要去外联的例子快30%-50%。主要原因是因为外联的例子有多个HTTP请求的开销，即便部件是平行下载的，但还是要比内联来的慢。
尽管是这个结构，但在真实的世界中，使用外联文件通常产出更快的页面访问。这个得益于外联文件不需要获取，JS和CSS有机会被浏览器缓存。HTML文档至少包含动态内容，通常不配置为可缓存。内联JS和CSS每一次HTML文件请求时，都会去下载。另一边，如果JS和CSS被浏览器缓存，HTML文档的尺寸减少了，因为减少了好几个HTTP请求。
关键因素是外联JS和CSS与HTML文档相关缓存的频繁度，这个比较难评估，可以使用下面的测量标准。
页面访问数量
每个用户的页面浏览量越少，就是该使用内联JS和CSS的有力论据。想象一下，一个典型的用户访问你的网站每月一次，在每次访问中间，任何的JS和CSS缓存都可能已经失效，即便部件有一个很长的expire头。
另一方面，如果一个典型用户有很多的页面访问量，浏览器更可能有外联部件的缓存。使用JS和CSS外联文件的益处是随着每月每个用户额访问量或者每次session每个用户的页面访问量而水涨船高的。
空缓存VS命中缓存
比较内联和外联时，知道缓存外联文件的潜能非常重要。我们在Yahoo上测量，发现单个用户一天至少命中缓存一次的人数在40%-60%之间。相同的研究表明页面访问命中缓存的数量在75%-85%之间。注意第一个统计的是“单个用户”而第二个统计的是“页面访问"。用户可能一天中碰到一次空缓存访问，但是更多的后来页面访问都来自命中缓存。
这些度量非常依赖网站的类型。知道这些数据帮助评估使用拓展文件相对内联潜在的好处。如果你的网站对你的用户有一个较高的命中缓存，使用外联文件更好。否则，内联会使一种更好的选择。
部件重用
部件在不同网页中重用虑比较大，使用外联；如果重用虑低，使用内联
多因数考虑典型的结果
权衡内联和外联，关键是访问多个HTML请求相关的被缓存的外联JS和CSS的频率。在上面部分说的，我描述了三个指标(页面访问量，空缓存VS命中缓存，和组件重用)能够帮助你做出最好的决定。
很多网站都在这三个指标之中，他们每个用户每月访问5-15个页面，每个用户每次session访问2-5个页面。40%-60%用户每天有一次命中缓存，每天页面访问的75%-85%命中缓存。
考虑这些指标，最好的解决办法是发布JS和CSS为外联文件。
首页
唯一的例外是内联使用在首页上。
两者结合的最佳实践
两个技术在这里介绍，让你同时获得内联和外联两者的益处。
提前下载
首页是网页访问的开始，对于首页我们想要内联js和css，但是对于所有的二级页面使用外联文件。这个完全可以在首页加载完成后，动态地下载二级页面的外联文件。使得外联文件驻留在浏览器缓存中，为用户继续访问其他页面而使用。
预下载例子：
http://stevesouders.com/hpws/post-onload.php
<script type="text/javascript">
function doOnload( ) {
setTimeout("downloadComponents( )", 1000);
}
window.onload = doOnload;
// Download external components dynamically using JavaScript.
function downloadComponents( ) {
downloadJS("http://stevesouders.com/hpws/testsma.js");
downloadCSS("http://stevesouders.com/hpws/testsm.css");
}
// Download a script dynamically.
function downloadJS(url) {
var elem = document.createElement("script");
elem.src = url;
document.body.appendChild(elem);
}
// Download a stylesheet dynamically.
function downloadCSS(url) {
var elem = document.createElement("link");
elem.rel = "stylesheet";
elem.type = "text/css";
elem.href = url;
document.body.appendChild(elem);
}
</script>
动态内联
如果一个首页的服务端知道一个部件是否在浏览器缓存中，它能够做出决定是否使用内联还是外联文件。虽然没有办法让服务端知道浏览器缓存中有什么，但cookie似乎是有用的。返回服务端一个基于session的cookie，服务端基于cookie值出现使用外联，不出现使用内联；
动态内联的例子:
http://stevesouders/hpws/dynamic-inlinling.php
<?php
if ( $_COOKIE["CA"] ) {
// If the cookie is present, it's likely the component is cached.
// Use external files since they'll just be read from disk.
echo <<<OUTPUT
<link rel="stylesheet" href="testsm.css" type="text/css">
<script src="testsma.js" type="text/javascript"></script>
OUTPUT;
}
else {
// If the cookie is NOT present, it's likely the component is NOT cached.
// Inline all the components and trigger a post-onload download of the files.
echo "<style>\n" . file_get_contents("testsm.css") . "</style>\n";
echo "<script type=\"text/javascript\">\n" . file_get_contents("testsma.js") .
"</script>\n";
// Output the Post-Onload Download JavaScript code here.
echo <<<ONLOAD
<script type="text/javascript">
function doOnload( ) {
setTimeout("downloadComponents( )", 1000);
}
window.onload = doOnload;
// Download external components dynamically using JavaScript.
function downloadComponents( ) {
document.cookie = "CA=1";
[snip...]
ONLOAD;
}
?>
