JosephZhou(周桂华) joe3401192@gmail.com
Web前端优化之路
阿花
互联网的一天
事件:09年网络媒体产品技术部推广tips优化
思考:落实到每个开发环节,必有更大成效。
很荣幸给大家带来“WEB前端优化之路”!
成效:每年节省了414万带宽成本
实施:
关键技术点
dataUri
css
http请求
js
html
线性过滤
压缩
合并
雪碧图
缓存
iframe
cdn
前端性能优化
png
copyright@josephzhou.2013.5.27
2013年8月14日
开启Web前端优化之路
http请求模型
copyright@josephzhou.2013.5.27
捉包工具:
Fiddler&willow
Httpwatch
浏览器自带调试工具
如: 挤公交
公交车
乘客
copyright@josephzhou.2013.5.27
多次http请求
1次tcp请求
发送请求前 ->发送请求 -> 等待响应 -> 接受响应 -> 处理响应
等待公交 -> 上车给钱 -> 等待到站 -> 到站下车 -> 走路上班
几个常见的请求状态
copyright@josephzhou.2013.5.27
200
Cache
304
404
Aborted
…
200
Cache
304
404
Aborted
提问:了解http模型后,能猜出前端优化该做什么吗?
开车出去吃饭的同事,
你愿意挤一点送人过去,还是分批送?
开启Web前端优化之路
1.请求数优化
copyright@josephzhou.2013.5.27
• 相同资源使用相同地址
• Css合并
• 图片合并
• Js合并
开启Web前端优化之路
相同资源使用相同地址
copyright@josephzhou.2013.5.27
主要是因为:缓存只认单一URL地址
开启Web前端优化之路
Css合并
copyright@josephzhou.2013.5.27
• 多页面的公用样式抽离
• 单页面的所有个性样式合并
• 按需合并公用样式到私用样式
本机开发使用css import的方
式制作一个入口文件。
发布时,把引进来的样式进行
合并。
首页的样式有且只能有一个。
按需要并入合并队列
本地调试文件 外网合并文件
开启Web前端优化之路
Js合并
copyright@josephzhou.2013.5.27
与CSS合并类似。
需要注意单个大脚本文件阻塞加载的问题,
因为默认情况下,js不能跟html并行加载。
开启Web前端优化之路
图片合并
copyright@josephzhou.2013.5.27
• Sprite图
• dataURI
Sprite图
业内常见的sprite方式
1.jpg/png8 直接定义background即可,比较简单
2.png24 需要使用特殊的方式来模拟background-position
<span class="bg_wrap"><a href="#" class="bg"></a>...
目前市面好多雪碧图合成的工具,如cssgaga。
工具合并雪碧图演示
但个人并不建议完全交给工具来做。
dataURI
一种把小文件直接嵌入文档的方案。
来看个datauri的实例
慎用!
问题:复用率低,无法单独缓存
问题:增加了对客户端的资源消耗
问题:兼容问题
2013年8月14日
copyright@josephzhou.2013.5.27
提问:一幅图片的带宽成本?
copyright@josephzhou.2013.5.27
一个150k的图片
-5k
一个活动需求的最高峰半小时PV大概占总PV的3%
09年Qzone的一个活动某天PV大概去到67万
那么在高峰期的半小时PV大概就是670000*0.03...
开启Web前端优化之路
2.带宽优化
copyright@josephzhou.2013.5.27
• Gzip压缩
• 选对图片格式
• 文件压缩
• 缓存
开启Web前端优化之路
Gzip压缩
copyright@josephzhou.2013.5.27
这是服务端配置的,
如捉包发现未启动,
请联系你们的运营人员加上。
对请求进行压缩
开启Web前端优化之路
选对图片格式
copyright@josephzhou.2013.5.27
提问:你所知道的图片格式?
Png-8
Png-8a
Png-32
图片格式的选择对带宽优化有重大意义。
该怎么选择?其实很简单,科普一下自然
就有方案了。
来点小科普
copyright@josephzhou.2013.5.27
普通Png-8
Png-8(带阿尔法通道)
Png32
像素图
Web色 索引模式
Rgb模式
jpg
jpg2000
gif
Rgba
Gif 12K Png 9K
Png的线性过滤
Gif存储方式
png存储方式
关于Png8a
Png8a是一种让png8带半透明效果的格式(兼容浏览器)
优势:图片实例格式png-8的特殊用法
copyright@josephzhou.2013.5.27
copyright@josephzhou.2013.5.27
提问:对图片格式有疑问么?(无奖品)
了解了格式后,我们来看看它们都用在什么场景。
copyright@josephzhou.2013.5.27
6类图片场景:
1.颜色规律
全实色
有全透明区域
有复杂的半透明区域
有简单的半透明区域
2.颜色复杂
全实色
有全透明区域
有复杂的半透明区域
有简单的半透明区域
copyright@josephzhou.2013.5.27
复杂颜色的图片
简单颜色的图片
全实色 有复杂的半透明区域 有全透明区域 有简单半透明区域
全实色 有复杂的半透明区域 有全透明区域 有简单半透明区域
最重要的优化方式:
尽可能使用png8,因为它是最小的图片格式.
但是这部分怎么办?
橙色区适用范围内推荐使用的格式
这里有疑问么?
开启Web前端优化之路
CSS/js/图片压缩
copyright@josephzhou.2013.5.27
YUI Compressor
cssgaga
tacs
第三方开源压缩库(跨平台)
Pngout 速度比较慢,但是效果极佳。
Jpeg...
卖个广告:关于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%
...
开启Web前端优化之路
缓存
copyright@josephzhou.2013.5.27
304一个优化带宽成本的、非常重要的方式
想象一下,如果相同内容重复请求,是多么悲催的事情。
浏览器缓存机制的三种方式:
判断本机缓存是否到期,
没到期则自动读取本机缓
存文件。
缓存缺失(被清掉)则请
求服务器按200返回,存
储缓存。
缓存到期,则给服务器发
送“重验证”请求,服务器
判断是否需要更新本机缓
存。
主要在请求头中控制缓存。
响应头中只要设置了
Cache-Control: max-age=(优先级更高)
或者
Expires
则会使得某个请求具有缓存周期。
copyright@josephzhou.2013.5.27
缓存周期主要作用于这个阶段
两种校验缓存的手段: 两个对应关系:
浏览器端请求头:If-Modified-Since
服务器端响应头:Last-Modified
浏览器端请求头:If-None-Match
服务器端响应头:Etag
实例:即场演示使200请求变成304请求。
copyright@josephzhou.2013.5.27
Etag设置方法:
http://hi.baidu.com/lane727/item/ad49f2bfe0e6174b2bebe325
copyright@josephzhou.2013.5.27
2013年8月14日
提问:你知道网站慢100ms会有什么后果么?400ms呢?甚至500ms?
copyright@josephzhou.2013.5.27
Amason销售额降低1%
Yahoo! 用户访问量降低5%-9%
Google 用户访问量降低20%
copyright@josephzhou.2013.5.27
开启Web前端优化之路
4.浏览器渲染优化
copyright@josephzhou.2013.5.27
• Html编码优化
• Css编码优化
• Js编码优化
• 调整文件加载顺序
Html编码优化
• 减少不必要标签,减少嵌套
• 闭合标签(避免浏览器激活自身容错机制)
• 语义化
• 不要使用iframe
主要有3点:
copyright@josephzhou.2013.5.27
Css编码优化
• 标准的代码降低crash机率
• 不用Expression
• IE filter
主要有以下几点:
copyright@josephzhou.2013.5.27
Js编码优化
Js主要是设计模式以及算法的优化,内容太多,这里不详述。
copyright@josephzhou.2013.5.27
调整文件加载顺序
• Css放到前面,Js放到后面
• 预加载,延迟加载
copyright@josephzhou.2013.5.27
Css放到前面,Js放到后面
copyright@josephzhou.2013.5.27
提问:为什么css要放在前面,js放在后面?
copyright@josephzhou.2013.5.27
Js阻塞页面实例
让js最后执行的两种方案:
1.加defer属性(有兼容问题)
2.放到html最后
copyright@josephzhou.2013.5.27
预加载,延迟加载
预加载:
在点击第一个切换按钮时加载后面一个(或多个)tab的内容
可能有同学会疑问,那岂不有可能浪费了流量?
开启Web前端优化之路
5.其他重要优化手段
copyright@josephzhou.2013.5.27
• 减少cookies大小
• 减少重定向
• CDN分布(并行加载),减少DSN查找
减少cookies
减少重定向
重定向浪费了时间加载了一个无用的页面
copyright@josephzhou.2013.5.27
CDN分布(并行加载),减少DSN查找
增加请求域名。
控制在4个左右。
copyright@josephzhou.2013.5.27
还记得那个收音机么?
copyright@josephzhou.2013.5.27
小体积多链接 VS 大体积少链接
流量降低,链接数却增加
链接数节省的流量
你我所优化的,未必就是对的!
迷惑了?
一个不过瘾,我多举几个例子让你们更迷惑。
copyright@josephzhou.2013.5.27
小体积有噪点 VS 大体积无噪点
Png 103k Jpg 88 ~ 233k
流量变低,用户体验却变差
用户体验节省的流量
76.2 KB 13.5 KB
小体积大渲染VS 大体积少渲染(响应速度)
流量变低,渲染性能却变差
渲染性能节省的流量
http://xiebiji.com/works/mac_style/
之前做的一个demo
copyright@josephzhou.2013.5.27
7.25K9.54K 2.29K 无线带宽优化
同时,大家知道这么做还优化了什么吗?
copyright@josephzhou.2013.5.27
流量/链接数降低,维护成本却变高
维护成本节省的流量、链接数
除此之外还有很多矛盾点。
• Datauri链接数与复用率、缓存的较量
• CDN与DNS的较量
• 极致工具化带来的效率与容灾性、较量
copyright@josephzhou.2013.5.27
那,该怎么抉择啊!?
copyright@josephzhou.2013.5.27
copyright@josephzhou.2013.5.27
天平定则
2013年8月14日
风险 视觉体验维护成本
copyright@josephzhou.2013.5.27
方案:
请结合业务需求,做你的优化。
Qqshow当年抢车位优化概况
第一次灰度优化
Qqshow当年抢车位优化概况
经运营同事确认,每天可节省带宽约3466 M(41%)约占imgcache总带宽5%
浏览器解析“swf“比”图片“多消耗大约15%的CPU
做优化前,请分析你们的业务,找到最合适的优化手段。
谢谢大家!
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
网站性能优化(周桂华)
Upcoming SlideShare
Loading in …5
×

网站性能优化(周桂华)

920 views

Published on

abc

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
920
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

网站性能优化(周桂华)

  1. 1. JosephZhou(周桂华) joe3401192@gmail.com Web前端优化之路
  2. 2. 阿花
  3. 3. 互联网的一天
  4. 4. 事件:09年网络媒体产品技术部推广tips优化 思考:落实到每个开发环节,必有更大成效。 很荣幸给大家带来“WEB前端优化之路”! 成效:每年节省了414万带宽成本 实施:
  5. 5. 关键技术点 dataUri css http请求 js html 线性过滤 压缩 合并 雪碧图 缓存 iframe cdn 前端性能优化 png copyright@josephzhou.2013.5.27
  6. 6. 2013年8月14日
  7. 7. 开启Web前端优化之路 http请求模型 copyright@josephzhou.2013.5.27
  8. 8. 捉包工具: Fiddler&willow Httpwatch 浏览器自带调试工具
  9. 9. 如: 挤公交
  10. 10. 公交车 乘客
  11. 11. copyright@josephzhou.2013.5.27 多次http请求 1次tcp请求
  12. 12. 发送请求前 ->发送请求 -> 等待响应 -> 接受响应 -> 处理响应 等待公交 -> 上车给钱 -> 等待到站 -> 到站下车 -> 走路上班
  13. 13. 几个常见的请求状态 copyright@josephzhou.2013.5.27 200 Cache 304 404 Aborted … 200 Cache 304 404 Aborted
  14. 14. 提问:了解http模型后,能猜出前端优化该做什么吗? 开车出去吃饭的同事, 你愿意挤一点送人过去,还是分批送?
  15. 15. 开启Web前端优化之路 1.请求数优化 copyright@josephzhou.2013.5.27 • 相同资源使用相同地址 • Css合并 • 图片合并 • Js合并
  16. 16. 开启Web前端优化之路 相同资源使用相同地址 copyright@josephzhou.2013.5.27 主要是因为:缓存只认单一URL地址
  17. 17. 开启Web前端优化之路 Css合并 copyright@josephzhou.2013.5.27 • 多页面的公用样式抽离 • 单页面的所有个性样式合并 • 按需合并公用样式到私用样式
  18. 18. 本机开发使用css import的方 式制作一个入口文件。 发布时,把引进来的样式进行 合并。 首页的样式有且只能有一个。 按需要并入合并队列
  19. 19. 本地调试文件 外网合并文件
  20. 20. 开启Web前端优化之路 Js合并 copyright@josephzhou.2013.5.27 与CSS合并类似。 需要注意单个大脚本文件阻塞加载的问题, 因为默认情况下,js不能跟html并行加载。
  21. 21. 开启Web前端优化之路 图片合并 copyright@josephzhou.2013.5.27 • Sprite图 • dataURI
  22. 22. Sprite图
  23. 23. 业内常见的sprite方式
  24. 24. 1.jpg/png8 直接定义background即可,比较简单 2.png24 需要使用特殊的方式来模拟background-position <span class="bg_wrap"><a href="#" class="bg"></a></span> 2类雪碧图的css样式区别
  25. 25. 目前市面好多雪碧图合成的工具,如cssgaga。 工具合并雪碧图演示
  26. 26. 但个人并不建议完全交给工具来做。
  27. 27. dataURI 一种把小文件直接嵌入文档的方案。
  28. 28. 来看个datauri的实例
  29. 29. 慎用! 问题:复用率低,无法单独缓存 问题:增加了对客户端的资源消耗 问题:兼容问题
  30. 30. 2013年8月14日
  31. 31. copyright@josephzhou.2013.5.27 提问:一幅图片的带宽成本?
  32. 32. copyright@josephzhou.2013.5.27 一个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元
  33. 33. 开启Web前端优化之路 2.带宽优化 copyright@josephzhou.2013.5.27 • Gzip压缩 • 选对图片格式 • 文件压缩 • 缓存
  34. 34. 开启Web前端优化之路 Gzip压缩 copyright@josephzhou.2013.5.27 这是服务端配置的, 如捉包发现未启动, 请联系你们的运营人员加上。 对请求进行压缩
  35. 35. 开启Web前端优化之路 选对图片格式 copyright@josephzhou.2013.5.27 提问:你所知道的图片格式? Png-8 Png-8a Png-32
  36. 36. 图片格式的选择对带宽优化有重大意义。 该怎么选择?其实很简单,科普一下自然 就有方案了。
  37. 37. 来点小科普 copyright@josephzhou.2013.5.27 普通Png-8 Png-8(带阿尔法通道) Png32 像素图 Web色 索引模式 Rgb模式 jpg jpg2000 gif Rgba
  38. 38. Gif 12K Png 9K Png的线性过滤
  39. 39. Gif存储方式 png存储方式
  40. 40. 关于Png8a
  41. 41. Png8a是一种让png8带半透明效果的格式(兼容浏览器) 优势:图片实例格式png-8的特殊用法 copyright@josephzhou.2013.5.27 copyright@josephzhou.2013.5.27
  42. 42. 提问:对图片格式有疑问么?(无奖品) 了解了格式后,我们来看看它们都用在什么场景。 copyright@josephzhou.2013.5.27
  43. 43. 6类图片场景: 1.颜色规律 全实色 有全透明区域 有复杂的半透明区域 有简单的半透明区域 2.颜色复杂 全实色 有全透明区域 有复杂的半透明区域 有简单的半透明区域 copyright@josephzhou.2013.5.27
  44. 44. 复杂颜色的图片 简单颜色的图片 全实色 有复杂的半透明区域 有全透明区域 有简单半透明区域 全实色 有复杂的半透明区域 有全透明区域 有简单半透明区域
  45. 45. 最重要的优化方式: 尽可能使用png8,因为它是最小的图片格式. 但是这部分怎么办? 橙色区适用范围内推荐使用的格式
  46. 46. 这里有疑问么?
  47. 47. 开启Web前端优化之路 CSS/js/图片压缩 copyright@josephzhou.2013.5.27 YUI Compressor cssgaga tacs 第三方开源压缩库(跨平台) Pngout 速度比较慢,但是效果极佳。 Jpegtran jpg的无损压缩库,超赞。 优图
  48. 48. 卖个广告:关于TACS Tacs_v2.oa.com
  49. 49. 目前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压缩效 果
  50. 50. 开启Web前端优化之路 缓存 copyright@josephzhou.2013.5.27 304一个优化带宽成本的、非常重要的方式 想象一下,如果相同内容重复请求,是多么悲催的事情。
  51. 51. 浏览器缓存机制的三种方式: 判断本机缓存是否到期, 没到期则自动读取本机缓 存文件。 缓存缺失(被清掉)则请 求服务器按200返回,存 储缓存。 缓存到期,则给服务器发 送“重验证”请求,服务器 判断是否需要更新本机缓 存。
  52. 52. 主要在请求头中控制缓存。
  53. 53. 响应头中只要设置了 Cache-Control: max-age=(优先级更高) 或者 Expires 则会使得某个请求具有缓存周期。 copyright@josephzhou.2013.5.27
  54. 54. 缓存周期主要作用于这个阶段
  55. 55. 两种校验缓存的手段: 两个对应关系: 浏览器端请求头:If-Modified-Since 服务器端响应头:Last-Modified 浏览器端请求头:If-None-Match 服务器端响应头:Etag
  56. 56. 实例:即场演示使200请求变成304请求。 copyright@josephzhou.2013.5.27
  57. 57. Etag设置方法: http://hi.baidu.com/lane727/item/ad49f2bfe0e6174b2bebe325 copyright@josephzhou.2013.5.27
  58. 58. 2013年8月14日
  59. 59. 提问:你知道网站慢100ms会有什么后果么?400ms呢?甚至500ms? copyright@josephzhou.2013.5.27
  60. 60. Amason销售额降低1% Yahoo! 用户访问量降低5%-9% Google 用户访问量降低20% copyright@josephzhou.2013.5.27
  61. 61. 开启Web前端优化之路 4.浏览器渲染优化 copyright@josephzhou.2013.5.27 • Html编码优化 • Css编码优化 • Js编码优化 • 调整文件加载顺序
  62. 62. Html编码优化 • 减少不必要标签,减少嵌套 • 闭合标签(避免浏览器激活自身容错机制) • 语义化 • 不要使用iframe 主要有3点: copyright@josephzhou.2013.5.27
  63. 63. Css编码优化 • 标准的代码降低crash机率 • 不用Expression • IE filter 主要有以下几点: copyright@josephzhou.2013.5.27
  64. 64. Js编码优化 Js主要是设计模式以及算法的优化,内容太多,这里不详述。 copyright@josephzhou.2013.5.27
  65. 65. 调整文件加载顺序 • Css放到前面,Js放到后面 • 预加载,延迟加载 copyright@josephzhou.2013.5.27
  66. 66. Css放到前面,Js放到后面 copyright@josephzhou.2013.5.27
  67. 67. 提问:为什么css要放在前面,js放在后面? copyright@josephzhou.2013.5.27
  68. 68. Js阻塞页面实例
  69. 69. 让js最后执行的两种方案: 1.加defer属性(有兼容问题) 2.放到html最后 copyright@josephzhou.2013.5.27
  70. 70. 预加载,延迟加载
  71. 71. 预加载: 在点击第一个切换按钮时加载后面一个(或多个)tab的内容 可能有同学会疑问,那岂不有可能浪费了流量?
  72. 72. 开启Web前端优化之路 5.其他重要优化手段 copyright@josephzhou.2013.5.27 • 减少cookies大小 • 减少重定向 • CDN分布(并行加载),减少DSN查找
  73. 73. 减少cookies
  74. 74. 减少重定向 重定向浪费了时间加载了一个无用的页面 copyright@josephzhou.2013.5.27
  75. 75. CDN分布(并行加载),减少DSN查找 增加请求域名。 控制在4个左右。 copyright@josephzhou.2013.5.27
  76. 76. 还记得那个收音机么? copyright@josephzhou.2013.5.27
  77. 77. 小体积多链接 VS 大体积少链接
  78. 78. 流量降低,链接数却增加 链接数节省的流量
  79. 79. 你我所优化的,未必就是对的! 迷惑了? 一个不过瘾,我多举几个例子让你们更迷惑。 copyright@josephzhou.2013.5.27
  80. 80. 小体积有噪点 VS 大体积无噪点 Png 103k Jpg 88 ~ 233k
  81. 81. 流量变低,用户体验却变差 用户体验节省的流量
  82. 82. 76.2 KB 13.5 KB 小体积大渲染VS 大体积少渲染(响应速度)
  83. 83. 流量变低,渲染性能却变差 渲染性能节省的流量
  84. 84. http://xiebiji.com/works/mac_style/ 之前做的一个demo copyright@josephzhou.2013.5.27
  85. 85. 7.25K9.54K 2.29K 无线带宽优化 同时,大家知道这么做还优化了什么吗? copyright@josephzhou.2013.5.27
  86. 86. 流量/链接数降低,维护成本却变高 维护成本节省的流量、链接数
  87. 87. 除此之外还有很多矛盾点。 • Datauri链接数与复用率、缓存的较量 • CDN与DNS的较量 • 极致工具化带来的效率与容灾性、较量 copyright@josephzhou.2013.5.27
  88. 88. 那,该怎么抉择啊!? copyright@josephzhou.2013.5.27
  89. 89. copyright@josephzhou.2013.5.27 天平定则
  90. 90. 2013年8月14日
  91. 91. 风险 视觉体验维护成本
  92. 92. copyright@josephzhou.2013.5.27 方案: 请结合业务需求,做你的优化。
  93. 93. Qqshow当年抢车位优化概况 第一次灰度优化
  94. 94. Qqshow当年抢车位优化概况 经运营同事确认,每天可节省带宽约3466 M(41%)约占imgcache总带宽5%
  95. 95. 浏览器解析“swf“比”图片“多消耗大约15%的CPU
  96. 96. 做优化前,请分析你们的业务,找到最合适的优化手段。
  97. 97. 谢谢大家!

×