嵌入式的开发
在代码片断中嵌入各个时间点,最后统一上报。
一个插入式的设计是将各种时间拼接成字符串,上报后在服务器端将其记录下来,分析后将通过报表显示出来。
示例链接
前端页面关键点:
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
分享到:
相关推荐
7. **集成与部署**:系统可能提供了与现有开发工作流集成的方法,如Webpack插件,以及自动化部署到生产环境的脚本。 在实践中,前端性能监控不仅要考虑技术实现,还需要结合业务需求和用户行为进行调整。例如,针对...
值得注意的是,虽然JavaMelody提供了丰富的监控信息,但在生产环境中,应谨慎配置以避免暴露敏感信息。例如,限制访问监控页面的IP地址范围,或者使用安全认证机制。 总的来说,JavaMelody是一款免费且功能齐全的...
### 官网页面性能测试报告V1.0 #### 一、概述 本报告旨在验证官网新增功能的性能是否能够满足预期目标,并提供相应的优化建议和风险评估。通过对官网进行性能测试,确保新功能上线后不会对现有系统的稳定性和响应...
4. **性能监控**:提供CPU、内存等系统资源使用情况的监控,帮助评估服务性能。 5. **报警功能**:支持配置基于不同条件的报警策略,当满足预设条件时自动发送报警信息。 #### 四、总结 通过上述步骤,我们不仅...
在工业监控环境中,实时数据更新对于确保生产流程的高效性和安全性至关重要。本项目利用Java小程序技术,构建了一个能够在WEB页面上实现数据实时刷新的系统,从而满足了这一需求。以下是这个系统实现的关键知识点: ...
- **性能优化监控**:采用自动化手段监控前端性能,如页面加载速度、HTTP请求次数等,确保提供流畅的用户体验。 - **技术实现方案**:利用Ruby、httpwatch、watir等工具支持IE浏览器的测试;或使用Selenium、Fiddler...
这里提供的是一个包含20多个生产环境实际使用的Shell脚本集合,适用于各种场景,例如服务器监控、资源管理、数据库备份、网络安全等。下面我们将详细探讨这些脚本涉及的关键知识点。 1. **Nginx配置脚本(nginx....
JavaMelody是一款强大的Java应用程序性能监控工具,专为开发者...无论是在开发阶段还是生产环境中,JavaMelody都是一个不可或缺的辅助工具。通过深入理解和有效利用这个工具,我们可以更好地管理和维护我们的Java应用。
5. **安全考虑**:由于监控数据包含敏感信息,生产环境中应考虑使用SSL加密传输,并限制访问权限,防止未授权访问。 通过充分利用Dubbo Monitor的功能,开发者和运维人员可以更有效地管理和优化Dubbo分布式服务,...
首先,文章介绍了灰度监控的背景,强调在传统前端视角下页面运行的监控主要关注点是JSERROR、接口异常和性能问题。而从跨端视角来看,监控的范围进一步扩大到包括WEB、小程序、React Native、Flutter等多种端,监控...
2. **测试环境搭建**:模拟实际生产环境,配置与真实环境相似的硬件、网络和软件环境。 3. **测试计划**:制定测试策略,包括选择合适的性能测试工具,确定测试场景,设计测试用例。 4. **负载产生**:使用工具(如...
通过上述内容可以看出,面向生产环境的SOA系统设计不仅涉及到技术层面的具体实现,还需要综合考虑业务需求、性能优化、容量规划等多个方面。只有这样,才能确保所构建的系统既能满足当前业务需求,又具备良好的扩展...
对于Spring监控,Spring Boot 提供了Actuator模块,它可以提供健康检查、指标、审计事件、环境信息等丰富的监控功能。配置Spring监控: 1. **添加Actuator依赖**:确保`spring-boot-starter-actuator`已引入。 2. *...
- 缺乏有效的性能监控机制。 **规避方法**: 1. **环境一致性**:确保测试环境尽可能地模拟生产环境。 2. **脚本验证**:对测试脚本进行严格的验证和调试。 3. **全面测试指标**:定义全面的性能测试指标,覆盖...
### jconsole远程监控配置手册(经典) #### 一、引言 本文档旨在提供一份详细的jconsole远程监控配置指南,适用...通过遵循这些步骤,用户可以有效地监控生产环境中的Tomcat应用服务器,从而更好地管理和优化系统性能。
1. **测试环境**:采用生产环境进行性能测试,选择非高峰时段进行压测。 2. **测试对象**:准备了2400+个马甲用户,并设置了统一密码,业务数据超过10000条。 3. **测试脚本**:设计了登录、访问首页、广场等多个...
- 结合JMeter的其他监控数据,如响应时间和错误率,我们可以综合评估系统在高负载下的表现,确保其在生产环境中能够稳定运行。 5. **注意事项** - ServerAgent与JMeter之间的通信应保持通畅,否则可能导致监控...
而Swoole则是一个为PHP设计的高性能、异步、并行的扩展库,它使得PHP可以运行在生产环境的高并发场景下,极大地提升了PHP处理I/O密集型任务的能力。这个"一个运用php与swoole实现的统计监控系统"项目,结合了两者的...
对于大多数生产环境而言,推荐使用二进制包安装,因为这种方式更加简单快速。 **2.2 安装Zabbix Server** Zabbix Server是整个监控系统的核心组件,负责收集来自代理的数据、执行主动检查、存储数据等任务。安装...