[size=large][b]嵌入式的开发[/b][/size]
在代码片断中嵌入各个时间点,最后统一上报。
一个插入式的设计是将各种时间拼接成字符串,上报后在服务器端将其记录下来,分析后将通过报表显示出来。
[url=http://42.96.169.98:8080/projdemo/speed/pagespeed.html]示例链接[/url]
前端页面关键点:
CSS装载时间,Html装载时间,JavaScript装载时间,整个页面装载时间
后台统计:
接收前端上报的时间点,经过计算后得到前台页面的各个装载时间,向日志系统或时间统计系统上报数据,得到前台时间点展现及趋势。
后台输出:
[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]
在代码片断中嵌入各个时间点,最后统一上报。
一个插入式的设计是将各种时间拼接成字符串,上报后在服务器端将其记录下来,分析后将通过报表显示出来。
[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]