Web前端性能优化教程05：网站样式和脚本

本文是Web前端性能优化系列文章中的第五篇，主要讲述内容：网站样式和脚本代码的放置位置、使用外部javascript和css。完整教程可查看：Web前端性能优化

一、将样式表放在顶部

可视性回馈的重要性

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