关于cpu-fe-xx存在页面加载闪烁的问题

@songhlc 2018-03-28 06:36:45发表于 yonyouyc/blog

页面加载闪烁的问题

先不废话,直接来看效果
Image text
Image text

上图的是新增合同页面初次加载的例子

第一张图是加载前200ms的效果,很明显在加载的前200ms会有卡顿的视觉感。

我们把卡顿拆解一下。
1.容器占位
2.有些按钮是动态显示的,会先显示,然后再消失
3.控件错位
4.高级查询的内容先显示后隐藏

问题分析

通常这些问题都有由于css加载有延时导致了,所以原则一,把所有css放到顶部,应该就能解决这个问题。

然后看代码发现现有容器的一些css(除了公共的u.css,u.core.css),全都在style标签里

<style>
...
.navsrcollwrap .navsrcoll .navsrcoll-body {
    font-size: 14px;
    margin: 0 auto;
    padding-bottom: 0!important;
    display: table;
}
...
</style>

再看一眼打包后的html页面,完全没有style标签,空空如也。

所以很明显这些style是webpack打包以后通过js动态加载出来的。

找到问题

由于浏览器先渲染的头部的公共css和body里的内容,这时候js没有加载完,style标签没有动态引入,所以造成了页面加载闪烁。

解决问题的原因

根治方式:需要在webpack打包时把页面的less文件和css文件抽出成公共的css,然后通过link标签引入,就能解决问题。

临时解决方案:在不改变现有代码的基础上找到公共的css(负责布局、容器、基本浮动排版类的),放到原来优先加载的u.css之中,如:

/*通用*/
* {
    box-sizing: border-box;
}
body {
    font-size: 13px;
    font-family: tahoma,arial,"Hiragino Sans GB", "Microsoft YaHei","\5B8B\4F53" !important;
    background-color: #eeeff1!important;
}
/*容器边距*/
.u-widget-bg {
    padding: 0px 25px 15px 25px;
}
.u-widget{
    margin: 0;
}
/*导航部分*/
.nav {
    margin: 10px 0;
    font-size: 12px;
}
.nav .nav-title {
    display: inline-block;
    color: #0377C1;
}
.nav-header {
    height: 34px;
    padding: 10px 20px 10px;
    border: none;
    margin-bottom: 10px;
    background-color: #FFF;
    position: relative;
}
.nav-header .nav-title {
    line-height: 34px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    display: inline-block;
}
/*二级容器*/
.ibox-content {
    border: none;
    margin-bottom: 10px;
    padding: 15px 20px 20px 20px;
    background: #fff;
    margin-top: 9px;
}
.ibox-content .ibox-content-title {
    display: inline-block;
    border-left: 4px solid #F15A4A;
    padding-left: 10px;
    line-height: 16px;
    height: 16px;
    font-weight: normal;
    color: #333;
}
.ibox-content .ibox-tabs {
    padding-left: 0;
    height: 40px;
}
.ibox-content .ibox-tabs li {
    float: left;
    margin-right: 20px;
    cursor: pointer;
}
.ibox-content .ibox-tabs li.active {
    padding-bottom: 10px;
    border-bottom: 3px solid #F15A4A!important;
    background: 0;
}
/*通用fix样式*/
ul, ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-content {
    width: 200px;
    padding: 0px;
}
.input-group-btn {
    position: absolute;
    right: 5px;
    bottom: 1px;
    height: 30px;
    display: block;
    width: 30px;
    overflow: hidden;
    color: #999999;
    z-index: 10;
}
.advance-query-btn {
    padding-left: 10px;
    line-height: 35px;
    cursor: pointer;
}
.nav a {
    text-decoration: none;
}
.input_search {
    height: 32px;
    padding-right: 34px;
}
.bg-white {
    background: white;
}
.navsrcollwrap{
    padding: 0px 20px;
    border: none;
}
.navsrcollwrap .navsrcoll {
    position: relative;
}
.navsrcollwrap .navsrcoll .navsrcoll-left {
    line-height: 53px;
    font-size: 18px;
    position: absolute;
}
.navsrcollwrap .navsrcoll .navsrcoll-body {
    font-size: 14px;
    margin: 0 auto;
    padding-bottom: 0!important;
    display: table;
}
.navsrcollwrap .navsrcoll .navsrcoll-right {
    position: absolute;
    top: 12px;
    right: 10px;
}
.navsrcollwrap .navsrcoll .navsrcoll-body .navsrcoll-title{
    display: inline-block;
    margin: 0 20px;
    text-align: center;
    color: black;
    text-decoration: none;
}
.navsrcollwrap .navsrcoll .navsrcoll-body .navsrcoll-title.active {
    border-bottom: 4px solid #fe5629;
    padding-bottom: 10px;
    background: #fff;
}
.nav-header .nav-query {
    display: inline-block;
    position: absolute;
    right: 15px;
}
/*通用边距*/
.padd20 {
    padding: 15px 20px 20px 20px;
}
.pull-right{
    float: right
}
.pull-left{
    float: left
}
.hidden{
    display:none;
}
/*标题颜色*/
.font-style-weight {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

还有动态显示隐藏的内容

上面提到的有一部分按钮是动态显示隐藏的。
需要如下方式处理:

//错误的方式,当ko还没有加载的时候 button内容会先显示出来,然后if标签起作用然后再隐藏掉或任然显示
<!-- ko if:condition-->
<button 
    type="button" 
    class="y-button" data-bind="click:xg">
    修改
</button>
<!-- /ko -->
//正确的方式,默认设置display:none 或者 添加class:hidden
<button 
    type="button" 
    class="y-button"
    style="display:none"
    data-bind="click:xg,if:condition">
    修改
</button>

这样加载的时候就不会有闪烁的感觉了。
同样的还有
1.y-modal内部的div,需要添加visible绑定和y-modal一样
2.高级查询区域,默认先隐藏起来
3.其他所有需要修改的部分