一、将样式表放在顶部

可视性回馈的重要性

进 度指示器有三个主要优势——它们让用户知道系统没有崩溃，只是正在为他或她解决问题；它们指出了用户大概还需要等多久，以便用户能够在漫长的等待中做些其 他事情；最后，它们能给用户提供一些可以看的东西，使得等待不再是那么无聊。最后一点优势不可低估，这也是为什么推荐使用图形进度条而不是仅仅以数字形式 显示预期的剩余时间。在Web的世界里，Html页面的逐步呈现就是很好的进度指示器。

将没有立即使用的css放在底部是错误的做法

通常组件的下载是按照文档中出现的顺序下载的，所以将不需要立即使用到的组件css(比如需要用户点击登录弹出框需要用到的样式)放在底部，可以得到一个加载很快的页面。然而这个推论其实是错误的，IE8以下(包括IE8)的工作方式是如果css表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西，这时整个浏览器显示都是空白，直到css加载完毕，这就失去了提供可视化回馈的机会，让用户感觉到缓慢。

不过，更高级版本的IE和其他浏览器已经克服了“白屏”问题，所以这种情况已经不复存在。

无样式内容的闪烁

这里将讨论另外一种出现的情况，当我们将css放在底部，页面可以正常逐步呈现，但在css下载并解析完毕之后，已经呈现的文字和图片就要用新的样式重绘了，这就是“无样式内容的闪烁”，这将是一种不好的用户体验。

CSS的最佳摆放位置

使用LINK标签将样式表放在文档HEAD中。

二、将脚本放在底部

并行下载

浏览器下载组件的时候并不是每次只下载一个组件，而是实现了并行下载的机制。HTTP规范1.1建议浏览器从每个主机名并行地下载两个组件。既假如页面的所有组件都来自于一个主机名，则每次只能同时下载两个组件。如果组件使用了两个主机名，而且组件的主机名分配均匀，则每次并行下载的数量变成了2*2=4。不过，当代的浏览器普遍实现都超过了2个并行下载，不同的浏览器设置都有所不同。

脚本阻塞下载

并行下载组件能加快页面的加载速度，然而，在下载脚本的时候并行下载实际上是被禁用的，即使其他组件使用了不同的主机名，浏览器也不会启动其他的下载。原因如下：1. 脚本可能使用了document.write来修改页面内容，因此浏览器会等待，以确保能够恰当地布局；2. 为了保证脚本能够按照正确的顺序执行，如果并行下载多个组件，就无法保证响应是按照特定顺序到达浏览器的。

所以，脚本放在越靠近顶部的地方将越延迟用户的可视化反馈，这不是一种良好的用户体验，会让用户感觉到缓慢。

最佳做法

放置脚本的最好地方是页面的底部，这不会阻止页面内容的呈现，而且页面的可视化组件可以尽早下载。以博客园为例，博客园就把google流量分析的js放在底部，同时把下载Blog新闻和Blog侧边栏的js执行函数放在了底部。

三、使用外部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。