Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D2 如何发现前端性能问题

2,310 views

Published on

第七届D2前端技术论坛

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

D2 如何发现前端性能问题

  1. 1. 如何发现前端的 性能问题 !aoao@ 012(07(07!hangzhou
  2. 2. 如何发现前端的 性能问题 ❈ Weibo:@aoao ❈ loaoao@gmail.com ❈ www.aoao.org.cn !aoao@ 012(07(07!hangzhou
  3. 3. 如何发现前端的 性能问题 ❉ 信息 ❂ 加载时 ☁ 监控 !aoao@ 012(07(07!hangzhou
  4. 4. 1信息基于日志的数据分析
  5. 5. 10 年 10 10 1010 10
  6. 6. 10 分钟 10 10 1010 10
  7. 7. 请求率你用了多少是可以算出来的
  8. 8. 请求率200 + 304 PV你用了多少是可以算出来的 200+304 PV,50% 5%
  9. 9. 哪个文件 被哪个页面 用什么状态引用了多少次 G W
  10. 10. xRefer
  11. 11. 页面资源使用情况
  12. 12. 资源使用明细
  13. 13. 资源被引用情况
  14. 14. 不同时间戳
  15. 15. 时间戳统一时间戳的方式 就是不用时间戳
  16. 16. 清除缓存 iframe location.reload()http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
  17. 17. Combo明细 combo combo
  18. 18. 搜索某个资源
  19. 19. KISSY 组件分析 kissy combo
  20. 20. KISSY 组件分析 kissy combo
  21. 21. 网站 vs.页面
  22. 22. 你不是一个人 在战斗
  23. 23. 2HAR传说中的瀑布图分析
  24. 24. 瀑布图
  25. 25. HAR HTTP Archive 1.2JSON 通用数据格式
  26. 26. 页面基本信息"pages": [ { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": { "onContentLoad": 3247, "onLoad": 4310 } }
  27. 27. "pages": [ 页面基本信息 { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": { "_renderStart" : 628, "onContentLoad": 3247, "onLoad": 4310 }
  28. 28. "entries": [ 每个请求的细节 { "pageref": "page_2", "startedDateTime": "2012-12...", "time": 222, "request": {...}, "blocked": 99, "response": {...}, "dns": 34, "connect": 0, "timings": {...}, "send": 12, "cache": {...}, "wait": 520, ... "receive": 32 "comment": "" http://www.softwareishard.com/blog/har-12-spec/
  29. 29. LocalCache
  30. 30. 如何获取
  31. 31. 怎样获取 HAR Fiddler Firebug / NetExportIE Developer Tools HttpWatch dynaTrace Chrome Developer ToWEBPAGETEST PhantomJS
  32. 32. PhantomJS 看不见的浏览器www.phantomjs.org
  33. 33. 作用呢?
  34. 34. HAR 的作用 PageSpeed YSlow har
  35. 35. 个性化 在这个卖萌的时代怎能通用PageSpeed YSlow
  36. 36. TSlowYSlow har
  37. 37. TSlowYSlow har
  38. 38. TSlowYSlow har
  39. 39. TSlowYSlow har
  40. 40. YSlow +前端数据中心
  41. 41. 对吗?
  42. 42. 3监控坐在家里看邮件也能发现问题
  43. 43. 关键时间Start Render, DomReady, Page Load, TTI
  44. 44. Start Render 浏览器开始渲染 msFirstPaint
  45. 45. Start RenderTTFB (Time To First Byte)发起请求到服务器返回数据的时间TTDD (Time To Document Download)从服务器下载HTML文档的时间TTHE (Time To Head End)HTML文档头部解析完成所需要的时间
  46. 46. Dom Ready 页面解析完成 DomContentLoaded
  47. 47. DomReadyStart RenderTTDC (Time To Dom Created)DOM树创建所消耗时间TTST (Time To Script)BODY中所有脚本加载和执行的时间
  48. 48. Page Load 页面加载完成 window.onload
  49. 49. Page LoadStart RenderDomReadyResource Download简单来说所有的资源加载完
  50. 50. TTITime To Interact可进行交互的时间
  51. 51. TTI (Time To Interact) Start Render Core HTML Render 核心功能相关的HTML 渲染完成 Core Javascript Bind 核心功能相关的Javascript 绑定完成
  52. 52. 商品详情
  53. 53. diff 装修有自己的页头 页底分类可能豪华很多(就是好多图片)能装修的主 商品图片一般很多一些乱七八糟的模块
  54. 54. { JSTracker }
  55. 55. window.onerror
  56. 56. CSS Naked
  57. 57. 空样式
  58. 58. 谢谢聆听你的问题

×