前端性能监控实践-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_21250/article/details/82488108

[size=large][b]嵌入式的开发[/b][/size]

在代码片断中嵌入各个时间点，最后统一上报。
一个插入式的设计是将各种时间拼接成字符串，上报后在服务器端将其记录下来，分析后将通过报表显示出来。
[url=http://42.96.169.98:8080/projdemo/speed/pagespeed.html]示例链接[/url]

前端页面关键点：
CSS装载时间，Html装载时间，JavaScript装载时间，整个页面装载时间



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 初始时间
    var _time_point = [];
    _time_point.push(new Date().getTime());
</script>
<link rel="stylesheet" type="text/css" href="../omui/css/elegant/om-elegant.css">
<style>
    	.slider-demo{
    		width: 500px;
    		height: 375px;
    		border: 1px solid #0092D2;
    	}
</style>
    <script type="text/javascript">
    	// CSS装载时间
    	_time_point.push(new Date().getTime());
    </script>
</head>
<body>
<div id="slider" class="slider-demo">
    <img src="images/turtle.jpg" />
    <a href="#"><img src="images/rabbit.jpg" /></a>
    <img src="images/penguin.jpg" />
    <img src="images/lizard.jpg" />
    <img src="images/crocodile.jpg" />
</div>
<div id="view-desc">
<p>在指定的dom元素中，生成最简单的slider。
    slider把指定元素下的子节点作为滑动的对象面板，并在右下角生成用来切换面板的导航条。</p>
</div>
<script type="text/javascript">
    	// html装载时间
    	_time_point.push(new Date().getTime());
    </script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../omui/development-bundle/ui/operamasks-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').omSlider();
});
</script>
<script type="text/javascript">

</script>
<script type="text/javascript">
    	// JS装载时间
    	_time_point.push(new Date().getTime());
    	// css 装载时间， html页面装载时间， javascript装载时间
    	var img = document.createElement("img");
        img.src="http://localhost:8080/projdemo/ping/TimePoint?time_point=" + _time_point.join(",");
    </script>
</body>
</html>

后台统计：
接收前端上报的时间点，经过计算后得到前台页面的各个装载时间，向日志系统或时间统计系统上报数据，得到前台时间点展现及趋势。

// TODO Auto-generated method stub
		String time_point = request.getParameter("time_point");
		if (time_point != null && !"".equals(time_point)) {
			// 如果time_point不为空，则向后台打印时间
			String[] points = time_point.split(",");
			try {
				Long point0 = Long.parseLong(points[0]);
				Long point1 = Long.parseLong(points[1]);
				Long point2 = Long.parseLong(points[2]);
				Long point3 = Long.parseLong(points[3]);
				Long css_time = point1 - point0;
				Long html_time = point2 - point1;
				Long js_time = point3 - point2;
				Long all_time = point3 - point0;
				System.out.println("CSS时间：" + css_time + "ms");
				System.out.println("HTML时间：" + html_time + "ms");
				System.out.println("JS时间：" + js_time + "ms");
				System.out.println("总时间：" + all_time + "ms");
			} catch (Exception e) {
				// 日志系统输出
				System.out.println("数据格式转换失败：" + time_point);
			}
		} else {
			// 日志系统输出
			System.out.println("时间统计参数不存在");
		}

后台输出：
[quote]CSS时间：5ms
HTML时间：2ms
JS时间：437ms
总时间：444ms
[/quote]

[size=large][b]基于html5的performace对象的时间监控[/b][/size]

[img]http://dl.iteye.com/upload/attachment/0083/3200/a723dc8a-f135-3f0d-bbcb-c9ad314a3bfd.png[/img]

performace在各个浏览中的Bug：
http://www.cnblogs.com/_franky/archive/2011/11/07/2238980.html

参考：[url=http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html]前端性能监控总结[/url]