前端访问速度优化Caoz 整理           分享人 : 宇尘
典型问题 网站访问慢!!!    场景1,时不时打开很卡,又突然快起来    场景2,自己打开很快,但是用户或朋友总反应卡    场景3,用户在访问过程中流失率惊人,比同行高的多    场景4,流量,访问量数据总是奇怪波动,不知道哪里...
第一步,有效监控 监控与分析是所有优化的基础  搞清楚问题才能有的放矢  监控是个系统工程,绝不是单一的功能点 监控系统构成    前端模拟访问速度分解    前端用户访问跟踪    前端第三方可用性监控    后端日志监控 ...
第一步,有效监控 前端模拟访问速度分解  工具: httpwatch or firebug  测试工程师及技术工程师,产品工程师均有义务参与分析  寻找显见的速度瓶颈点 前端用户访问跟踪  使用js记录访问用户网页打开速度  Js...
第一步,有效监控 后端日志监控  打开Webserver日志的执行时间记录功能  编写动态脚本分析程序的平均执行时间,执行时间的时间段分布 后端程序断点抽样监控  程序中设置断点,抽样监测不同断点的执行时间,寻找“卡点”  抽样率要...
第二步,有的放矢 前端问题  代码压缩    摘除不必要代码,只要肯用心    通过CSS 合并同类字符串    全站cookie限制    Gzip压缩传输  请求数裁剪    前端缓存设计 (if modified, exp...
第二步,有的放矢 前端问题  DNS请求优化    多域名设计    Dnspod  流量分摊    CDN选择    双线机房及BGP选择  SEO影响    搜索引擎可识别,可确认    必要的文字属性 alt, tit...
第二步,有的放矢 后端问题  通过日志分析,断点监控寻求症结,而非一昧优化  连接控制    所有连接设置超时限制    http外站请求优化,curl 优化    Memcache减少大数据段存取,可考虑 mysql or red...
第三步,整理总结 抓大放小  先解决主要问题,忽略次要问题  主要问题解决后,次要问题就会变成新的主要问题,依次渐进 有变动必跟进  效果评估  总结归纳 参照学习  同行做的最好的是谁,他们怎么做的,他们做了哪些  学习目前...
谢谢大家   张朝东(宇尘)               QQ : 75859797   Email : jacky@fm707.com   Weibo : http://weibo.com/43991982
Upcoming SlideShare
Loading in …5
×

前端优化

1,341 views

Published on

Published in: Technology
  • Be the first to comment

前端优化

  1. 1. 前端访问速度优化Caoz 整理 分享人 : 宇尘
  2. 2. 典型问题 网站访问慢!!!  场景1,时不时打开很卡,又突然快起来  场景2,自己打开很快,但是用户或朋友总反应卡  场景3,用户在访问过程中流失率惊人,比同行高的多  场景4,流量,访问量数据总是奇怪波动,不知道哪里有问题 应对束手无策?  不知道谁访问会慢  不知道为什么慢  不知道具体慢在哪里  不知道怎样解决慢的问题
  3. 3. 第一步,有效监控 监控与分析是所有优化的基础  搞清楚问题才能有的放矢  监控是个系统工程,绝不是单一的功能点 监控系统构成  前端模拟访问速度分解  前端用户访问跟踪  前端第三方可用性监控  后端日志监控  后端程序分解监控  后端数据库监控
  4. 4. 第一步,有效监控 前端模拟访问速度分解  工具: httpwatch or firebug  测试工程师及技术工程师,产品工程师均有义务参与分析  寻找显见的速度瓶颈点 前端用户访问跟踪  使用js记录访问用户网页打开速度  Js 将用户网页打开时间,简单做法是回传给Ga ,也可以考虑自定义回 传分析程序。  利用Ga的event tracker或自定义分析程序分析打开速度的平均状况, 地区分布和时间分布。 统筹了解速度问题 前端第三方工具  监控宝或同类产品
  5. 5. 第一步,有效监控 后端日志监控  打开Webserver日志的执行时间记录功能  编写动态脚本分析程序的平均执行时间,执行时间的时间段分布 后端程序断点抽样监控  程序中设置断点,抽样监测不同断点的执行时间,寻找“卡点”  抽样率要满足1:数据样本有足够代表性。2:不会对线上访问和服务器 负载造成额外影响。 后端数据库监控  慢查询日志  Show processlist 日志  连接数监控
  6. 6. 第二步,有的放矢 前端问题  代码压缩  摘除不必要代码,只要肯用心  通过CSS 合并同类字符串  全站cookie限制  Gzip压缩传输  请求数裁剪  前端缓存设计 (if modified, expired)  嵌入文件合并  随动加载  事件特效  尽量使用CSS 取代 javascript  减少不必要的绑定与监听,为浏览器减负
  7. 7. 第二步,有的放矢 前端问题  DNS请求优化  多域名设计  Dnspod  流量分摊  CDN选择  双线机房及BGP选择  SEO影响  搜索引擎可识别,可确认  必要的文字属性 alt, title 需要强调  优先考虑文字连接,可有针对性冗长,以包含关键词  进入论坛 -- 进入造梦西游2论坛  游戏攻略 – 三国小镇游戏攻略
  8. 8. 第二步,有的放矢 后端问题  通过日志分析,断点监控寻求症结,而非一昧优化  连接控制  所有连接设置超时限制  http外站请求优化,curl 优化  Memcache减少大数据段存取,可考虑 mysql or redis  计算优化  服务端缓存的设计  全局缓存,私有缓存  重复计算量问题  数据库优化  慢查询日志的分析  Show processlist监控日志的分析
  9. 9. 第三步,整理总结 抓大放小  先解决主要问题,忽略次要问题  主要问题解决后,次要问题就会变成新的主要问题,依次渐进 有变动必跟进  效果评估  总结归纳 参照学习  同行做的最好的是谁,他们怎么做的,他们做了哪些  学习目前最好的做法是一条捷径
  10. 10. 谢谢大家 张朝东(宇尘) QQ : 75859797 Email : jacky@fm707.com Weibo : http://weibo.com/43991982

×