提示信息应该写在前台还是通过后台返回到前台————考虑系统的性能问题

编程语言 2018-11-01 06:01:30 阅读次数: 0

先贴修改后的代码：

$(function(){
     var params = window.parent._pressureParams;//上一个页面的js给传的参数
     params.token = window.parent.token;   //系统用到了token
     $(".g-loading").show();           //数据未加载出来之前弹出加载动态图
     if(params.targetSys == '' || params.targetSysInterface == '' || params.invokeStartTime == null){    //输入参数的判断，如果不                                                                                                                                                                      够则显示提示信息
         $("#no").html('查询条件不足，请选择合适的时间范围，输入精确的被调系统及其接口');
         $("div:eq(0)").show();   //div:eq(0)表示第1个div
         $("div:eq(1)").hide();     //div:eq(1)表示第2个div
         $(".g-loading").hide();   //显示提示信息加载动态图隐藏
     }else{
         $.ajax({
             type: 'GET',
             url: parent.url + 'api/interfaceInvokeLog/findInterfacePressureTestData',
             data: params,
             dataType: "json",
             success: function(jsondata) {
                 if(jsondata.data){
                     $(".g-loading").hide();   //数据加载出来加载动态图隐藏
                     $("div:eq(0)").hide();    //提示信息div隐藏
                     $("div:eq(1)").show();  //数据展示div展示
                     $("#inter_Name").text(jsondata.data.interfaceName);
                     $("#s_t").text(Format(jsondata.data.beginInvokeStartTime));
                     $("#e_t").text(Format(jsondata.data.endInvokeStartTime));
                     $("#totalTime").text(MillisecondToDate(jsondata.data.totalTime));
                     $("#visitNum").text(jsondata.data.visitNum+"次");
                     $("#avgVisitAvgNum").text(jsondata.data.avgVisitAvgNum+"次/秒");
                     $("#trt").text(jsondata.data.maxRespondTime+"ms");
                     $("#frt").text(jsondata.data.minRespondTime+"ms");
                     $("#art").text(jsondata.data.avgRespondTime+"ms");
                     
                     var html = "";
                     if(jsondata.data.respondTimesData){
                         for(var i = 0; i<jsondata.data.respondTimesData.length; i++){
                             html += "<tr><td colspan=\"2\">" + jsondata.data.respondTimesData[i].respondTime + "</td>";
                             html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].subVisitNum + "</td>";
                             html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].percentageNum + "%</td></tr>";
                         }
                     }
                     $("#t_b").html(html);
                 }else{
                     $("div:eq(0)").show();    //无数据提示信息div隐藏
                     $("div:eq(1)").hide();    //无数据数据展示div隐藏
                     $(".g-loading").hide();  //无数据隐藏加载动态图隐藏
                 }
             }
         });
     }
});

解释一下，为什么说考虑到性能问题

修改前我的代码如下：

$(function(){
	 var params = window.parent._pressureParams;
	 params.token = window.parent.token;
	 $(".g-loading").show();
	 $.ajax({
	     type: 'GET',
	     url: parent.url + 'api/interfaceInvokeLog/findInterfacePressureTestData',
	     data: params,
	     dataType: "json",
	     success: function(jsondata) {
	    	 if(params.targetSys == '' || params.targetSysInterface == '' || params.invokeStartTime == null){
	    		 //alert(data.msg + '请输入选择时间范围，以及精确的被调系统及其接口');
	    		 //debugger;
	    		 $("#no").html(jsondata.msg + '，请选择合适的时间范围，输入精确的被调系统及其接口');
	    		// alert("1"+$("#no").html());
	    		 $("div:eq(0)").show();
	    		 $("div:eq(1)").hide();
	    		 $(".g-loading").hide();
	    	 }else{
		    	 if(jsondata.data){
		    		 debugger;
		    		 $(".g-loading").hide();
		    		 $("div:eq(0)").hide();
		    		 $("div:eq(1)").show();
		    		 $("#inter_Name").text(jsondata.data.interfaceName);
	                 $("#s_t").text(Format(jsondata.data.beginInvokeStartTime));
	                 $("#e_t").text(Format(jsondata.data.endInvokeStartTime));
	                 $("#totalTime").text(MillisecondToDate(jsondata.data.totalTime));
	                 $("#visitNum").text(jsondata.data.visitNum+"次");
	                 $("#avgVisitAvgNum").text(jsondata.data.avgVisitAvgNum+"次/秒");
	                 $("#trt").text(jsondata.data.maxRespondTime+"ms");
	                 $("#frt").text(jsondata.data.minRespondTime+"ms");
	                 $("#art").text(jsondata.data.avgRespondTime+"ms");
	                 
	    	    	 var html = "";
	    	         if(jsondata.data.respondTimesData){
	    	        	 for(var i = 0; i<jsondata.data.respondTimesData.length; i++){
	    	        		 html += "<tr><td colspan=\"2\">" + jsondata.data.respondTimesData[i].respondTime + "</td>";
	    	        		 html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].subVisitNum + "</td>";
	    	        		 html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].percentageNum + "%</td></tr>";
	        	         }
	    	         }
	    	         $("#t_b").html(html);
		    	 }else{
		    		 $("div:eq(0)").show();
		    		 $("div:eq(1)").hide();
		    		 $(".g-loading").hide();
		    	 }
	    	 }
	     }
	 });
});

主要看下面这段代码的位置

if(params.targetSys == '' || params.targetSysInterface == '' || params.invokeStartTime == null){    //输入参数的判断，如果不                                                                                                                                                                      够则显示提示信息
         $("#no").html('查询条件不足，请选择合适的时间范围，输入精确的被调系统及其接口');
         $("div:eq(0)").show();   //div:eq(0)表示第1个div
         $("div:eq(1)").hide();     //div:eq(1)表示第2个div
         $(".g-loading").hide();   //显示提示信息加载动态图隐藏
     }

修改前它是放在ajax请求数据之后

从后台返回的数据形式如下：

{"msg":"提示信息","code":0,"data":[n个json串],"count":305663,"token":"xxx"}

我在后台判断前台传的查询条件是否足够，不够的话将提示信息“查询条件不足”返回到前台，前台才能看到条件不足的信息，这一过程是缓慢的。

突然一想在前台就可以知道查询条件是否够了，思考了一下，考虑的结果就是在ajax请求后台之前就进行判断并提示条件不足，就有了上面修改后的代码。

扫描二维码关注公众号，回复： 3863150 查看本文章

小女子不才，这是第一次自己考虑到系统的性能问题，特此记录

最后贴上我的该页面所有代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../build/css/base.css" media="all">
<script src="../../build/jquery/dist/jquery.js"></script>
<style type="text/css">
#main-area {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}

#dialog-win {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #DDD;
	opacity: 0.2;
	z-index: 99;
	display: none;
}

#loading-win {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #CCC;
	opacity: 0.3;
	z-index: 99;
}

.loading-gif {
	position: absolute;
	left: 25%;
	top: 15%;
	width: 300px;
	height: 300px;
	display: inline-block;
	background: url("../../build/image/loading2.gif");
	z-index: 499;
	display: none;
}

table {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border: 1px solid #DDD;
}

thead tr {
	height: 30px;
	border: 1px solid #DDD;
}

thead tr th {
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	color: #666;
	border: 1px solid #DDD;
}

tbody tr {
	height: 25px;
	border: 1px solid #DDD;
}

tbody tr td {
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	color: #666;
	border: 1px solid #DDD;
}
.msg{
	color:red;
}
</style>
<script>


//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
//例子：   
//Format("2016-10-04 8:9:4.423","yyyy-MM-dd hh:mm:ss.S") ==> 2016-10-04 08:09:04.423   
//Format("1507353913000","yyyy-M-d h:m:s.S")      ==> 2017-10-7 13:25:13.0  
function Format(datetime) {
	 /**
	  * 由于该页面展示的都是yyyy-MM-dd hh:mm:ss类型，这里将该方法的一个参数直接在方法中写死，
	  * 若需要其他的时间形式，可将时间模式放到第二个参数的位置上
	  */
	  var fmt="yyyy-MM-dd hh:mm:ss";
	  if (parseInt(datetime)==datetime) {
	    if (datetime.length==10) {
	      datetime=parseInt(datetime)*1000;
	    } else if(datetime.length==13) {
	      datetime=parseInt(datetime);
	    }
	  }
	  datetime=new Date(datetime);
	  var o = {
	  "M+" : datetime.getMonth()+1,                 //月份   
	  "d+" : datetime.getDate(),                    //日   
	  "h+" : datetime.getHours(),                   //小时   
	  "m+" : datetime.getMinutes(),                 //分   
	  "s+" : datetime.getSeconds(),                 //秒   
	  "q+" : Math.floor((datetime.getMonth()+3)/3), //季度   
	  "S"  : datetime.getMilliseconds()             //毫秒   
	  };   
	  if(/(y+)/.test(fmt))   
	  fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));   
	  for(var k in o)   
	  if(new RegExp("("+ k +")").test(fmt))   
	  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
	  return fmt;
}

//将秒转化为xx小时xx分钟xx秒

function MillisecondToDate(msd) {
    var time = parseFloat(msd) / 1000;
    if (null != time && "" != time) {
        if (time > 60 && time < 60 * 60) {
            time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
                parseInt(time / 60.0)) * 60) + "秒";
        }
        else if (time >= 60 * 60 && time < 60 * 60 * 24) {
            time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
                parseInt(time / 3600.0)) * 60) + "分钟" +
                parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
        }
        else {
            time = parseInt(time) + "秒";
        }
    }
    return time;
}

	$(function(){
	     var params = window.parent._pressureParams;//上一个页面的js给传的参数
	     params.token = window.parent.token;        //系统用到了token
	     $(".g-loading").show();                    //数据未加载出来之前弹出加载动态图
	     if(params.targetSys == '' || params.targetSysInterface == '' || params.invokeStartTime == null){    //输入参数的判断，如果不                                                                                                                                                                      够则显示提示信息
	         $("#no").html('查询条件不足，请选择合适的时间范围，输入精确的被调系统及其接口');
	         $("div:eq(0)").show();                 //div:eq(0)表示第1个div
	         $("div:eq(1)").hide();                 //div:eq(1)表示第2个div
	         $(".g-loading").hide();                //显示提示信息加载动态图隐藏
	     }else{
	         $.ajax({
	             type: 'GET',
	             url: parent.url + 'api/interfaceInvokeLog/findInterfacePressureTestData',
	             data: params,
	             dataType: "json",
	             success: function(jsondata) {
	                 if(jsondata.data){
	                     $(".g-loading").hide();    //数据加载出来加载动态图隐藏
	                     $("div:eq(0)").hide();     //提示信息div隐藏
	                     $("div:eq(1)").show();     //数据展示div展示
	                     $("#inter_Name").text(jsondata.data.interfaceName);
	                     $("#s_t").text(Format(jsondata.data.beginInvokeStartTime));
	                     $("#e_t").text(Format(jsondata.data.endInvokeStartTime));
	                     $("#totalTime").text(MillisecondToDate(jsondata.data.totalTime));
	                     $("#visitNum").text(jsondata.data.visitNum+"次");
	                     $("#avgVisitAvgNum").text(jsondata.data.avgVisitAvgNum+"次/秒");
	                     $("#trt").text(jsondata.data.maxRespondTime+"ms");
	                     $("#frt").text(jsondata.data.minRespondTime+"ms");
	                     $("#art").text(jsondata.data.avgRespondTime+"ms");
	                     
	                     var html = "";
	                     if(jsondata.data.respondTimesData){
	                         for(var i = 0; i<jsondata.data.respondTimesData.length; i++){
	                             html += "<tr><td colspan=\"2\">" + jsondata.data.respondTimesData[i].respondTime + "</td>";
	                             html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].subVisitNum + "</td>";
	                             html += "<td colspan=\"2\">" + jsondata.data.respondTimesData[i].percentageNum + "%</td></tr>";
	                         }
	                     }
	                     $("#t_b").html(html);
	                 }else{
	                     $("div:eq(0)").show();     //无数据提示信息div隐藏
	                     $("div:eq(1)").hide();     //无数据数据展示div隐藏
	                     $(".g-loading").hide();    //无数据隐藏加载动态图隐藏
	                 }
	             }
	         });
	     }
	});
</script>
</head>
<body>

	<div class="msg" id="no" style="display: none;">查无数据</div>
	<div id="main-area">
		<div>
			<table>
				<thead>
					<tr>
						<th colspan="6">xx表</th>
					</tr>
					<tr>
						<td>xx名称</td>
						<td colspan="5" id="inter_Name"></td>
					</tr>
					<tr>
						<td>开始时间</td>
						<td id="s_t"></td>
						<td>结束时间</td>
						<td id="e_t"></td>
						<td>时长</td>
						<td id="totalTime"></td>
					</tr>
					<tr>
						<td>访问量</td>
						<td id="visitNum"></td>
						<td>平均访问量</td>
						<td colspan="3" id="avgVisitAvgNum"></td>
					</tr>
					<tr>
						<td>最大响应时间</td>
						<td id="trt"></td>
						<td>最小响应时间</td>
						<td id="frt"></td>
						<td>平均响应时间</td>
						<td id="art"></td>
					</tr>
					<tr>
						<th colspan="6">响应时间区间表</th>
					</tr>
					<tr>
						<td colspan="2">响应时间</td>
						<td colspan="2">访问量</td>
						<td colspan="2">占比</td>
					</tr>
				</thead>
				<tbody id="t_b"></tbody>
			</table>
		</div>
	</div>
	<div id="loading-win" class="g-loading"></div>
	<div class="loading-gif g-loading"></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/Sun_of_Rainy/article/details/83584117
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022