d2 如何发现前端性能问题

!aoao@012(07(07!hangzhou

性能问题如何发现前端的

❈ Weibo:@aoao❈ loaoao@gmail.com❈ www.aoao.org.cn

!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�ËġÊhar­2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k

TSlow

Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar­2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k

TSlow

Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar­2® ġÇZ9æKæćºª[aĠ�����ò$Rģ��K�¦¡!Ë:'g7Ë,k

TSlow

Ĉ�ăYSlow�%ġ�I¤ĂZ¨;W�ËġÊhar­2® ġÇ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(º��Ë�ñĠ

谢谢聆听你的问题