d2 如何发现前端性能问题
DESCRIPTION
第七届D2前端技术论坛TRANSCRIPT
![Page 1: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/1.jpg)
!aoao@012(07(07!hangzhou
性能问题如何发现前端的
![Page 3: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/3.jpg)
❉ 信息
❂ 加载时
☁ 监控!aoao@012(07(07!hangzhou
性能问题如何发现前端的
![Page 4: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/4.jpg)
1信息基于日志的数据分析
![Page 5: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/5.jpg)
年 年10
|c 8&ĕ�ĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġ�eÏ˧10vOġKæ¤10_ġ�ä102ĒĠĈ�¤�ã±ËġXăáÖË�;ğÊ�»ôWËßdا)ġ�¡!2®ġ�~'�ü¹ÆË´�
![Page 6: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/6.jpg)
分钟分钟10
|c 8&ĕ�ĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġ�eÏ˧10vOġKæ¤10_ġ�ä102ĒĠĈ�¤�ã±ËġXăáÖË�;ğÊ�»ôWËßdا)ġ�¡!2®ġ�~'�ü¹ÆË´�
![Page 7: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/7.jpg)
请求率你用了多少是可以算出来的
![Page 8: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/8.jpg)
200 + 304
PV
请求率
你用了多少是可以算出来的ü¹Æ*in¤þ¿200+304ü¹ĐĘ�lzěĚËPV,Ďü¹Æ§��ÊRģ��þ¿ü¹Æ50%ă5% ZN��â�ÉË�Tf(��²Ġ
![Page 9: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/9.jpg)
哪个文件被哪个页面用什么状态引用了多少次
�¡!2®��òÛÞ=U���îU�ěĚÊ��Å�~Ê�]mµ ġn¤�0GË¢�G�0W¬
![Page 10: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/10.jpg)
xRefer
![Page 11: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/11.jpg)
页面资源使用情况
X§÷�ěĚ)ÛġnK�ćC1ěĚË�Ê�.
![Page 12: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/12.jpg)
资源使用明细
�K�Î�6·�þ¿Ëú��Ê�. <�4�ûËü¹Æ
![Page 13: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/13.jpg)
![Page 14: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/14.jpg)
资源被引用情况
�K�Î6Ď�þ¿Z*�ěĚË~Ê�.
![Page 15: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/15.jpg)
不同时间戳
b¯dZÍNþ¿ġ�¤�î�1Ë�NË£Ė�ġE «ď(ö»ôW�æ�NËþ¿
![Page 16: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/16.jpg)
时间戳统一时间戳的方式
就是不用时间戳
Ĝ!û£Ė�Ëĕĝ
![Page 17: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/17.jpg)
清除缓存iframe location.reload()
D�£Ė�n§½ĘßdËĕĝġÝêÎ http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
![Page 18: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/18.jpg)
Combo明细
¼hËþ¿¤§comboË�Êġ�Ü5Ëþ¿comboZ�āw�MÈ
![Page 19: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/19.jpg)
搜索某个资源
![Page 20: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/20.jpg)
KISSY 组件分析
���K� ÿ¢�$����=Ë2®ġN£���FÇ���ĕĝġN��kissy îcombo�LÓL²Ëê
![Page 21: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/21.jpg)
KISSY 组件分析
���K� ÿ¢�$����=Ë2®ġN£���FÇ���ĕĝġN��kissy îcombo�LÓL²Ëê
![Page 22: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/22.jpg)
网站 页面 vs.
�8��$ěĚ�=£�¤?�ěĚ2®ġ�¤��$ˤáÖġ�I��ěĚ
![Page 23: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/23.jpg)
你不是一个人
在战斗
![Page 24: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/24.jpg)
2HAR传说中的瀑布图分析
![Page 25: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/25.jpg)
Ĉ�o+^jzùuÊPġċuÙeJÀsYġ�^jÐč�6{¤��O
![Page 26: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/26.jpg)
Ĉ�o+^jzùuÊPġċuÙeJÀsYġ�^jÐč�6{¤��O
![Page 27: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/27.jpg)
Ĉ�o+^jzùuÊPġċuÙeJÀsYġ�^jÐč�6{¤��O
![Page 28: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/28.jpg)
Ĉ�o+^jzùuÊPġċuÙeJÀsYġ�^jÐč�6{¤��O
![Page 29: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/29.jpg)
瀑布图
Ĉ�o+^jzùuÊPġċuÙeJÀsYġ�^jÐč�6{¤��O
![Page 30: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/30.jpg)
HARHTTP Archive 1.2
JSON 通用数据格式
![Page 31: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/31.jpg)
"pages": [ { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": { "onContentLoad": 3247, "onLoad": 4310 } } ],
页面基本信息
![Page 32: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/32.jpg)
"_renderStart" : 628,
"onContentLoad": 3247, "onLoad": 4310 } } ],
"pages": [ { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": {
页面基本信息
§�ą����Ò§Ë9æġ¸b|c¾°Ë£Ė
![Page 33: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/33.jpg)
每个请求的细节"entries": [ { "pageref": "page_2", "startedDateTime": "2012-12...", "time": 222, "request": {...}, "response": {...}, "timings": {...}, "cache": {...}, ... "comment": "" }]
"blocked": 99, "dns": 34, "connect": 0, "send": 12, "wait": 520, "receive": 32Ĥ
"timings": {...},
ÝêĢ http://www.softwareishard.com/blog/har-12-spec/
![Page 34: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/34.jpg)
LocalCache��ËàÁ¤ºæ÷Āª[ßdË"�ġ�Ĉ��¤�æõ-��K�Ă�µ��ġ�µtßd �µ�tßdġĈ²�K�ÐčU�¤Āª[ßdË
![Page 35: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/35.jpg)
如何获取
![Page 36: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/36.jpg)
Firebug / NetExport
HttpWatchIE Developer Tools
Chrome Developer ToolsWEBPAGETEST
Fiddler
dynaTrace
PhantomJS
怎样获取 HAR
![Page 37: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/37.jpg)
看不见的浏览器
www.phantomjs.org
PhantomJS
![Page 38: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/38.jpg)
作用呢?
![Page 39: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/39.jpg)
YSlow
PageSpeed
HAR 的作用
��]�9æď¤\�har 2®Ë
![Page 40: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/40.jpg)
个性化在这个卖萌的时代怎能通用
ìÂPageSpeedăYSlow �aġ�·�áÖ立�áÖÄéġċÊË¡³w��gĊM
![Page 41: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/41.jpg)
ÖZp�Ëåçġ��#�ó3níġ¸b�/mü¹�2�a0íN£K����èrË�;�þ¿ĉí2ÚġU�¤�HËğU�ËyËğU�¤�;ÊËØØġĈ²¦¡!g�ĕĝ
![Page 42: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/42.jpg)
ÖZp�Ëåçġ��#�ó3níġ¸b�/mü¹�2�a0íN£K����èrË�;�þ¿ĉí2ÚġU�¤�HËğU�ËyËğU�¤�;ÊËØØġĈ²¦¡!g�ĕĝ
![Page 43: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/43.jpg)
ÖZp�Ëåçġ��#�ó3níġ¸b�/mü¹�2�a0íN£K����èrË�;�þ¿ĉí2ÚġU�¤�HËğU�ËyËğU�¤�;ÊËØØġĈ²¦¡!g�ĕĝ
![Page 44: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/44.jpg)
TSlow
Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k
![Page 45: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/45.jpg)
TSlow
Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k
![Page 46: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/46.jpg)
TSlow
Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k
![Page 47: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/47.jpg)
TSlow
Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k
![Page 48: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/48.jpg)
YSlow+
前端数据中心
![Page 49: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/49.jpg)
对吗?
![Page 50: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/50.jpg)
3监控坐在家里看邮件也能发现问题
![Page 51: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/51.jpg)
关键时间Start Render, DomReady,
Page Load, TTI
![Page 52: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/52.jpg)
Start Render浏览器开始渲染
msFirstPaint
![Page 53: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/53.jpg)
Start Render
TTFB (Time To First Byte)发起请求到服务器返回数据的时间
TTDD (Time To Document Download)从服务器下载HTML文档的时间
TTHE (Time To Head End)HTML文档头部解析完成所需要的时间
![Page 54: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/54.jpg)
Dom Ready页面解析完成
DomContentLoaded
![Page 55: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/55.jpg)
DomReady
Start Render
TTDC (Time To Dom Created)DOM树创建所消耗时间
TTST (Time To Script)BODY中所有脚本加载和执行的时间
![Page 56: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/56.jpg)
Page Load页面加载完成
window.onload
![Page 57: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/57.jpg)
Page Load
Start Render
DomReady
Resource Download简单来说所有的资源加载完
![Page 58: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/58.jpg)
TTITime To Interact
可进行交互的时间
¸b ¼hĞě¶ËxQ¥Ñ1ÇË£Ė¸b VSú�ě ÕAý��ēK��ÊË£Ė
![Page 59: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/59.jpg)
TTI (Time To Interact)
Start Render
Core HTML Render核心功能相关的HTML 渲染完成
Core Javascript Bind核心功能相关的Javascript 绑定完成
![Page 60: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/60.jpg)
商品详情
![Page 61: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/61.jpg)
��VSú�ě$���iĄġFÇ�§ï#ăºï#ËěĚq5Ä5^Ġ
![Page 62: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/62.jpg)
diff 装修
有自己的页头 页底
分类可能豪华很多(就是好多图片)
能装修的主 商品图片一般很多
一些乱七八糟的模块
����1�µË>5£ġnK�öđl��=
![Page 63: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/63.jpg)
{ JSTracker }
Ę�Ì�£Ėġ��ć�Ì�1ĔË�.
![Page 64: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/64.jpg)
iÇw�ę window.onerror
![Page 65: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/65.jpg)
![Page 66: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/66.jpg)
CSS Naked
��ćÌ�ěĚð`Ë�.
![Page 67: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/67.jpg)
![Page 68: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/68.jpg)
空样式
N£Ĝ!FÇ��ĕĝġ§�@j��ġ�iėB���Ô˲}ĠáČ�ćaġáČ�£ġÊ�BZëØf(º��Ë�ñĠ
![Page 69: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/69.jpg)
谢谢聆听你的问题
![Page 70: D2 如何发现前端性能问题](https://reader033.vdocuments.net/reader033/viewer/2022061221/54bd87af4a7959d4438b45ac/html5/thumbnails/70.jpg)