Your SlideShare is downloading. ×
D2 如何发现前端性能问题
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

D2 如何发现前端性能问题

1,939
views

Published on

第七届D2前端技术论坛

第七届D2前端技术论坛

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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