前端页面速度统计方法

如何统计首屏时间

在页面的各个阶段，将时间打印出来，亦或者是使用html5新增的接口：performance来评估一下自己的网站到底差在哪里(如图)。

网页最开始的跳转时间：HTML5的performance接口提供了这个时间：performance.timing.navigationStart。
然后在估算接近于一屏幕的元素的位置后，打印一下当前时间。
并且把首屏中所有图片的加载时间也算上。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"><script type="text/javascript">window.logInfo = {};window.logInfo.openTime = performance.timing.navigationStart;</script></head><body><div>这是第一屏，这是第一屏</div><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"><div>第一屏结尾，第一屏结尾</div><script type="text/javascript">(function logFirstScreen() {var images = document.getElementsByTagName('img');var iLen = images.length;var curMax = 0;var inScreenLen = 0;// 图片的加载回调function imageBack() {this.removeEventListener&& this.removeEventListener('load', imageBack, !1);if (++curMax === inScreenLen) {// 如果所有在首屏的图片均已加载完成了的话，发送日志log();}   }   // 对于所有的位于指定区域的图片，绑定回调事件for (var s = 0; s < iLen; s++) {var img = images[s];var offset = {top: 0};var curImg = img;while (curImg.offsetParent) {offset.top += curImg.offsetTop;curImg = curImg.offsetParent;}// 判断图片在不在首屏if (document.documentElement.clientHeight < offset.top) {continue;}// 图片还没有加载完成的话if (!img.complete) {inScreenLen++;img.addEventListener('load', imageBack, !1);}}// 如果首屏没有图片的话，直接发送日志if (inScreenLen === 0) {log();}// 发送日志进行统计function log () {window.logInfo.firstScreen = +new Date() - window.logInfo.openTime;console.log('首屏时间：', window.logInfo.firstScreen + 'ms');}})();</script><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"><img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"></body>
</html>

如何统计白屏时间

可以在页面的head底部添加的JS代码来统计白屏时间，虽然这样做可能并不十分精准，但是也可以基本代表了首屏时间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"><script type="text/javascript">window.logInfo = {};window.logInfo.openTime = performance.timing.navigationStart;window.logInfo.whiteScreenTime = +new Date() - window.logInfo.openTime;console.log('白屏时间：', window.logInfo.whiteScreenTime + 'ms');</script></head>

如何统计用户可操作时间

1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

document
.addEventListener('DOMContentLoaded',function (event) {window.logInfo.readyTime = +new Date() - window.logInfo.openTime;console.log('用户可操作时间：', window.logInfo.readyTime);}
);

如何打印总下载时间

使用window.onload即可，

window.onload = function () {window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;console.log('总下载时间：', window.logInfo.allloadTime + 'ms');
};

前端页面速度统计方法相关推荐

总结一些前端页面优化的方法（一）
前言: 这里我想写一点日常前端页面优化的方法,将持续发布一些我所遇到的问题优化,尽量写的通俗易懂些(大白话搞起!!!) 一.减少页面加载时间的方法优化图片(这个很重要,图片尽量压缩一下) 图像格式化 ...
关于前端页面优化的方法
前端页面优化方法 1.减少http请求,减少DNS查询次数,减少dom操作 2.CSS写在顶部,JavaScript写在尾部或异步 3.压缩HTML.CSS.JavaScript 4.js不滥用闭包, ...
解决前端页面中文乱码问题
前端页面乱码问题解决方法: 解决代码: 方法: 确定开发工具的各种编码格式配置为 utf-8 确定前端页面的编码格式 request,response携带的数据的编码格式,可通过过滤器设置 Ch ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
java 端写的list 前端页面获取方法
第一种方法: java: 前端页面  <%@ taglib uri="/struts-tags" prefix="s&quo ...
html-javascript前端页面刷新重载的方法汇总
记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...
使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
HTML 提高页面加载速度的方法
HTML 提高页面加载速度的方法: 1. 减少http请求(合并资源文件,合并图片-精灵图) 2. 把css放文件头部,javascript放body标签尾部 3. 定义图片的宽,高 4. 避免空的s ...
HTML前端页面颜色的四种方法，色号表
HTML前端页面颜色的四种方法,色号表颜色的三种表示方式: (1)单词:red green black-用法: <font color="pink" size=" ...