网站性能优化（周桂华）

JosephZhou(周桂华) joe3401192@gmail.com
Web前端优化之路

事件：09年网络媒体产品技术部推广tips优化
思考：落实到每个开发环节，必有更大成效。
很荣幸给大家带来“WEB前端优化之路”！
成效：每年节省了414万带宽成本
实施：

关键技术点
dataUri
css
http请求
js
html
线性过滤
压缩
合并
雪碧图
缓存
iframe
cdn
前端性能优化
png
copyright@josephzhou.2013.5.27

开启Web前端优化之路
http请求模型

捉包工具：
Fiddler&willow
Httpwatch
浏览器自带调试工具

多次http请求
1次tcp请求

发送请求前 ->发送请求 -> 等待响应 -> 接受响应 -> 处理响应
等待公交 -> 上车给钱 -> 等待到站 -> 到站下车 -> 走路上班

几个常见的请求状态
200
Cache
304
404
Aborted
…
200
Cache
304
404
Aborted

提问：了解http模型后，能猜出前端优化该做什么吗？
开车出去吃饭的同事，
你愿意挤一点送人过去，还是分批送？

1.请求数优化
• 相同资源使用相同地址
• Css合并
• 图片合并
• Js合并

相同资源使用相同地址
主要是因为：缓存只认单一URL地址

Css合并
• 多页面的公用样式抽离
• 单页面的所有个性样式合并
• 按需合并公用样式到私用样式

本机开发使用css import的方
式制作一个入口文件。
发布时，把引进来的样式进行
合并。
首页的样式有且只能有一个。
按需要并入合并队列

本地调试文件外网合并文件

Js合并
与CSS合并类似。
需要注意单个大脚本文件阻塞加载的问题，
因为默认情况下，js不能跟html并行加载。

图片合并
• Sprite图
• dataURI

1.jpg/png8 直接定义background即可,比较简单
2.png24 需要使用特殊的方式来模拟background-position
<span class="bg_wrap"><a href="#" class="bg"></a></span>
2类雪碧图的css样式区别

目前市面好多雪碧图合成的工具，如cssgaga。
工具合并雪碧图演示

但个人并不建议完全交给工具来做。

dataURI
一种把小文件直接嵌入文档的方案。

慎用！
问题：复用率低，无法单独缓存
问题：增加了对客户端的资源消耗
问题：兼容问题

提问：一幅图片的带宽成本？

一个150k的图片
-5k
一个活动需求的最高峰半小时PV大概占总PV的3%
09年Qzone的一个活动某天PV大概去到67万
那么在高峰期的半小时PV大概就是670000*0.03=20100，也就是高峰期每秒
PV是20100/1800=11.2(次每秒)
节省55kByte/s0.45Mbit/s一年大概节省5400-14400元

2.带宽优化
• Gzip压缩
• 选对图片格式
• 文件压缩
• 缓存

Gzip压缩
这是服务端配置的，
如捉包发现未启动，
请联系你们的运营人员加上。
对请求进行压缩

选对图片格式
提问：你所知道的图片格式？
Png-8
Png-8a
Png-32

图片格式的选择对带宽优化有重大意义。
该怎么选择？其实很简单，科普一下自然
就有方案了。

来点小科普
普通Png-8
Png-8（带阿尔法通道）
Png32
像素图
Web色索引模式
Rgb模式
jpg
jpg2000
gif
Rgba

Gif 12K Png 9K
Png的线性过滤

Gif存储方式
png存储方式

Png8a是一种让png8带半透明效果的格式（兼容浏览器）
优势：图片实例格式png-8的特殊用法

提问：对图片格式有疑问么？（无奖品）
了解了格式后，我们来看看它们都用在什么场景。

6类图片场景：
1.颜色规律
全实色
有全透明区域
有复杂的半透明区域
有简单的半透明区域
2.颜色复杂
全实色
有全透明区域
有复杂的半透明区域
有简单的半透明区域

复杂颜色的图片
简单颜色的图片
全实色有复杂的半透明区域有全透明区域有简单半透明区域
全实色有复杂的半透明区域有全透明区域有简单半透明区域

最重要的优化方式：
尽可能使用png8,因为它是最小的图片格式.
但是这部分怎么办？
橙色区适用范围内推荐使用的格式

CSS/js/图片压缩
YUI Compressor
cssgaga
tacs
第三方开源压缩库（跨平台）
Pngout 速度比较慢，但是效果极佳。
Jpegtran jpg的无损压缩库，超赞。
优图

卖个广告：关于TACS
Tacs_v2.oa.com

目前TACS结合SNS前端流程，直接应用于QQ秀、会员、团购、视频
等业务上，10000多个前端资源文件被处理，压缩效果显著。
0.00%
2.00%
4.00%
6.00%
8.00%
10.00%
12.00%
14.00%
16.00%
18.00%
JPG PNG GIF CSS
8.37%
17.58%
0
6%
TACS压缩比
新增的css压缩效
果

缓存
304一个优化带宽成本的、非常重要的方式
想象一下，如果相同内容重复请求，是多么悲催的事情。

浏览器缓存机制的三种方式：
判断本机缓存是否到期，
没到期则自动读取本机缓
存文件。
缓存缺失（被清掉）则请
求服务器按200返回，存
储缓存。
缓存到期，则给服务器发
送“重验证”请求，服务器
判断是否需要更新本机缓
存。

主要在请求头中控制缓存。

响应头中只要设置了
Cache-Control: max-age=（优先级更高）
或者
Expires
则会使得某个请求具有缓存周期。

缓存周期主要作用于这个阶段

两种校验缓存的手段：两个对应关系：
浏览器端请求头：If-Modified-Since
服务器端响应头：Last-Modified
浏览器端请求头：If-None-Match
服务器端响应头：Etag

实例：即场演示使200请求变成304请求。

Etag设置方法：
http://hi.baidu.com/lane727/item/ad49f2bfe0e6174b2bebe325

提问：你知道网站慢100ms会有什么后果么？400ms呢？甚至500ms?

Amason销售额降低1%
Yahoo! 用户访问量降低5%-9%
Google 用户访问量降低20%

4.浏览器渲染优化
• Html编码优化
• Css编码优化
• Js编码优化
• 调整文件加载顺序

Html编码优化
• 减少不必要标签，减少嵌套
• 闭合标签（避免浏览器激活自身容错机制）
• 语义化
• 不要使用iframe
主要有3点：

Css编码优化
• 标准的代码降低crash机率
• 不用Expression
• IE filter
主要有以下几点：

Js编码优化
Js主要是设计模式以及算法的优化，内容太多，这里不详述。

调整文件加载顺序
• Css放到前面，Js放到后面
• 预加载，延迟加载

Css放到前面，Js放到后面

提问：为什么css要放在前面，js放在后面？

让js最后执行的两种方案：
1.加defer属性（有兼容问题）
2.放到html最后

预加载：
在点击第一个切换按钮时加载后面一个（或多个）tab的内容
可能有同学会疑问，那岂不有可能浪费了流量？

5.其他重要优化手段
• 减少cookies大小
• 减少重定向
• CDN分布（并行加载），减少DSN查找

减少重定向
重定向浪费了时间加载了一个无用的页面

CDN分布（并行加载），减少DSN查找
增加请求域名。
控制在4个左右。

还记得那个收音机么？

小体积多链接 VS 大体积少链接

流量降低，链接数却增加
链接数节省的流量

你我所优化的，未必就是对的！
迷惑了？
一个不过瘾，我多举几个例子让你们更迷惑。

小体积有噪点 VS 大体积无噪点
Png 103k Jpg 88 ~ 233k

流量变低，用户体验却变差
用户体验节省的流量

76.2 KB 13.5 KB
小体积大渲染VS 大体积少渲染（响应速度）

流量变低，渲染性能却变差
渲染性能节省的流量

http://xiebiji.com/works/mac_style/
之前做的一个demo

7.25K9.54K 2.29K 无线带宽优化
同时，大家知道这么做还优化了什么吗？

流量/链接数降低，维护成本却变高
维护成本节省的流量、链接数

除此之外还有很多矛盾点。
• Datauri链接数与复用率、缓存的较量
• CDN与DNS的较量
• 极致工具化带来的效率与容灾性、较量

那，该怎么抉择啊！？

天平定则

风险视觉体验维护成本

方案：
请结合业务需求，做你的优化。

Qqshow当年抢车位优化概况
第一次灰度优化

Qqshow当年抢车位优化概况
经运营同事确认，每天可节省带宽约3466 M（41％）约占imgcache总带宽5%

浏览器解析“swf“比”图片“多消耗大约15％的CPU

做优化前，请分析你们的业务，找到最合适的优化手段。

网站性能优化（周桂华）

网站性能优化（周桂华）

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 网站性能优化（周桂华）

Ähnlich wie 网站性能优化（周桂华） (20)

网站性能优化（周桂华）