《高性能网站建设指南》阅读笔记_规则8- 使用外部javascript和css

首先举一个例子。

内联js和css示例，只有一个HTML文档，大小为87k，所有的js和css都包含在HTML文件自身中。

http://stevesouders.com/hpws/inlined.php

外部的js和css示例，包含一个HTML文档7k，一个样式表59k，三个脚本1k，11k，9k。

http://stevesouders.com/hpws/external.php

 

纯粹而言，内联CSS和JS要快一些。这主要是因为外部的示例需要承担多个http请求带来的开销。尽管外部示例可以从样式表和脚本的并行下载中获益，但是明显第一个因素影响的更大一些。这也就是它放在第一位的原因。但外部CSS和JS文件有机会被浏览器缓存起来。当一个页面被重复访问时，就不需要重复下载外部CSS和JS了。既减小了需要下载文档的大小，又不会产生多余的http请求数量。

 

所以，使用内嵌式的还是外联式的，需要通过一定的手段衡量。

1、 页面查看。每个用户产生的页面查看越少，内联的越占优势。（比如，一个月只访问你的网站一次，即使有缓存，下次访问的时候也很有可能被移除了）相反，访问页面的次数越多，外联的越有优势。

2、 缓存，如果没有设置缓存，肯定的是内联的有优势

3、 组建重用，简单的说就是组件重用度低采用内联的好，高则外联的好。这一条是建立在用户属否在一次回话中访问网站的多个页面。只有访问多个页面才有意义。有两种极端情况：一个是每个页面使用都使用各自单独的组件，没有公用部分。这样做会产生过多的http请求数量，只对用户只访问一个页面时有意义。另一种极端是创建一个单独的js文件，包含所有的页面使用的js，再创建一个css包含所有页面使用的css。用户在访问一个页面以后所有的js和css都将会被缓存。在访问多个页面并且访问非常频繁的时候有意义。

事实上页面之间的js和css不可能100%不重合，也不可能100%重合。所以要使用中间情形。对于我们的网站，访问量比较大，如果访问了一般情况下就不会只访问一个页面。所以我们使用外联的。既有公用的common.js，header.js还有每个页面特有的js。符合这一点。我们的网站使用这种外联的最为合适。

那么是不是所有的页面都适合使用外联的最好？有一个例外，就是主页。

这里的主页是指作为浏览器默认页的URL，比如http://hao.360.cn/360导航页。

分析：1、页面查看，虽然访问量非常高，但是通常每个回话只访问一个页面。

2、缓存。完整缓存的比例要比其他的网站更低，处于安全原因，很多用户选择每次关闭浏览器的时候自动清空缓存，所以下一次访问的时候依旧是空缓存状态。

3、组件重用，一般情况下都是跳转到其他的网站去，所以无所谓组件重用。

 

两全其美：

本书中还介绍了两种技术，使页面既可以获得内联的优势，同时又能缓存外部文件。

加载后下载

上面提到的360导航适合使用内联，但是并不是说有的主页都是只访问一个页面，比如我们淘车的网站。我们既希望使用内联快速的加载出页面，又希望通过缓存外部组件的形式为后面其他页面的浏览做准备。所以就会用到下载后加载的技术。

 

示例：

<script>
function doOnLoad()
{
setTimeout("downComponents()", 1000);
}
window.onload = doOnLoad;

function downComponents()
{
downJS("http://stevesouders.com/examples/testsma.js");
downCSS("http://stevesouders.com/examples/testsm.css");
}
function downJS(url)
{
var elem = document.createElement("script");
elem.src = url;
document.body.appendChild(elem);
}
function downCSS(url)
{
var elem = document.createElement("link");
elem.rel = "stylesheet";
elem.type = "text/css";
elem.href = url;
document.body.appendChild(elem);
}
</script>

加载后下载是将doOnload函数内联到文档的onload事件。在1秒的延迟之后（确保页面呈现完毕），就会下载所需要的js和css文件，通过创建对应的DOM元素（script和link）并赋予制定的URL实现。在这种页面中。Js和css会被加载到页面中两次（先是内联的，然后是外部的）要使其能够工作，必须处理双重定义。例如脚本可以定义但不能执行任何函数（至少不能让用户发觉）。使用了相对单位（百分比）的css也会产生问题。解决办法：将这些组件放在一个不可见的Ifeame中。（我试过了。的确不回执行）

 

动态内联：

配合加载后下载使用，下载组件后设置cookie。然后重新加载页面后判断有没有cookie，有的话使用外部的，没有的话使用内联的。这样就能在内联和外部之间做出只能选择，从而改善响应时间。

我们的网站我看了一下，没有使用这两种技术，易车的首页也没有，但是汽车之家的，她的js是压缩过的，阅读起来非常费劲，所以我只通过查找关键字的方法找了一下，他有createElement("script")但是没有createElement("link")，其他的比如setTimeout等关键字也存在，所以并不是很确定他们使用没有，网上有人是不建议使用这种方法的。不管怎样，如果这真是个好方法的话，我们应该考虑。