Yahoo对Web前端优化的14条经验拔萃

当浏览器通过代理来发送请求时，有可能出现浏览器期望接受的压缩后内容和实际接收到的不一致的情况。解决这一问题的方法是在Web服务器的响应中添加Vary头。Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。由于压缩的决定是基于Accept-Encoding请求头的，因此需要在服务器的Vary响应头中包含Accept-Encoding:

复制代码

Vary: Accept-Encoding

如果网站的用户很少，并且他们处于一个小圈子中，边缘情形浏览器不需要太多关注，可以压缩内容并使用Vary: Accept-Encoding。

如果更注重带宽开销，可以和前一种情形一样，压缩内容并使用Vary: Accept-Encoding。

如果网站拥有大量的、多变的用户群，能够应付较高的带宽开销，并且享有高质量的名声，需要压缩内容并使用Cache-Control: Private。（Google和Yahoo都使用这种方式）

规则5——将样式表放在顶部（Put Stylesheets at the Top）
我们都希望页面能够逐步加载，也就是说，我们希望浏览器能够尽快显示内容。当浏览器逐步加载页面时，页头、导航栏、顶端logo等所有这些都会等待页面的用户提供视觉反馈，这改善了用户体验。将样式表放在底部，为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。

样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。根据HTML规范“和A不一样，[LINK]只能出现在文档的HEAD节中，但其出现次数是任意的”。因此，问题的解决方式应该是遵循HTML规范，使用LINK标签将样式表放在文档的HEAD中。

规则6——将脚本放在底部（Put Scripts at the Bottom）
对响应时间影响最大的是页面中的组件数量，而脚本会阻塞组件的并行下载，带来性能上的问题。HTTP1.1规范建议浏览器从每个主机名并行下载两个组件。如果一个Web页面平均将其组件分别放在两个主机名下，整体响应时间可以减少大约一半。我们可以通过对浏览器默认设置的修改来增加每个主机名并行下载组件的数量，也可以使用CNAME（DNS别名）将组件分别放到多个主机名下。但是，增加并行下载数量通常会带来性能上的开销，过多的并行下载有时反而会降低性能。Yahoo!研究表明，使用两个主机名比使用1、4或10个主机名能带来更好的性能。

需要我们注意的是，下载脚本时并行下载实际上是被禁用的，即使此时使用了不同的主机名，浏览器也不会启动其他下载。因此，如果将脚本放在顶部，脚本会阻塞后面内容的呈现，也会阻塞后面组件的下载。因此，放置脚本最好的地方是页面底部，这不会阻止页面内容呈现，而且页面中的可视组件可以尽早下载。

规则7——避免CSS表达式(Avoid CSS Expressions)
CSS表达式是动态设置CSS属性的一种强大（并且危险）的方式。它从IE5以后的版本被支持，在IE8中已经被废弃。
表达式的问题在于对其进行的求值频率比人们期望的要高。它们不只在呈现页面和大小改变时求值，当页面滚动，甚至用户鼠标在页面上移过时都要进行求值。

减少CSS表达式求值次数的一种方式是使用一次性表达式，如果CSS表达式必须被求值一次，可以在这一次中执行重写它本身。除此之外，还可以使用事件处理器来为特定的事件提供所期望的动态行为。

规则8——使用外部JavaScript和CSS（Make JavaScript and CSS External）
在现实环境中使用外部文件通常会产生较快的页面，因为JavaScript和CSS有机会被浏览器缓存起来。对于内联的情况，由于HTML文档通常不会被配置为可以进行缓存的，所以每次请求HTML文档都要下载JavaScript和CSS。所以，如果JavaScript和CSS在外部文件中，浏览器可以缓存它们，HTML文档的大小会被减少而不必增加HTTP请求数量。

决定是否使用外部文件的关键在于被缓存的外部文件占请求的HTML文档数的比重。如果网站用户在每次会话中进行多次页面访问，同时页面重用了多个脚本和样式表，使用外部文件时很好的选择。

对于大多数网站而言，难以精确度量以判断是否使用内联或外部文件，此时建议是使用外部文件的方式。对于这个问题的一个例外是网站主页，由于主页对于响应时间要求更高，因此更加倾向于内联而不是外部文件。

对于内联文件而言，由于无法利用浏览器缓存，因此给人感觉依然比较低效。我们可以通过加载后下载和动态内联的方式来使得网站主页既可以获得内联的优势，同时也能缓存外部文件。

规则9——减少DNS查找（Reduce DNS Lookups）
DNS对于网站来说会带来开销。通常浏览器查找一个给定主机名的IP要花费20～120毫秒的时间。在DNS查找完成之前，浏览器不能从此主机下载任何东西。

DNS查找可以被缓存起来以提高性能，这种缓存可以发生在ISP或局域网中的一台特殊的缓存服务器上，同时，缓存也会发生在独立的用户机器上。在用户请求一个主机名后，DNS信息会留在操作系统的DNS缓存中，大多数浏览器也拥有自己的缓存，和操作系统缓存相分离。只要浏览器在其缓存中保留了DNS记录，就不会通过操作系统来请求这个记录。

当客户端浏览器和操作系统中DNS缓存同时为空时，DNS查询的数量等于页面中唯一主机名的数量，这些主机名包括了页面的URL、图片、脚本、样式表、Flash等。所以，减少唯一主机名数量，可以减少DNS查询数。

减少唯一主机名数量会潜在的减少页面中并行下载的数量。避免DNS查找降低了响应时间，但减少并行下载可能会增加响应时间。对于这种情形，建议将这些组件放在至少2个，但不要超过4个主机名下。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!