七. 使用外部javascript和css

基础知识

页面浏览量(PV)：用户对页面请求访问次数总和。

内联 VS 外置

　　对于两个相同大小的页面，一个使用了内联，只有html需要下载，一个使用了外置，包括一个js和一个css，在用户不带缓存访问页面的时候，内联所有的js和css的效率更快，原因是外置js和css带来额外的http请求开销，1个http请求相对于3个http请求要更快一些。尽管如此，现实中还是使用外部文件会产生较快的访问速度，这是由于外部js和css有机会被浏览器缓存起来，当再次请求相同的js或css的时候，浏览器将不会发出http请求，而是使用缓存的组件，减少了总体需要下载文件的大小。

　　综合来讲，我们一般推荐使用外置的js和css，不过这也要根据自身web的访问场景以及PV做出最优选择。

如何划分组件？

 　　当我们决定使用外置js和css的时候，这时怎样划分js和css并打包到外部文件中成为一个首要考虑的问题。在典型情况下，页面之间的js和css的重用既不可能100%重叠，也不可能100%无关。

　　一种极端的做法是创建一个单独的，联合了所有js的文件，再创建一个包含了所有css的文件。这只要求用户生成一个Http请求，但它增加了用户不带缓存访问的情况下的数据量，同时我们必须清楚：缓存有时会失效，这将带来更多额外的开销。而且，在任何一块独立的js或css改变后，都需要更新文件，并发布新的版本号，这将使所有客户端的旧版本缓存失效。

　　另一种极端的做法是为每个页面提供一组分离的外部文件，这种方式真正做到按需下载，但缺点在于每个页面都产生令响应时间变慢的HTTP请求。

　　对于大多数web应用来说，我们需要一种折中的方案！将页面划分为几种页面类型，然后为每种类型创建单独的js和css。以css为例，我们可以创建一个所有页面都通用的global.css，再针对不同类型的页面，创建对应的css。