D2 如何发现前端性能问题
- 1. 如何发现前端的 性能问题 !aoao@ 012(07(07!hangzhou
- 2. 如何发现前端的 性能问题 ? Weibo:@aoao ? loaoao@gmail.com ? www.aoao.org.cn !aoao@ 012(07(07!hangzhou
- 3. 如何发现前端的 性能问题 ? 信息 ? 加载时 ? 监控 !aoao@ 012(07(07!hangzhou
- 5. 10 年 10 10 10 10 10
- 6. 10 分钟 10 10 10 10 10
- 8. 请求率 200 + 304 PV 你用了多少是可以算出来的 200+304 PV, 50% 5%
- 9. 哪个文件 被哪个页面 用什么状态 引用了多少次 G W
- 10. xRefer
- 11. 页面资源使用情况
- 12. 资源使用明细
- 14. 资源被引用情况
- 15. 不同时间戳
- 17. 清除缓存 iframe location.reload() http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
- 18. Combo明细 combo combo
- 19. 搜索某个资源
- 20. KISSY 组件分析 kissy combo
- 21. KISSY 组件分析 kissy combo
- 22. 网站 vs.页面
- 23. 你不是一个人 在战斗
- 24. 2 HAR 传说中的瀑布图分析
- 29. 瀑布图
- 30. HAR HTTP Archive 1.2 JSON 通用数据格式
- 31. 页面基本信息 "pages": [ { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘！我喜欢", "pageTimings": { "onContentLoad": 3247, "onLoad": 4310 } }
- 32. "pages": [ 页面基本信息 { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘！我喜欢", "pageTimings": { "_renderStart" : 628, "onContentLoad": 3247, "onLoad": 4310 }
- 33. "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/
- 34. LocalCache
- 35. 如何获取
- 36. 怎样获取 HAR Fiddler Firebug / NetExport IE Developer Tools HttpWatch dynaTrace Chrome Developer To WEBPAGETEST PhantomJS
- 38. 作用呢？
- 39. HAR 的作用 PageSpeed YSlow har
- 40. 个性化 在这个卖萌的时代怎能通用 PageSpeed YSlow
- 44. TSlow YSlow har
- 45. TSlow YSlow har
- 46. TSlow YSlow har
- 47. TSlow YSlow har
- 48. YSlow + 前端数据中心
- 49. 对吗？
- 51. 关键时间 Start Render, DomReady, Page Load, TTI
- 52. Start Render 浏览器开始渲染 msFirstPaint
- 53. Start Render TTFB (Time To First Byte) 发起请求到服务器返回数据的时间 TTDD (Time To Document Download) 从服务器下载HTML文档的时间 TTHE (Time To Head End) HTML文档头部解析完成所需要的时间
- 54. Dom Ready 页面解析完成 DomContentLoaded
- 55. DomReady Start Render TTDC (Time To Dom Created) DOM树创建所消耗时间 TTST (Time To Script) BODY中所有脚本加载和执行的时间
- 56. Page Load 页面加载完成 window.onload
- 57. Page Load Start Render DomReady Resource Download 简单来说所有的资源加载完
- 59. TTI (Time To Interact) Start Render Core HTML Render 核心功能相关的HTML 渲染完成 Core Javascript Bind 核心功能相关的Javascript 绑定完成
- 60. 商品详情
- 62. diff 装修 有自己的页头 页底 分类可能豪华很多（就是好多图片） 能装修的主 商品图片一般很多 一些乱七八糟的模块
- 63. { JSTracker }
- 64. window.onerror
- 66. CSS Naked
- 68. 空样式
- 69. 谢谢聆听 你的问题