Your SlideShare is downloading. ×
网站性能优化(周桂华)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

网站性能优化(周桂华)

672
views

Published on

abc

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
672
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×