备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间

2017-09-15 2139
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在控制台中输入window.performance.timing(html5的属性);各字段的含义：· navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。

在控制台中输入window.performance.timing(html5的属性);

各字段的含义：

· navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。

· unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

· unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

· redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

· redirectEnd：返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

· fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。

· domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

· domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

· connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。

· connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

· secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。

· requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。

· responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。

· responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。

· domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

· domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

· domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。

· domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

· domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。

· loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。

· loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。通过while循环持续判断直到loadEventEnd>0则表示完全加载完毕了！网络不再有任何数据请求、dom也渲染完毕了！！！

Android webview交互性能监测指标获取方法（白屏时间，domc，整页时间，首屏时间）

八月 22, 2015

业界衡量移动web app交互性能的优劣主要是通过监测webview渲染页面时白屏时间，DOM树构建时间，整页时间和首屏时间这三个指标来完成的，那么这四个指标分别的意义是什么呢？我们从w3c提供的navigation Timing中看到交互性能指的是Processing和onLoad这两部分的时间。

timing-overview.png

在浏览器交互阶段（Processing和onLoad时间段）浏览器接收服务器返回的基础页数据后，浏览器需要对HTML这个单纯的文本内容进行解析，从文本中构建出一个内部数据结构，叫做DOM树（DOM tree），用于组织将要绘制在屏幕上的内容。从HTML也能得到外联或内联的CSS脚本和JavaScript脚本，当然还有媒体文件，比如图片、视频、声音，这些都需要再次发起网络请求下载。CSS文本内容中的规则同样会被构建成一个内部数据结构，叫做CSS树（CSS tree），来决定DOM树的节点在屏幕上的布局、颜色、状态效果。JavaScript脚本被触发执行后，除了计算业务，往往还需要操作DOM树，就是所谓的DOM API。

image.png

在控制台中输入window.performance.timing(html5的属性);

各字段的含义：

· navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。

· unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

· unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

· redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

· redirectEnd：返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

· fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。

· domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

· domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

· connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。

· connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

· secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。

· requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。

· responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。

· responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。

· domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

· domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

· domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。

· domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

· domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。

· loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。

· loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。通过while循环持续判断直到loadEventEnd>0则表示完全加载完毕了！网络不再有任何数据请求、dom也渲染完毕了！！！

Android webview交互性能监测指标获取方法（白屏时间，domc，整页时间，首屏时间）
八月 22, 2015
2 条评论

业界衡量移动web app交互性能的优劣主要是通过监测webview渲染页面时白屏时间，DOM树构建时间，整页时间和首屏时间这三个指标来完成的，那么这四个指标分别的意义是什么呢？我们从w3c提供的navigation Timing中看到交互性能指的是Processing和onLoad这两部分的时间。

timing-overview.png

在浏览器交互阶段（Processing和onLoad时间段）浏览器接收服务器返回的基础页数据后，浏览器需要对HTML这个单纯的文本内容进行解析，从文本中构建出一个内部数据结构，叫做DOM树（DOM tree），用于组织将要绘制在屏幕上的内容。从HTML也能得到外联或内联的CSS脚本和JavaScript脚本，当然还有媒体文件，比如图片、视频、声音，这些都需要再次发起网络请求下载。CSS文本内容中的规则同样会被构建成一个内部数据结构，叫做CSS树（CSS tree），来决定DOM树的节点在屏幕上的布局、颜色、状态效果。JavaScript脚本被触发执行后，除了计算业务，往往还需要操作DOM树，就是所谓的DOM API。
webkitflow.png

1、白屏时间
指浏览器开始显示内容的时间。但是在传统的采集方式里，是在HTML的head标签结尾里记录时间戳，来计算白屏时间。在这个时刻，浏览器开始解析body标签内的内容。而现代浏览器不会等待CSS树（所有CSS文件下载和解析完成）和DOM树（整个body标签解析完成）构建完成才开始绘制，而是马上开始显示中间结果。所以经常在低网速的环境中，观察到页面由上至下缓慢显示完，或者先显示文本内容后再重绘成带有格式的页面内容。
在android中我们通过使用webview.WebChromeClient的onReceivedTitle事件来近似获得白屏时间。
2、DOM树构建时间
指浏览器开始对基础页文本内容进行解析到从文本中构建出一个内部数据结构（DOM树）的时间，这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时，初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发，这有时会导致比较严重的延迟，开发人员随后创建了domready事件，它在DOM加载之后及资源加载之前被触发。domready被众多JavaScript库所采用,它在本地浏览器中以DOMContentLoaded事件的形式被使用。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取domc（window.DOMContentLoaded事件）时间，代码：

@Override
public void onReceivedTitle (WebView view, String title) {
view.loadUrl("javascript:" +
"window.addEventListener('DOMContentLoaded', function() {" +
"prompt('domc:' + new Date().getTime());" +
);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("domc".equals(strs[0])){
result.getCurrentRun().setDocComplete(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

3、首屏时间
首屏时间（FirstScreen Time），是从网页应用的角度定义的指标，在Navigation Timing或者浏览器实现中并没有相关指标值。首屏时间，是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。常用的方法有，页面标签标记法、图像相似度比较法和首屏高度内图片加载法；
1）页面标签标记法，在HTML文档中对应首屏内容的标签结束位置，使用内联的JavaScript代码记录当前时间戳，比较局限；2）图像相似度比较法，通过比较连续截屏图像的像素点变化趋势确定首屏时间，最为科学和直观的方式，但是比较消耗本地设备的运行资源；3）首屏高度内图片加载法，通过寻找首屏区域内的所有图片，计算它们加载完的时间去得到首屏时间，这样比较符合网页的实际体验并且比较节省设备运行资源；
具体实现上我采用的是最后一种，即“首屏高度内图片加载法”；因为通常需要考虑首屏时间的页面，都是因为在首屏位置内放入了较多的图片资源。现代浏览器处理图片资源时是异步的，会先将图片长宽应用于页面排版，然后随着收到图片数据由上至下绘制显示的。并且浏览器对每个页面的TCP连接数限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在DOM树构建完成后即可遍历获得所有在设备屏幕高度内的所有图片资源标签，在所有图片标签中添加document.onload事件，在整页加载完成（window.onLoad事件发生）时遍历图片标签并获得之前注册的document.onload事件时间的最大值，该最大值减去navigationStart即认为近似的首屏时间。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取firstscreen时间；
js部分计算首屏时间的逻辑代码：

function first_screen () {
var imgs = document.getElementsByTagName("img"), fs = +new Date;
var fsItems = [], that = this;
function getOffsetTop(elem) {
var top = 0;
top = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
try{
top += elem.getBoundingClientRect().top;
}catch(e){

    }finally{
        return top;
    }

}
var loadEvent = function() {
    //gif避免
    if (this.removeEventListener) {
        this.removeEventListener("load", loadEvent, false);
    }
    fsItems.push({
        img : this,
        time : +new Date
    });
}
for (var i = 0; i < imgs.length; i++) {
    (function() {
        var img = imgs[i];

        if (img.addEventListener) {

            !img.complete && img.addEventListener("load", loadEvent, false);
        } else if (img.attachEvent) {

            img.attachEvent("onreadystatechange", function() {
                if (img.readyState == "complete") {
                    loadEvent.call(img, loadEvent);
                }

            });
        }

    })();
}
function firstscreen_time() {
    var sh = document.documentElement.clientHeight;
    for (var i = 0; i < fsItems.length; i++) {
        var item = fsItems[i], img = item['img'], time = item['time'], top = getOffsetTop(img);
        if (top > 0 && top < sh) {
            fs = time > fs ? time : fs;
        }
    }
    return fs;
}      
window.addEventListener('load', function() {
 prompt('firstscreen:' + firstscreen_time());
 });

}

webview的注入代码：

private void registerOnLoadHandler(WebView view) {
String jscontent = getJavaScriptAsString();
view.loadUrl("javascript:" + jscontent +
"window.addEventListener('DOMContentLoaded', function() {" +
"first_screen();
});"
);
}

@Override
public void onReceivedTitle (WebView view, String title) {
registerOnLoadHandler(view);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("firstscreen".equals(strs[0])){
result.getCurrentRun().setFirstScreen(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

4、整页时间
整页时间（Page Load Time），是指页面完成整个加载过程的时刻。从Navigation Timing API上采集，就是loadEventEnd减去navigationStart。在传统采集方法中，会使用window对象的onload事件来记录时间戳，它表示浏览器认定该页面已经载入完全了。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取load（window.onLoad事件）时间，代码：

@Override
public void onReceivedTitle (WebView view, String title) {
view.loadUrl("javascript:" +
"window.addEventListener('load', function() {" +
"prompt('load:' + new Date().getTime());" +
);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("load".equals(strs[0])){
result.getCurrentRun().setFullyLoaded(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

1、白屏时间
指浏览器开始显示内容的时间。但是在传统的采集方式里，是在HTML的head标签结尾里记录时间戳，来计算白屏时间。在这个时刻，浏览器开始解析body标签内的内容。而现代浏览器不会等待CSS树（所有CSS文件下载和解析完成）和DOM树（整个body标签解析完成）构建完成才开始绘制，而是马上开始显示中间结果。所以经常在低网速的环境中，观察到页面由上至下缓慢显示完，或者先显示文本内容后再重绘成带有格式的页面内容。
在android中我们通过使用webview.WebChromeClient的onReceivedTitle事件来近似获得白屏时间。
2、DOM树构建时间
指浏览器开始对基础页文本内容进行解析到从文本中构建出一个内部数据结构（DOM树）的时间，这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时，初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发，这有时会导致比较严重的延迟，开发人员随后创建了domready事件，它在DOM加载之后及资源加载之前被触发。domready被众多JavaScript库所采用,它在本地浏览器中以DOMContentLoaded事件的形式被使用。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取domc（window.DOMContentLoaded事件）时间，代码：

@Override
public void onReceivedTitle (WebView view, String title) {
view.loadUrl("javascript:" +
"window.addEventListener('DOMContentLoaded', function() {" +
"prompt('domc:' + new Date().getTime());" +
);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("domc".equals(strs[0])){
result.getCurrentRun().setDocComplete(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

3、首屏时间
首屏时间（FirstScreen Time），是从网页应用的角度定义的指标，在Navigation Timing或者浏览器实现中并没有相关指标值。首屏时间，是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。常用的方法有，页面标签标记法、图像相似度比较法和首屏高度内图片加载法；
1）页面标签标记法，在HTML文档中对应首屏内容的标签结束位置，使用内联的JavaScript代码记录当前时间戳，比较局限；2）图像相似度比较法，通过比较连续截屏图像的像素点变化趋势确定首屏时间，最为科学和直观的方式，但是比较消耗本地设备的运行资源；3）首屏高度内图片加载法，通过寻找首屏区域内的所有图片，计算它们加载完的时间去得到首屏时间，这样比较符合网页的实际体验并且比较节省设备运行资源；
具体实现上我采用的是最后一种，即“首屏高度内图片加载法”；因为通常需要考虑首屏时间的页面，都是因为在首屏位置内放入了较多的图片资源。现代浏览器处理图片资源时是异步的，会先将图片长宽应用于页面排版，然后随着收到图片数据由上至下绘制显示的。并且浏览器对每个页面的TCP连接数限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在DOM树构建完成后即可遍历获得所有在设备屏幕高度内的所有图片资源标签，在所有图片标签中添加document.onload事件，在整页加载完成（window.onLoad事件发生）时遍历图片标签并获得之前注册的document.onload事件时间的最大值，该最大值减去navigationStart即认为近似的首屏时间。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取firstscreen时间；
js部分计算首屏时间的逻辑代码：

function first_screen () {
var imgs = document.getElementsByTagName("img"), fs = +new Date;
var fsItems = [], that = this;
function getOffsetTop(elem) {
var top = 0;
top = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
try{
top += elem.getBoundingClientRect().top;
}catch(e){

    }finally{
        return top;
    }

}
var loadEvent = function() {
    //gif避免
    if (this.removeEventListener) {
        this.removeEventListener("load", loadEvent, false);
    }
    fsItems.push({
        img : this,
        time : +new Date
    });
}
for (var i = 0; i < imgs.length; i++) {
    (function() {
        var img = imgs[i];

        if (img.addEventListener) {

            !img.complete && img.addEventListener("load", loadEvent, false);
        } else if (img.attachEvent) {

            img.attachEvent("onreadystatechange", function() {
                if (img.readyState == "complete") {
                    loadEvent.call(img, loadEvent);
                }

            });
        }

    })();
}
function firstscreen_time() {
    var sh = document.documentElement.clientHeight;
    for (var i = 0; i < fsItems.length; i++) {
        var item = fsItems[i], img = item['img'], time = item['time'], top = getOffsetTop(img);
        if (top > 0 && top < sh) {
            fs = time > fs ? time : fs;
        }
    }
    return fs;
}      
window.addEventListener('load', function() {
 prompt('firstscreen:' + firstscreen_time());
 });

}

webview的注入代码：

private void registerOnLoadHandler(WebView view) {
String jscontent = getJavaScriptAsString();
view.loadUrl("javascript:" + jscontent +
"window.addEventListener('DOMContentLoaded', function() {" +
"first_screen();
});"
);
}

@Override
public void onReceivedTitle (WebView view, String title) {
registerOnLoadHandler(view);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("firstscreen".equals(strs[0])){
result.getCurrentRun().setFirstScreen(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

4、整页时间
整页时间（Page Load Time），是指页面完成整个加载过程的时刻。从Navigation Timing API上采集，就是loadEventEnd减去navigationStart。在传统采集方法中，会使用window对象的onload事件来记录时间戳，它表示浏览器认定该页面已经载入完全了。
在android中我们通过注入js代码到webview中的方式来实现；具体实现上，在WebChromeClient的onReceivedTitle事件被触发时注入我们的js代码，然后通过WebChromeClient的onJsPrompt事件来获取load（window.onLoad事件）时间，代码：

@Override
public void onReceivedTitle (WebView view, String title) {
view.loadUrl("javascript:" +
"window.addEventListener('load', function() {" +
"prompt('load:' + new Date().getTime());" +
);
}

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult r) {
Log.i(UAQ_WEB_ACTIVITY, "**** Blocking Javascript Prompt :" + message);
if(message != null){
if(!preCacheRun){
String[] strs = message.split(":");
if(2 == strs.length){
if("load".equals(strs[0])){
result.getCurrentRun().setFullyLoaded(Long.valueOf(strs[1].trim()));
}
}
}
}
r.confirm(defaultValue);
return true;
}

文章标签：
域名
云解析DNS
JavaScript
Unix
Android开发
前端开发
Shell
网络协议
安全
移动开发
API
缓存
关键词：
dom加载
dom渲染
dom数据
dom触发
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
程序员诗人
目录
相关文章
Goodluck-dys
|
21天前
|
存储 JavaScript 前端开发
理解DOM树的加载过程
理解DOM树的加载过程
Goodluck-dys
16 0
泡芙-草莓
|
21天前
|
JavaScript
理解DOM树的加载过程（js的问题）
理解DOM树的加载过程（js的问题）
泡芙-草莓
10 0
极客小俊
|
7月前
|
存储 JSON JavaScript
哇塞 我初学javascript第1天就会使用原生数组+JSON+DOM实现了国家--城市--区县三级联动数据切换效果
使用原生数组+JSON+DOM实现了国家--城市--区县三级联动数据切换
极客小俊
75 0
哇塞 我初学javascript第1天就会使用原生数组+JSON+DOM实现了国家--城市--区县三级联动数据切换效果
会敲代码的_TT
|
2月前
|
存储 缓存 JavaScript
深入解析Vue中的keep-alive组件：优化组件切换与DOM渲染！
欢迎来到前端入门之旅！
会敲代码的_TT
34 0
zrblue
|
3月前
|
缓存 JavaScript 前端开发
客户端渲染页面、DOM重绘和回流、避免DOM的回流
客户端渲染页面、DOM重绘和回流、避免DOM的回流
zrblue
17 0
東方幻想鄉
|
4月前
|
JavaScript 前端开发
【HTML+REACT+ANTD 表格操作】处理(改变)数据，改变DOM
【HTML+REACT+ANTD 表格操作】处理(改变)数据，改变DOM
東方幻想鄉
37 0
你挚爱的强哥
|
4月前
|
JavaScript
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
你挚爱的强哥
41 0
neldwetfvlnhq
|
7月前
|
JavaScript 前端开发 UED
Vue中的动态DOM加载：实现更灵活的前端界面
Vue.js是一个流行的JavaScript框架，提供了强大的工具来构建交互式和动态的前端界面。在本博客中，我们将深入探讨Vue中动态加载DOM的方法和实例，以帮助您创建更灵活、响应式的用户界面。
neldwetfvlnhq
243 0
Mr.Meng_95
|
8月前
|
人工智能 自然语言处理 JavaScript
$nextTick与原生js先渲染dom再执行函数的方式
$nextTick与原生js先渲染dom再执行函数的方式
Mr.Meng_95
109 0
全职程序猿
|
8月前
|
JavaScript PHP
原生PHP 图片上传并渲染指定dom中
原生PHP 图片上传并渲染指定dom中
全职程序猿
35 0

热门文章

最新文章

  • 1
    原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
  • 2
    vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
  • 3
    react简单实现获取dom元素
  • 4
    深入了解 JavaScript 中的 DOM 和 BOM
  • 5
    DOM驱动和数据驱动的区别
  • 6
    为什么虚拟dom会提高性能？
  • 7
    JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。
  • 8
    JavaScript DOM 操作：解释一下浏览器的同源策略。
  • 9
    理解DOM树的加载过程
  • 10
    深入探讨前端框架Vue.js中的虚拟DOM机制
  • 1
    深入解析JavaScript原生操作DOM技术
    12
  • 2
    JavaScript DOM 操作：解释一下 cookie、sessionStorage 和 localStorage 的区别。
    15
  • 3
    JavaScript DOM 操作：解释一下浏览器的同源策略。
    14
  • 4
    react简单实现获取dom元素
    19
  • 5
    常用的DOM操作方法
    12
  • 6
    原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
    28
  • 7
    理解DOM树的加载过程（js的问题）
    10
  • 8
    vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
    23
  • 9
    理解DOM树的加载过程
    16
  • 10
    为什么虚拟dom会提高性能？
    18

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）