春节期间，我温习了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万。
他将提高网站性能的一系列经验整理成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不用压缩，因为它们本来就是压缩过的
规则五：把样式文件放在网站最顶部
网站加载是一个渐进式渲染的过程，把样式文件放在<head>中可以有效预防白屏问题。
规则六：把脚本文件放在网站最底部
脚本下载会阻塞其它组件的下载，页面也会停止渲染，所以等页面显示出来再加载脚本吧。
规则七：避免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)，文章会优先发布在公众号上。
（完）
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
