石玉磊(yunishi)WebTiming和WillowAboutMe•朋友网前端工程师•Willow作者AboutMe•朋友网前端工程师•Willow作者前端工程师产品眼中设计眼中后台开发眼中项目经理眼中我们希望yuni眼中朋友网V4的优化朋友网10亿PV提速500ms可衡量是优化的前提Ifyoucan'tmeasureit,youcan'timproveit.--LordKelvin主流的方法运营平台监控系统视图局限一accuracyofjavascripttime--JohnResig精度误差大–无法获得15ms内的精确时间–超过750ms值误差才小于1%解决方法:performance.nowperformance.now()Demo解决方法:UserTiming解决方法:UserTimingDemo局限二•只能检测DOM相关数据•无法获得network,HTTP相关数据解决方法•联系用户安装httpwatch/fiddler抓包•stone的工具新的希望WebPerformace获得网页详细的性能数据–跨浏览器的规范–支持所有平台(包含手机)–包含网络、HTTP层高精度数据NavigationTiming获得主页相关的性能数据NavigationTimingAPIDemo运营平台局限缺少对页面所有资源的监控–根据HTTPArchive发布的统计报告,全球网站网页的平均大小首次超过1MB(1024KB)大关...平均每页的请求数已经超过了80个,包含js,css,图片,flash等各种资源的请求。ResourceTiming获得主页相关资源的性能数据–iframe,image,script,audio,video...ResourceTimingDemo安全风险Cross-originResources–Timing-Allow-OriginPerformanceTimeline获得timing数据的统一接口WebHttpwatchWebPerformance里程碑节约用户时间Willow文件夹替换Match中的URL必须以“/”结尾,同时Action中的Path必须以“\”结尾43约定后台接口44JSONViewer45Table视图46JSONViewer•后台接口开发完成,先自测•使用JSONViewer来检查接口数据47HOST管理48支持通配符49支持*?通配符模拟低网速50自定义限制网速51请求延时k/s响应延时k/s格式化文件•目前支持格式化HTML,CSS,JavaScript•基于JSBeautifier()52前端工程师是复活者联盟AboutMe•朋友网前端工程师•Willow作者•QQ:94058156•腾讯微博:t.qq.com/yunishiQ&ATHANKS