微信号:androidwalker

介绍:关注Android新技术、进阶开发

Web性能分析

2016-06-23 07:36 xjj_app


Web性能分析

Web性能通常指的是浏览器打开一个H5页面,在各个节点的加载耗时情况。我们一般采用performance.timing来分析性能指标。


1性能指标




2字段含义


navigationStart


当访问一个新页面时,当前页面卸载完成所返回的时间点,如果没有当前页面,则返回fetchStart时间点。


unloadEventEnd


如果要打开的页面和当前的页面同源,则返回用户unload事件执行完成后的时间点,如果当前文档不存在或者不同源,则返回0


redirectStart


如果是HTTP重定向,如果跳转都是同源的,则返回开始获取发起重定向的时间点,否则返回0


redirectEnd


如果是同源重定向,返回重定向请求接收完最后一字节的时间点,否则返回0


fetchStart


如果请求是用http get发起的,返回浏览器查缓存之前的时间点,否则返回发起获取资源的时间点


domainLookupStart


返回浏览器发起DNS查询的时间点,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点


domainLookupEnd


返回结束DNS查询的时间点,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点


connectStart


返回浏览器向服务器发起建立获取当前文档的连接请求的时间点,


如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点


connectEnd


返回与服务器建立完成连接的时间点,


如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点


requestStart


返回浏览器发起请求的时间,不管是向server还是本地缓存或存储

responseStart


返回浏览器拿到第一个响应字节的时间点,包括从服务器、缓存或者其他本地存储


responseEnd


返回浏览器拿到最后一个响应字节或者传输连接关闭的时间点,包括从服务器、缓存或者其他本地存储


domLoading


返回浏览器将当前文档状态设置成loading的时间点


domInteractive


返回浏览器将当前文档状态设置成interactive的时间点


domContentLoadedEventStart


返回浏览器触发DOMContentLoaded事件执行之前的时间点


domContentLoadedEventEnd


返回浏览器触发DOMContentLoaded事件执行完成的时间点


domComplete


返回浏览器将当前文档状态设置成complete的时间点


loadEventStart


返回浏览器触发load事件执行之前的时间点,否则为0


loadEventEnd


返回浏览器触发load事件执行完成的时间点


备注:以上返回的值都是请求的具体时间点,如果需要计算具体耗时,可以将两个时间点做差值运算。


3获取参数

1

自己动手


        可以通过在WebView 加载结束后,比如onPageFinished,延迟3s~5s,执行以下调用:

webview.loadUrl("javascript:alert(JSON.stringify(window.performance.timing))");


        在此之前,记得设置自定义的WebChromeClient,或是简单设置

webview.setWebChromeClient(new WebChromeClient());


2

辅助工具


        当然,也可以使用chrome的inspect功能来输出performance.timing的性能数据。具体如下:

  • Android 4.0+

    并且需要调用以下方法来开启webview调试功能

    if(Build.VERSION.SDK_INT >= 19) {

          webview.setWebContentsDebuggingEnabled(true);

     }

  • 打开chrome

    输入chrome://inspect,如下


  • 点击inspect打开浏览器控制台,输入window.performance




 
Android高级开发 更多文章 Android Studio 入门技巧之<基础篇> Android Studio 之<进阶篇:实用快捷键> Android Studio 之<进阶篇:IDE设置> 2015年度腾讯MIG内部技术峰会 多团队协同开发经验
猜您喜欢 仙剑奇侠传的web移植版 开发者专版发布后,Firefox 开始面向消费者展示广告 再议携程Android动态加载框架DynamicAPK WebDriverAgent 简介 UIWebView保存图片