人人都能做的性能优化之 web 前端优化
Web 优化已经越趋成熟,不再那么扑朔迷离。在这里,我们跟据一些优化实践准则应用于
perfgeeks , 并 进 行 了 记 录 。 Pefgeeks 的 系 统 软 环 境 是 CentOS5.3 + Apache2.2.3 +
Wordpress2.9。优化的工作方式,一般都是:快照 + 分析 + 变更 + 快照。让我们开始吧…
看到这份快照,我们就可以形成一个最简单的统计:
1,请求数量:8 = 5 + 2 + 1 (5 个图片、2 个 CSS 文件、1 个 html 文档)
2,发送包大小: 3400bytes
3,响应包大小: 146081bytes
4,页面加载时间: 10.296 秒
合并外置 Javascript 文件或 CSS 文件
我们通过快照 1 的观察,很容易发现这里一共加载了二个 CSS 文件。其中 codesnippet.css
文件很小,1kb 都不到。并且,该文件用于文本代码高亮显示插件 codesnippet。而高文本
代码高亮显示,几乎每个页面都会用到(考滤到这是一个技术 blog)。所以,我们准备把
codesnippet.css 合并到 style.css 这个文件中去。并且把插件用于加载该 css 文件的代码行注
释掉。然后,我们再来观察结果
看到这份快照,我们可依然可以形成一个统计:
1,请求数量:7 = 5 + 1 + 1 (5 个图片,1 个 CSS 文件,1 个 html 文档)
2,发送包大小:3032bytes。我们会发现总体而言发送包的大小变小了,这是因为我们少发
了一个 http 请求 。 但是 细心的 朋 友会 观察到 第 一个 http 请 求包 从 367bytes 增 加到了
403bytes,这是为什么呢?这是因为请求包中多了 Cookie 数据。用户端通过 http 请求头
Cookie 将用户端的 Cookie 数据传给服务端。
3,响应包大小:145635byes。我们图片请求大小都没有变化,而第一个请求 index.php 稍微
有点变化,这是一个动态资源请求,有点小波动是正常地。我们最关心的是 style.css 这个
响应,它的响应数据包变大了。主要是因为把 codesnippet.css 合并到了 style.css 这个文件,
所以,这个 http 响应 body 部分变大了。7547 + 971 = 8518 (约等于 8259),大于 8259 是正确
地,因为还要减去 codesnippet.css 响应头部大小。
4,页面加载时间:10.446 秒。这里时间没有变化,反而加大了,是因为网络的问题。