春节期间,我温习了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),文章会优先发布在公众号上。
(完)