`
haiyupeter
  • 浏览: 425257 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

生产环境页面性能监控

阅读更多
嵌入式的开发

在代码片断中嵌入各个时间点,最后统一上报。
一个插入式的设计是将各种时间拼接成字符串,上报后在服务器端将其记录下来,分析后将通过报表显示出来。
示例链接

前端页面关键点:
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开源系统性能监控

    值得注意的是,虽然JavaMelody提供了丰富的监控信息,但在生产环境中,应谨慎配置以避免暴露敏感信息。例如,限制访问监控页面的IP地址范围,或者使用安全认证机制。 总的来说,JavaMelody是一款免费且功能齐全的...

    官网页面性能测试报告V1.0

    ### 官网页面性能测试报告V1.0 #### 一、概述 本报告旨在验证官网新增功能的性能是否能够满足预期目标,并提供相应的优化建议和风险评估。通过对官网进行性能测试,确保新功能上线后不会对现有系统的稳定性和响应...

    Dubbo监控系统配置

    4. **性能监控**:提供CPU、内存等系统资源使用情况的监控,帮助评估服务性能。 5. **报警功能**:支持配置基于不同条件的报警策略,当满足预设条件时自动发送报警信息。 #### 四、总结 通过上述步骤,我们不仅...

    用JAVA小程序实现工业监控环境下WEB页面的实时更新.zip

    在工业监控环境中,实时数据更新对于确保生产流程的高效性和安全性至关重要。本项目利用Java小程序技术,构建了一个能够在WEB页面上实现数据实时刷新的系统,从而满足了这一需求。以下是这个系统实现的关键知识点: ...

    把一切都监控起来

    - **性能优化监控**:采用自动化手段监控前端性能,如页面加载速度、HTTP请求次数等,确保提供流畅的用户体验。 - **技术实现方案**:利用Ruby、httpwatch、watir等工具支持IE浏览器的测试;或使用Selenium、Fiddler...

    生产环境日常shell工作运维脚本工作直接复制不用修改直接运行

    这里提供的是一个包含20多个生产环境实际使用的Shell脚本集合,适用于各种场景,例如服务器监控、资源管理、数据库备份、网络安全等。下面我们将详细探讨这些脚本涉及的关键知识点。 1. **Nginx配置脚本(nginx....

    Javamelody监控

    JavaMelody是一款强大的Java应用程序性能监控工具,专为开发者...无论是在开发阶段还是生产环境中,JavaMelody都是一个不可或缺的辅助工具。通过深入理解和有效利用这个工具,我们可以更好地管理和维护我们的Java应用。

    Dubbo monitor监控程序

    5. **安全考虑**:由于监控数据包含敏感信息,生产环境中应考虑使用SSL加密传输,并限制访问权限,防止未授权访问。 通过充分利用Dubbo Monitor的功能,开发者和运维人员可以更有效地管理和优化Dubbo分布式服务,...

    跨端灰度监控方案建设.pdf

    首先,文章介绍了灰度监控的背景,强调在传统前端视角下页面运行的监控主要关注点是JSERROR、接口异常和性能问题。而从跨端视角来看,监控的范围进一步扩大到包括WEB、小程序、React Native、Flutter等多种端,监控...

    软件性能测试:性能测试概述 性能测试步骤 性能测试指标 压力测试

    2. **测试环境搭建**:模拟实际生产环境,配置与真实环境相似的硬件、网络和软件环境。 3. **测试计划**:制定测试策略,包括选择合适的性能测试工具,确定测试场景,设计测试用例。 4. **负载产生**:使用工具(如...

    面向生产环境的SOA系统设计

    通过上述内容可以看出,面向生产环境的SOA系统设计不仅涉及到技术层面的具体实现,还需要综合考虑业务需求、性能优化、容量规划等多个方面。只有这样,才能确保所构建的系统既能满足当前业务需求,又具备良好的扩展...

    Spring Boot druid 以及相关sql、Spring监控配置demo

    对于Spring监控,Spring Boot 提供了Actuator模块,它可以提供健康检查、指标、审计事件、环境信息等丰富的监控功能。配置Spring监控: 1. **添加Actuator依赖**:确保`spring-boot-starter-actuator`已引入。 2. *...

    性能测试方法论

    - 缺乏有效的性能监控机制。 **规避方法**: 1. **环境一致性**:确保测试环境尽可能地模拟生产环境。 2. **脚本验证**:对测试脚本进行严格的验证和调试。 3. **全面测试指标**:定义全面的性能测试指标,覆盖...

    jconsole远程监控配置手册(经典)

    ### jconsole远程监控配置手册(经典) #### 一、引言 本文档旨在提供一份详细的jconsole远程监控配置指南,适用...通过遵循这些步骤,用户可以有效地监控生产环境中的Tomcat应用服务器,从而更好地管理和优化系统性能。

    性能测试报告、性能测试结果分析

    1. **测试环境**:采用生产环境进行性能测试,选择非高峰时段进行压测。 2. **测试对象**:准备了2400+个马甲用户,并设置了统一密码,业务数据超过10000条。 3. **测试脚本**:设计了登录、访问首页、广场等多个...

    Jmeter-CPU内存监控-图形页面ServerAgent-2.2.1.rar

    - 结合JMeter的其他监控数据,如响应时间和错误率,我们可以综合评估系统在高负载下的表现,确保其在生产环境中能够稳定运行。 5. **注意事项** - ServerAgent与JMeter之间的通信应保持通畅,否则可能导致监控...

    一个运用php与swoole实现的统计监控系统.rar

    而Swoole则是一个为PHP设计的高性能、异步、并行的扩展库,它使得PHP可以运行在生产环境的高并发场景下,极大地提升了PHP处理I/O密集型任务的能力。这个"一个运用php与swoole实现的统计监控系统"项目,结合了两者的...

    zabbix监控系统、安装配置手册

    对于大多数生产环境而言,推荐使用二进制包安装,因为这种方式更加简单快速。 **2.2 安装Zabbix Server** Zabbix Server是整个监控系统的核心组件,负责收集来自代理的数据、执行主动检查、存储数据等任务。安装...

Global site tag (gtag.js) - Google Analytics