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