同步加载(刷新):每次刷新的是整个页面的数据
异步加载(刷新):每次刷新的是整个页面的部分数据
由于之前做公司内部的小项目的一个显示的页面,用到定时加载页面数据的变化 ,每隔多少时间刷新一次数据反馈到页面;所以前端方面就随意写了,做了一个简单的小后台操作,然后把后端接口和数据逻辑写完,就接连前后端测试无误后,部署了 》》》
我的小麻烦来了,由于我的显示页面的数据数据请求都是直接加载该接口,然后重定向(同步加载)回显示页面,这就造成了很多小问题了:
(1)由于是拉取第三方数据,再经过后台的逻辑计算循环存储到本地数据库,再查询本地数据返回,如果网络不怎么好,就很容易出现加载失败,返回显示页面就会报警,不能正常显示,就要重新投屏刷新;
(2)本公司的网络到晚上0点时会断网,早上看到的显示页面就会变白屏,每天都要重新投屏刷新;
所以:本人就不得不优化这个项目了(没办法,本公司本部门就我一个web的,而我就是部门中混的最差的那个,原因这里就不说了)
好了,搬砖时候到了 》》》
1、优化前的显示页面
后端返回(另外两个方法类似):
public function gogo(){
$meblts = Db::query('SELECT name,avatarUrl,all_task,completed_task,today_task,COUNT(1) FROM comp_members WHERE today_task =(SELECT MAX(today_task) FROM comp_members)'); //查询数据库获取数据
$list = Db::query('SELECT * FROM comp_members ORDER BY completed_task DESC');//查询数据库获取数据
$this->assign("list",$list);//获取对象显示到对应的view
$this->assign('meblts', $meblts);//获取对象显示到对应的view
$text1 = Db::query('SELECT content FROM tb_text where id = 1');//获取文字1
$text1 = current($text1);
$text2 = Db::query('SELECT content FROM tb_text where id = 2');//获取文字2
$text2 = current($text2);
$this->assign("tx1",$text1);//获取对象显示到对应的view
$this->assign("tx2",$text2);//获取对象显示到对应的view
return $this->fetch();
}
html 和 JavaScript:(记得引入js、一些 图片和 数据,我的后端是php语言)(数据可以造个假的测试)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--<meta http-equiv="refresh" content="1900">--><!--定时刷新页面-->
<title>排行榜</title>
<link rel="icon" type="image/x-icon" href="__PUBLIC__/image/favicon2.ico">
<link rel="stylesheet" href="__PUBLIC__/css/tbrank.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="dv_tay">
<div class="dv_tay2">
<div class="dv_tb dv_tb_left">
<div >
<div class="tb_left_box tb_left_top"></div>
<div id="tb_left_body" class="tb_left_box tb_left_middle">
{volist name="meblts" id="m" length='1'}
<div class="tb_margin2">
<img class="tb_box_img" src={$m.avatarUrl} />
</div>
<div class="tb_margin">
<p class="tb_box_white tb_box_name"><b>{$m.name}</b></p>
<b class="tb_box_white tb_box_font">今日之星</b>
</div>
<div class="tb_margin">
<div class="tb_box">
<p class="tb_box_title tb_box_font">已完成</p>
<b class="tb_box_white dv_bold">{$m.completed_task}</b>
</div>
<div class="tb_box">
<p class="tb_box_title tb_box_font">当日完成</p>
<b class="tb_box_white dv_bold">{$m.today_task}</b>
</div>
<div class="tb_box">
<p class="tb_box_title tb_box_font">累计完成</p>
<b class="tb_box_white dv_bold">{$m.all_task}</b>
</div>
</div>
<div class="tb_margin2">
<img class="tb_box_trophy" src="__PUBLIC__/image/trophy.png" />
</div>
<div class="tb_margin2">
<p class="tb_box_white tb_box_fw ">{$tx1.content}</p>
<p class="tb_box_white tb_box_fw ">{$tx2.content}</p>
</div>
{/volist}
</div>
<div class="tb_left_box tb_left_lower"></div>
</div>
</div>
<div class="dv_tb dv_tb_right">
<div class="dv_theme">
<img class="dv_theme_img" src="__PUBLIC__/image/prize.png"/>
<b>软硬件工程师绩效荣耀榜</b>
<img class="dv_theme_top" src="__PUBLIC__/image/top10.png"/>
</div>
<div class="dv_tb_rblock dv_tb_scroll">
<table id="tb" >
<tbody>
{volist name='list' id='v' length="10"}
<tr class="tb_tr">
<td style="display: none">{$v._id}</td>
<td class="tr_tdimg"><img class="tb_img" src={$v.avatarUrl} /></td>
<!--<td class="td_position"><span class="td_name dv_bold2">{$v.name}</span></td>-->
<td class="tr_td"><span class="tb_zt_font">共计任务</span><p class="dv_bold">{$v.all_task}</p></td>
<td class="tr_td"><span class="tb_zt_font">未完成</span><p class="dv_bold">{$v.unfinished_task}</p></td>
<td class="tr_td"><span class="tb_zt_font">已完成</span><p class="dv_bold">{$v.completed_task}</p></td>
<td class="tr_td"><span class="tb_zt_font">当日完成</span><p class="dv_bold">{$v.today_task}</p></td>
<td class="tr_td"><span class="tb_zt_font">累计PASS</span><p class="dv_bold">{$v.pass}</p></td>
<td class="tr_td"><span class="tb_zt_font">累计NG</span><p class="dv_bold">{$v.ng}</p></td>
<td class="tr_td"><span class="tb_zt_font">月度排名</span><p class="dv_bold">{$i}</p></td>
<?php if($i==1){ ?>
<td class="tr_td tb_left_img"><img class="tb_img2" src="__PUBLIC__/image/crown.png"/></td>
<?php } ?>
<?php if($i==2){ ?>
<td class="tr_td tb_left_img"><img class="tb_img2" src="__PUBLIC__/image/crown.png"/></td>
<?php } ?>
</tr>
{/volist}
</tbody>
</table>
</div>
<div class="dv_btnfs">
<a class="dv_fs dv_fse" onclick="requestFullScreen();"></a>
<a class="dv_fs dv_fsc" onclick="exitFullscreen();"></a>
</div>
</div>
</div>
</div>
<script>
var left_body_height = document.getElementById('tb_left_body');
var tr_height = document.getElementById('tb').offsetHeight;
//console.log('body:'+left_body_height);
var total_height = tr_height+28;
left_body_height.style.height = total_height+'px';
//console.log('总高度:'+total_height+';body:'+left_body_height);
if (navigator.onLine) { // 正常工作 有网状态//由于setInterval()每次刷新都重新计时
window.onload = function () {
setInterval(function () {
console.log('今天共计的!');
window.location.href = 'todayAndAll.html';//当天任务
}, 1200 * 1000);
}
setInterval(function () {
console.log('当月的!');
window.location.href = 'unAndHas.html';//当月已完成
}, 1201 * 1000);
}
else {
console.log('网络断开了');
}
//初始化隐藏
$(".dv_fsc").fadeOut();//隐藏收缩
//进入全屏
function requestFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
$(".dv_fsc").fadeIn(500); //显示收缩
$(".dv_fse").fadeOut(10);//隐藏扩展
}
//退出全屏
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
$(".dv_fse").fadeIn(500); //显示扩展
$(".dv_fsc").fadeOut(10);//隐藏收缩
}
</script>
</body>
</html>
自定义的样式 css:
/* 排行榜样式 */
body,img,ul,li,p{margin:0px;padding:0px;border:0px;#font-family:'font_web';}
.dv_tay{max-width:100%;height:100%;padding:15px;background-color: #007aff;}
.dv_tay2{width:100%;height:100%;border:1px solid #339966;border-radius:10px;background-color: #F5FAFE;display:flex}
.dv_tb{max-width:100vw;text-align: center;display: inline-block;}/*块状盒子*/
/*左边内容*/
.dv_tb_left{width:25vw;min-width:250px;margin:0px 8px;#position: relative;left:0px;top:0px;}
.tb_left_lower{height:22px;border-radius:15px 15px 0px 0px;margin-top:10px;background-color: #A7E2E7;}/*上下行条*/
.tb_left_top{height:22px;border-radius:0px 0px 15px 15px;margin-bottom: 10px;background-color: #A7E2E7;}/*上下行条*/
.tb_left_middle{height:445px;border-radius: 8px;background-color: #00cc66;text-align: center;}
.tb_margin{padding: 6px 5px;}
.tb_margin2{padding: 5px 25px;}
.tb_box_img{width:100%;min-width:60px;max-width: 100px;border-radius: 50%;}/*头像*/
.tb_box_trophy{width:100%;min-width:60px;max-width: 100px;}/*奖杯*/
.tb_box{display:inline-block;margin:5px 12px;}
.tb_box_white{color:#FFFFFF;line-height:1.5;}/*白色字体*/
.tb_box_font{font-size:12px;line-height:1.5;margin-bottom: 10px;}
.tb_box_name{font-size:32px;line-height:1.5;}/*姓名*/
.tb_box_fw{font-family:'font_web';font-size:18px;margin-top: 4px;font-weight: 600}
/*右边内容*/
.dv_tb_right{width:75%;margin-top:35px;position:relative;}
.dv_theme{height:28px;display: flex;text-align:left;font-size: 1.2em;line-height: 28px;}/*标题*/
.dv_theme_img{height:25px;margin-right:10px;padding-left: 1.8%;}/*标题图*/
.dv_theme_top{height:23px;}
.dv_tb_rblock{width:96%;}
.dv_tb_scroll{overflow-x: auto;overflow-y: hidden;white-space: nowrap;transition: all 1s;}
.tb_left_img{text-align: center;}
#tb{width:100%;margin:auto;}/*数据表格*/
.tb_tr{max-width:99%;display: flex;border:1px solid rgba(213, 213, 213, .3);margin: 3px 0px;}/*表格行*/
.tb_img{height:34px;position: relative;margin-top: 1px;border-radius:50%;}/*头像*/
.tb_img2{height:25px;position: relative;margin-top: 3px;}/*皇冠*/
.dv_bold{font-weight: bold;font-size:16px;line-height: 18px;font-family:'font_web';}/*数字字体加粗*/
.dv_bold2{font-weight: bold;font-size:12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/*姓名字体加粗,长度过长隐藏*/
.tr_tdimg{width:40px;height:36px;padding:0px 5px;}
.td_position{width:40px;height:36px;margin-right: 1.8%;line-height: 32px;text-align-last:justify; }/*图片文字居左对齐*/
.td_name{position:relative;left:5px;}/*图片靠左的文字垂直居中*/
.tb_zt_font{position: relative;line-height:18px;font-size:8px;-webkit-transform:scale(0.8);-webkit-text-size-adjust:none;font-family:'font_web';font-weight: 600}
.tr_td{width:60px;height:36px;padding:0px 8px;text-align: center;}
/*全屏扩展与收缩按钮*/
.dv_btnfs{width:25px;height: 25px;position: absolute;right:20px;}
.dv_fs{width:25px;height:25px;display:block;}
.dv_fse{background:url('../image/fullScreen/fse1.png') no-repeat center;background-size:cover;}
.dv_fse:hover{background:url('../image/fullScreen/fse2.png') no-repeat center;background-size:cover;}
.dv_fsc{background:url('../image/fullScreen/fsc1.png') no-repeat center;background-size:cover;}
.dv_fsc:hover{background:url('../image/fullScreen/fsc2.png') no-repeat center;background-size:cover;}
@media only screen and (max-width:500px){
.dv_tay{width:100%;padding:0px;background-color: #f9f9f9;}
.dv_tay2{width:100%;display:block;text-align: center}
/*左边内容*/
.dv_tb_left{width:90%;margin:auto;#position: relative;left:0px;top:0px;}
.tb_left_lower{height:30px;border-radius:10px 10px 0px 0px;margin-top:20px;}/*上下行条*/
.tb_left_box{width:100%;}
.tb_left_top{height:30px;border-radius:0px 0px 10px 10px;margin-bottom: 20px;}/*上下行条*/
.tb_box_img{width:80px;}/*头像*/
.tb_box_font{font-size: 16px;line-height:1.5;margin-bottom: 10px;}
.tb_box_name{font-size:24px;line-height:1.5;}/*姓名*/
.tb_box_trophy{width:80px;}/*奖杯*/
.tb_margin{margin: 10px;}
.tb_box{display:inline-block;margin:5px;}
/*右边内容*/
.dv_tb_right{width:95%;;margin:20px 10px;}
#tb{width:auto;margin:0px;}/*数据表格*/
.tb_tr{width:100%;display: flex;}/*表格行*/
.td_position{text-align-last:unset; }
.tr_tdimg{height:30px;padding:0px 5px;}
.dv_tb_scroll{overflow-x: auto;overflow-y: hidden;white-space: nowrap;transition: all 1s;}
.dv_theme{font-size: 16px;}/*标题*/
.dv_theme_img{width:20px;margin-left:10px;}/*标题图*/
.tr_td{width:60px;padding:0px 6px;}
/*全屏扩展与收缩按钮*/
.dv_btnfs{position: absolute;right:5px;bottom: -15px;}
}
@font-face {
font-family: 'font_web';
src: url('../font/webfont.eot'); /* IE9*/
src:
url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/webfont.woff') format('woff'), /* chrome、firefox */
url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
font-weight:normal;
font-style:normal;
}
2、优化后的显示页面
后端返回(另外两个方法类似):
public function godata(){
$meblts = Db::query('SELECT name,avatarUrl,all_task,completed_task,today_task,pass,ng,COUNT(1) FROM comp_members WHERE today_task =(SELECT MAX(today_task) FROM comp_members)'); //查询数据库获取数据
$list = Db::query('SELECT * FROM comp_members ORDER BY completed_task DESC');//查询数据库获取数据
$this->assign("list",$list);//获取对象显示到对应的view
$this->assign('meblts', $meblts);//获取对象显示到对应的view
$text1 = Db::query('SELECT content FROM tb_text where id = 1');//获取文字1
$text1 = current($text1);
$text2 = Db::query('SELECT content FROM tb_text where id = 2');//获取文字2
$text2 = current($text2);
$this->assign("tx1",$text1);//获取对象显示到对应的view
$this->assign("tx2",$text2);//获取对象显示到对应的view
return json(['t1'=>$text1,'t2'=>$text2,'lt1'=>$meblts,'lt2'=>$list]);
}
html 和 JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--<meta http-equiv="refresh" content="1900">--><!--定时刷新页面-->
<title>排行榜</title>
<link rel="icon" type="image/x-icon" href="__PUBLIC__/image/favicon2.ico">
<link rel="stylesheet" href="__PUBLIC__/css/tbrank.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="dv_tay">
<div class="dv_tay2">
<div class="dv_tb dv_tb_left">
<div >
<div class="tb_left_box tb_left_top"></div>
<div id="tb_left_body" class="tb_left_box tb_left_middle">
</div>
<div class="tb_left_box tb_left_lower"></div>
</div>
</div>
<div class="dv_tb dv_tb_right">
<div class="dv_theme">
<img class="dv_theme_img" src="__PUBLIC__/image/prize.png"/>
<b>软硬件工程师绩效荣耀榜</b>
<img class="dv_theme_top" src="__PUBLIC__/image/top10.png"/>
</div>
<div class="dv_tb_rblock dv_tb_scroll">
<table id="tb" >
<tbody id="tbd">
</tbody>
</table>
</div>
<div class="dv_btnfs">
<a class="dv_fs dv_fse" onclick="requestFullScreen();"></a>
<a class="dv_fs dv_fsc" onclick="exitFullscreen();"></a>
</div>
</div>
</div>
</div>
<div id="txt"></div>
<script>
$(document).ready(function(){
init();//初始化执行一次
})
//判断网络是否断开
if (navigator.onLine) { // 正常工作 有网状态//由于setInterval()每次刷新都重新计时
window.onload = function () {
setInterval(function () {
$.ajax({
type: 'post',
url: 'todayAndAll',
success: function (data) {
console.log(data);
},
error: function () {
console.log('AJAX请求失败1!');
}
});
}, 1300 * 1000);
setInterval(function () {
$.ajax({
type: 'post',
url: 'unAndHas',
success: function (data) {
console.log(data);
},
error: function () {
console.log('AJAX请求失败2!');
}
});
}, 1720 * 1000);
setInterval(function () {
init();
}, 1800 * 1000);
}
}else{
console.log('网络断开了');
}
function init() {
$.ajax({
type: 'post',
url: 'godata',
success: function (data) {
console.log(data);
var html = '';//定义左边内容
var right = '';//定义右边内容
html = " <div class='tb_margin2'>\n" +
" <img class='tb_box_img' src= '"+data.lt1[0].avatarUrl +"'/>\n" +
" </div>\n" +
" <div class='tb_margin'>\n" +
" <p class='tb_box_white tb_box_name'><b>"+data.lt1[0].name+"</b></p>\n" +
" <b class='tb_box_white tb_box_font'>今日之星</b>\n" +
" </div>\n" +
" <div class='tb_margin'>\n" +
" <div class='tb_box'>\n" +
" <p class='tb_box_title tb_box_font'>已完成</p>\n" +
" <b class='tb_box_white dv_bold'>"+data.lt1[0].all_task+"</b>\n" +
" </div>\n" +
" <div class='tb_box'>\n" +
" <p class='tb_box_title tb_box_font'>当日完成</p>\n" +
" <b class='tb_box_white dv_bold'>"+data.lt1[0].today_task+"</b>\n" +
" </div>\n" +
" <div class='tb_box'>\n" +
" <p class='tb_box_title tb_box_font'>累计完成</p>\n" +
" <b class='tb_box_white dv_bold'>"+data.lt1[0].all_task+"</b>\n" +
" </div>\n" +
" </div>\n" +
" <div class='tb_margin2'>\n" +
" <img class='tb_box_trophy' src='__PUBLIC__/image/trophy.png' />\n" +
" </div>\n" +
" <div class='tb_margin2'>\n" +
" <p class='tb_box_white tb_box_fw '>"+data.t1.content+"</p>\n" +
" <p class='tb_box_white tb_box_fw '>"+data.t2.content+"</p>\n" +
" </div>";
//循环
for(var i= 0;i < 10 ;i++){right += "<tr class='tb_tr'>\n" +
" <td style='display: none'>data.lt2[i]._id</td>\n" +
" <td class='tr_tdimg'><img class='tb_img' src="+data.lt2[i].avatarUrl+" /></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>共计任务</span><p class='dv_bold'>"+data.lt2[i].all_task+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>未完成</span><p class='dv_bold'>"+data.lt2[i].unfinished_task+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>已完成</span><p class='dv_bold'>"+data.lt2[i].completed_task+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>当日完成</span><p class='dv_bold'>"+data.lt2[i].today_task+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>累计PASS</span><p class='dv_bold'>"+data.lt2[i].pass+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>累计NG</span><p class='dv_bold'>"+data.lt2[i].ng+"</p></td>\n" +
" <td class='tr_td'><span class='tb_zt_font'>月度排名</span><p class='dv_bold dv_lis"+i+"'>"+(i+1)+"</p></td>\n" +
" </tr>";
}
$('#tb_left_body').html(html); //显示左边内容
$('#tbd').after(right); //显示右边内容
var ls = $('.dv_lis0').text();
if(ls == 1){
$('.dv_lis0').parent().after("<td class='tr_td tb_left_img'><img class='tb_img2' src='__PUBLIC__/image/crown.png'/></td>");
}
var ls2 = $('.dv_lis1').text();
if(ls2 == 2){
$('.dv_lis1').parent().after("<td class='tr_td tb_left_img'><img class='tb_img2' src='__PUBLIC__/image/crown.png'/></td>");
}
},
error: function () {
console.log('数据请求失败!');
}
});
}
//初始化隐藏
$(".dv_fsc").fadeOut();//隐藏收缩
//进入全屏
function requestFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
$(".dv_fsc").fadeIn(500); //显示收缩
$(".dv_fse").fadeOut(10);//隐藏扩展
}
//退出全屏
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
$(".dv_fse").fadeIn(500); //显示扩展
$(".dv_fsc").fadeOut(10);//隐藏收缩
}
</script>
</body>
</html>
样式CSS不变;
效果图:
最后
优化成功:局部刷新很不错,局部数据的刷新不仅优化页面的性能,也优化数据请求的资源!真的,可能用到是时候才觉得,之前我们都知道有ajax异步请求这个东西,有的地方也用了,但考虑不到很多种情况,可能是忽略吧!总的来说,经验是不断积累的,不是凭空产生的,多学多练才是硬道理!