seo高级操作：如何代码优化减少白屏时间，提高用户体验

　　白屏时间，用户从打开页面开始到页面开始有东西呈现为止，这过程中占用的时间就是白屏时间！

　　对于seo从业者来说，减少白屏停留时间，提升用户体验，是做好网站非常重要的一步，有时候在网络不好的情况下，页面在加载的过程中出现了很久的白屏现象，很多用户对白屏来说是很反感的，当白屏停留2到3秒钟后，退出该网页的概率大大的提高，但是处理白屏的时间，需要seo从业人员懂一些前端的知识，才能对整个网站的代码进行优化，减少白屏时间，现在小编介绍两种方法处理白屏时间，仅供参考，不一定是最佳答案！

　　方法一：

　　做一个简单的加载动画页面（a.html），当页面加载完成后，用js来动态加载，正文内容的页面（b.html）,此时要做一个复杂的步骤！就是判断CSS与JS是否加载完成，如果css或者js加载没有完成，就显示页面，该页面就会全乱，特别是一些复杂的页面，需要用js来计算或获取宽高比例时，就更甚。所以这个方法不推荐使用，因为我觉得相对比较复杂，js代码又写多了.....

　　方法二：（这个方法我觉得相对比较好用可行）

　　1、首先我们先做一个要显示正文内容的页面(b.html)，代码如下：

　　要显示的内容//这里省略1万行代码....

　　2、做好后，我们来做一下那个动态加载的页面(a.html)：

　　3、此时就把这两个页面进行合并(c.html)，代码如下：

　　//图片小于10KB尽量用base64减少http请求，提升体验

　　//正文内容的css文件

　　//加载正文seaJS文件与正文的JS文件

　　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从业者，代码前端的知识你是必须知道的，如果你所处的团队都是分工协作，你可以直接交给程序开发去完成，他们或许有更好的方法减少白屏时间，如果有更好的方法，欢迎一起交流！