您的位置：首页 > 运维架构 > 网站架构

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

2017-02-15 00:00 357 查看

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

（完）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网站性能

相关文章推荐

新的分享

章节导航