Web前端性能优化31项

“ High performance web sites lead to higher visitor engagement, retention and conversions ”

高性能网站会吸引以及留住更多的访问者!—— 引用于Google PageSpeed

Web性能最佳实践

当你用Page Speed(“Page Speed”是什么?请参考我的博文【用Page Speed插件来提高网站性能)】来“描述”网页时,它会依赖一系列不同的“准则”来评估你的网页性能。这些“准则”是学Web前端技术的最佳实践。

你可以应用在任何阶段的web前端开发中去,接下来将会一一列出每条“准则”是怎样的?都具有哪些内容?因此,不管你是否在使用Page Speed这个插件,或者说你还是Web前端开发的新手,都没关系,你随时都可以运用这些优化准则,希望你能够更好地实现这些优化准则以及把这些优化技术融入到Web前端开发中去。

性能最佳实践分6大类

Page Speed工作原理是在网页加载下来的过程中,Page Speed就根据这些准则对当前网页进行一系列评估。 而性能最佳实践涉及到很多过程,包括“1、解析DNS域名”、“2、建立TCP协议的链接”和“3、传送HTTP协议请求”等,下载Web资源,从缓存那里获取资源,解析并执行脚本和加载及渲染页面。从这里也可以看出,Page Speed做的工作还是蛮多的, 别看这个过程是有点短暂……如标题显示,这些准则可归为6大分类,包含不同方面页面加载的优化。

1. 优化缓存

大部分的网页资源都会很频繁的改变,例如CSS文件、图片、JavaScript文件等。而这些资源通过网络下载下来是需要一定时间的,如何把时间缩短呢?HTTP缓存通过浏览器或者代理器允许这些文件可以保存至本地上,或者缓存一段时间。这些文件资源一旦缓存了起来,浏览器或者代理器就会直接从缓存区里取出而不需要通过网络重新下载下载再缓存起来。所以说,这种方法(机制)是可以达到双赢的效果: 减少【round-trip time】(RTT)次数减少下载量 ,另外,还能显著地减少网络带宽,因此当你托管你的网站时, 就会减少你的服务费用,省下一笔钱。

1). 使用浏览器缓存

HTTP/S 通过浏览器支持在本地上缓存静态(变动较少)的资源,我们推荐你配置你的网络服务器,明确地设置缓存的头信息,利用这些头信息都应用到所以的静态资源上,而不只是局部,例如单纯只是图片。可以被缓存起来的文件有JS、CSS、图片、媒体文件、PDF文件和Flash文件等,一般来说,HTML却不是静态文件,所以不建议被缓存。

HTTP/1.1 提供如下缓存“响应头”的方法:

指定 Expires和 Cache-Control: max-age 两者其中一个,和 Last-Modified和ETag两者其中一个都是很有必要的, 但是如果都定义两者的话,那就是一种浪费而且是不必要的!

Spy 22 June 2013