嵌入式的开发
在代码片断中嵌入各个时间点，最后统一上报。
一个插入式的设计是将各种时间拼接成字符串，上报后在服务器端将其记录下来，分析后将通过报表显示出来。
示例链接
前端页面关键点：
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("时间统计参数不存在");
}
后台输出：
引用
CSS时间：5ms
HTML时间：2ms
JS时间：437ms
总时间：444ms
基于html5的performace对象的时间监控
performace在各个浏览中的Bug：
http://www.cnblogs.com/_franky/archive/2011/11/07/2238980.html
参考：
前端性能监控总结
- 大小: 154.3 KB
- 大小: 61.4 KB
分享到：
相关推荐
Druid（数据源配置 sql防注入 sql性能监控) 统一的异常处理 JSP JSTL JavaScript kindeditor富文本编辑器，处理图片上传和富文本编辑 项目框架： 后台框架：spring+ springMVC + shiro + MyBatis + jsp 前台...
test（非必要）：默认提供的测试数据库，通常用于学习和实验，生产环境中可考虑删除。 sys（自MySQL 5.7版本）：提供更易用的视图来访问performance_schema中的信息，简化性能分析工作。 日志文件 MySQL通过日志...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该统计...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该统计...
交互式分析 批量数据非实时分析能力 秒级实时交互分析能力 实时数据查询能力 实时流计算 亚秒级，低延时的实时流处理 高可用的、基于内存计算的流计算引擎 性能业界领先 运维管理 一键式安装 可视化运维监控 按需...
使用这些工具，您可以重新编译全部不合法对象、查找数据库源中文本、导入或导出表格、生成测试数据、导出文本文件、监控dbms_alert和dbms_pipe事件、浏览会话信息等。 授权 大多数开发环境中，您不希望所有数据库...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该统计...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该...
网站页面创意设计 7 3.1 首页设计 7 3.2页面设计 7 3.3页面静与动 7 4、网站栏目介绍 7 5、附加内容 9 6、功能要求 9 6.1 网站新闻发布系统 9 6.2 栏目设置系统 9 6.3 管理员系统 10 6.4 文章搜索系统 10 6.5 留言...
此外，还增加了新的功能如从库中更新和比较元件信息、DxDesinger操作键功能加强如Navigator单击和拖拉页面等。 2. 业界享有盛誉的PADS Layout/Router模块，在PADS9.0版本中的优秀功能如下： PCB Editor：基本PCB...
<br>性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息...
<br>性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息...
<br>性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息...
19、对于开发和测试环境，下列说法正确的是：开发和测试环境必须能反映生产环境 /生产环境同开发和测试环境必须分离/应按照开发和测试计划中设置的标准配置来建立环境 /为了实现对项目的控制，需要注意同步开发和...
FSP 提供了可用于生产环境的外围设备驱动程序，Amazon FreeRTOS和中间件堆栈，以利用 FSP 生态系统。 e2studio开发环境下载与安装（部分） Step1. 登录 Renesas 官网:https://www2.renesas.cn/cn/zh/，选择“产品→...
使用这些工具，您可以重新编译全部不合法对象、查找数据库源中文本、导入或导出表格、生成测试数据、导出文本文件、监控dbms_alert和dbms_pipe事件、浏览会话信息等。 授权 大多数开发环境中，您不希望所有数据库...
性能优化——使用PL/SQL Profiler，可以浏览每一执行的PL/SQL代码行的时序信息（Oracle8i或更高），从而优化您SQL和PL/SQL的代码性能。 更进一步，您还可以自动获取所执行的SQL语句和PL/SQL程序统计信息。该统计...