第七届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

4. 1
信息
基于日志的数据分析

5. 10 年
10 10 10
10 10

6. 10 分钟
10 10 10
10 10

7. 请求率
你用了多少是可以算出来的

8. 请求率
200 + 304
PV
你用了多少是可以算出来的
200+304 PV,
50% 5%

9. 哪个文件
被哪个页面
用什么状态
引用了多少次
G W

10. xRefer

11. 页面资源使用情况

12. 资源使用明细

14. 资源被引用情况

15. 不同时间戳

16. 时间戳
统一时间戳的方式
就是不用时间戳

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

37. PhantomJS
看不见的浏览器
www.phantomjs.org

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. 对吗？

50. 3
监控
坐在家里看邮件也能发现问题

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
简单来说所有的资源加载完

58. TTI
Time To Interact
可进行交互的时间

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. 谢谢聆听
你的问题