html 页面的同步与异步（ajax）
同步加载（刷新）：每次刷新的是整个页面的数据
异步加载（刷新）：每次刷新的是整个页面的部分数据
由于之前做公司内部的小项目的一个显示的页面，用到定时加载页面数据的变化 ，每隔多少时间刷新一次数据反馈到页面；所以前端方面就随意写了，做了一个简单的小后台操作，然后把后端接口和数据逻辑写完，就接连前后端测试无误后，部署了 》》》
我的小麻烦来了，由于我的显示页面的数据数据请求都是直接加载该接口，然后重定向（同步加载）回显示页面，这就造成了很多小问题了：
（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语言）（数据可以造个假的测试）
排行榜
{volist name="meblts" id="m" length='1'}
{$m.name}
今日之星
已完成
{$m.completed_task}
当日完成
{$m.today_task}
累计完成
{$m.all_task}
{$tx1.content}
{$tx2.content}
{/volist}
软硬件工程师绩效荣耀榜
自定义的样式 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：
排行榜
样式CSS不变；
效果图：
最后
优化成功：局部刷新很不错，局部数据的刷新不仅优化页面的性能，也优化数据请求的资源！真的，可能用到是时候才觉得，之前我们都知道有ajax异步请求这个东西，有的地方也用了，但考虑不到很多种情况，可能是忽略吧！总的来说，经验是不断积累的，不是凭空产生的，多学多练才是硬道理！