提高网站性能的14条黄金法则

春节期间，我温习了Steve Souders写的High Performance Web Sites: Essential Knowledge for Front-End Engineers。

高性能网站建设

Steve Souders目前在Google工作，他的这两本书(另外一本是Even Faster Web Sites: Performance Best Practices for Web Developers
)，是他多年工作经验的一个积累，也诠释了提高网站性能的最佳实践。他是YSlow的作者，这是一个FireBug的插件，下载量已经超过100万。

Steve Souders

他将提高网站性能的一系列经验整理成14条法则，我简要阐述如下：

规则一：减少HTTP请求

三种方法可以减少图片的下载：Image Maps、CSS Sprites(雪碧图)和内联图片。同时还可以通过将多个脚本打成一个脚本文件，多个CSS文件打成一个CSS文件来减少HTTP请求。

规则二：使用CDN

选择一家CDN提供商，然后把静态文件全部放上去。

规则三：添加Expires头

• HTTP1.0时代，添加Expires头来控制脚本/样式/图片等文件在浏览器中缓存过期的时间
• HTTP1.1时代，通过Cache-Control: max-age=315360000头来控制脚本/样式/图片等文件在浏览器中缓存过期的时间
• 如果在这期间如果你修改了文件，那么可以给它换一个名字，来更新浏览器端的缓存

规则四：启用Gzip压缩

• HTTP1.1开始，你可以在头里面添加Accept-Encoding: gzip, deflate来启用压缩，较少文件大小
• 所有基于文本的文件都可以压缩，图片和PDF不用压缩，因为它们本来就是压缩过的

规则五：把样式文件放在网站最顶部

网站加载是一个渐进式渲染的过程，把样式文件放在中可以有效预防白屏问题。

规则六：把脚本文件放在网站最底部

脚本下载会阻塞其它组件的下载，页面也会停止渲染，所以等页面显示出来再加载脚本吧。

规则七：避免CSS表达式

• 下面这个就是CSS表达式：

P {
    width: expression( setCntr( ), document.body.clientWidth<600 ? "600px" : "auto" );
    min-width: 600px;
    border: 1px solid;
}

• CSS表达式的问题就是它的计算次数远高于人们想象
• 使用One-Time Expressions和Event Handlers可以解决这个问题

规则八：把JavaScript和CSS放在外部文件中

把JavaScript文件和CSS文件放在外部文件中，比内联要好很多

规则九：减少DNS查询

• 大多数网站的页面上都有几十个组件，把它们分发到至少两个但不超过四个域名上，可以减少DNS查询
• 使用Keep-Alive可以让TCP/IP重用连接，也可以减少DNS查询

规则十：压缩JavaScript

压缩和混淆JavaScript和CSS文件，可以减少文件的大小

规则十一：避免重定向

• 304 Not Modified不是一个真正的重定向
• 301 Moved Permanently永久重定向
• 302 Moved Temporarily临时重定向
• 重定向阻塞所有组件下载，页面一片空白

规则十二：去掉重复脚本

不要诧异，包含重复的脚本文件真的在许多网站上都存在。

规则十三：重新配置或者不使用ETags

相同的文件，从A服务器下载获取的ETag和从B服务器下载获取的ETag不同，这会造成不必要的下载

规则十四：使Ajax可缓存

预热一部分Ajax请求并缓存到本地

总结

总结上述的十四条宝贵经验，我们可以知道提高网站性能的就是靠两点：缓存和减少文件大小，而这两点都是为了减少HTTP请求，提高响应速度，执此理念于己心，必能使网站性能上升一个层次。

关注

欢迎关注我的公众号：代码人生（coodelife)，文章会优先发布在公众号上。

代码人生

（完）