seo高级操作：如何代码优化减少白屏时间，提高用户体验
#starAnimate{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
}
#starAnimate.center{
position:absolute;
top:50%;
left:50%;
width:20%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
#starAnimate.centerimg{
animation:animateRun500mslinearinfinitealternate;
-webkit-animation:animateRun500mslinearinfinitealternate;
}
@keyframesanimateRun
{
0%{
transform:translate3d(0,-10px,0);
}
100%{
transform:translate3d(0,10px,0);
}
}
@-webkit-keyframesanimateRun
{
0%{
transform:translate3d(0,-10px,0);
}
100%{
transform:translate3d(0,10px,0);
}
}
白屏时间，用户从打开页面开始到页面开始有东西呈现为止，这过程中占用的时间就是白屏时间！
对于seo从业者来说，减少白屏停留时间，提升用户体验，是做好网站非常重要的一步，有时候在网络不好的情况下，页面在加载的过程中出现了很久的白屏现象，很多用户对白屏来说是很反感的，当白屏停留2到3秒钟后，退出该网页的概率大大的提高，但是处理白屏的时间，需要seo从业人员懂一些前端的知识，才能对整个网站的代码进行优化，减少白屏时间，现在小编介绍两种方法处理白屏时间，仅供参考，不一定是最佳答案！
方法一：
做一个简单的加载动画页面（a.html），当页面加载完成后，用js来动态加载，正文内容的页面（b.html）,此时要做一个复杂的步骤！就是判断CSS与JS是否加载完成，如果css或者js加载没有完成，就显示页面，该页面就会全乱，特别是一些复杂的页面，需要用js来计算或获取宽高比例时，就更甚。所以这个方法不推荐使用，因为我觉得相对比较复杂，js代码又写多了.....
方法二：（这个方法我觉得相对比较好用可行）
1、首先我们先做一个要显示正文内容的页面(b.html)，代码如下：
/common/css/common_v2.css"rel="stylesheet"/>//这里公共的css文件 [xss_clean][xss_clean]
要显示的内容//这里省略1万行代码....
[xss_clean]
seajs.use(__uri(''))
[xss_clean]
2、做好后，我们来做一下那个动态加载的页面(a.html)：
/common/css/common_v2.css"rel="stylesheet"/>//这里公共的css文件 //这里动画效果的css #starAnimate{ position:absolute; top:0; left:0; width:100%; height:100%; background:#ffffff; } #starAnimate.center{ position:absolute; top:50%; left:50%; width:20%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); } #starAnimate.centerimg{ animation:animateRun500mslinearinfinitealternate; -webkit-animation:animateRun500mslinearinfinitealternate; } @keyframesanimateRun { 0%{ transform:translate3d(0,-10px,0); } 100%{ transform:translate3d(0,10px,0); } } @-webkit-keyframesanimateRun { 0%{ transform:translate3d(0,-10px,0); } 100%{ transform:translate3d(0,10px,0); } } `
3、此时就把这两个页面进行合并(c.html)，代码如下：
/common/css/common_v2.css"rel="stylesheet"/>//这里公共的css文件 //这里动画效果的css #starAnimate{ position:absolute; top:0; left:0; width:100%; height:100%; background:#ffffff; } #starAnimate.center{ position:absolute; top:50%; left:50%; width:20%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); } #starAnimate.centerimg{ animation:animateRun500mslinearinfinitealternate; -webkit-animation:animateRun500mslinearinfinitealternate; } @keyframesanimateRun { 0%{ transform:translate3d(0,-10px,0); } 100%{ transform:translate3d(0,10px,0); } } @-webkit-keyframesanimateRun { 0%{ transform:translate3d(0,-10px,0); } 100%{ transform:translate3d(0,10px,0); } }
[xss_clean][xss_clean]//加载正文seaJS文件与正文的JS文件
[xss_clean]
seajs.use(__uri(''))
[xss_clean]
4、在根目录下添加一个文件夹（contentHtml），里面新建一个txt文本（main.txt）,把b.html中的div的id为main的html内容添加到main.txt的文本中，在c.html中的index.js直行异步加载，代码如下：
var$=require('zepto');
......省略1W行代码
$(function(){
varobj={
url:'',
cache:true,
data:{},
success:function(result){
//替换页面为正文内容，这里可以适当做一些动画，来消除加载页面
$('body').html(result);
//执行正文内容页面的JS代码
initialize();
}
};
$.ajax(obj);
});
上面的几个步骤的思想是：以最少的代码量，下载该页面，并且没有代码阻塞的情况下先给用户看到动画，在动画与用户交互的过程中进行加载正文内容所需要的css与JS文件，一但加载完毕就立刻把动画替换为正文内容，显示给用户看，大大减少用户退出该页面机率。
5、优化
建议动画可以是一个加载条，把需要的图片进行预先加载，就是先不要把正文页面显示给用户看，用js获取页面的图片元素，用complete、onload来判断图片是否加载完成（记得用onerror，来做加载失败的异常处理），完成后进度条显示增加进度，最后加载完成为100%时，就把页面完整的显示给用户看，这样就保证用户能正常查看了！
最后：作为一个高级的seo从业者，代码前端的知识你是必须知道的，如果你所处的团队都是分工协作，你可以直接交给程序开发去完成，他们或许有更好的方法减少白屏时间，如果有更好的方法，欢迎一起交流！