概括
随着vue，react等前端框架的出现，单页面应用也随着流行起来。越来越多的项目都会使用vue，react等框架来实现单页面应用。单页面应用最大优点就是无刷新交互，提高了用户的体验度。但是单页面应用的缺点也是非常明显的，那就是SEO不友好，首页白屏时间过长。下面我要说的就是解决单页面应用首页白屏时间过长和SEO不友好的问题的一些技术的优缺点和原理。
首页白屏时间过长的原因
单页面应用只有一个html，而页面里面的内容是需要依靠js来生成，这带来的一个问题就是当用户需要去访问该页面的时候，服务器返回来的是一个只有html骨架，没有实际内容的html。当浏览器解析服务器返回来的html时，遇见你需要引入的js的时候就会单独发送请求去服务器上获取，获取得到js后就会解析执行，并生成页面所需要的html并插入到指定的节点。在获取js到执行js再到生成页面所需要的hmtl的这段时间里，服务器返回来的html是一直没有内容的，导致浏览器一直显示的是白屏。所以，导致单页面首页白屏时间过长的原因主要有3个。一是网络的问题，在网络不好的情况下，获取文件的时间也对应这变长。二是文件大小的问题，项目越大型，文件的体积就越大，下载时间就越长。三是电脑本身的问题，性能越高的电脑，解析执行js的速度就越快，反之则慢。前面2个问题（网络问题和文件大小问题）主要是涉及到了前端性能优化的问题，主要是合并请求，减少请求和文件的打包压缩等优化，关于前端性能优化这部分内容我在这里就不在多讲了，过一段时间我会单独出一篇文章讲前端性能优化的问题，有兴趣的读者可以留意一下。而电脑的问题更不用多说了，每个人的电脑都不一样，性能也不一样。这三个问题都是一些不可抗因素，我们无法从这三个方面入手解决，所以要解决白屏时间过长的问题我们还是要从根源上解决，那就是服务器返回来的html只有html骨架，并没有什么实际内容可以显示在浏览器中，我们需要做的就是往html中填充内容，让浏览器在发送请求获取js等文件再到解析js生成页面所需要的html这段时间里有内容可以显示在浏览器中。
SEO不友好的原因
在上面提到了服务器返回的是一个只有html骨架，没有实际内容的html，而搜索引擎只会爬取页面的dom元素，文本信息等等，并不会去爬区js的内容，而页面的meta标签的内容也不易过多，不然搜索引擎会认为你在作弊，而且单页面不同的路由页面所需要显示meta标签内容也不一样，所以你不可能把meta写死，需要根据不同的路由页面在后台动态生成meta标签的内容。所以在没有dom元素和文本元素的情况下，搜索引擎计算该页面的权重会相对比较低，排名会靠后，用户搜索不到对应的页面。
首先讲一下ssr服务端渲染这种技术。ssr是vue，react等框架解决首页白屏时间过长常用的方案还有就是解决SEO不友好的问题。其原理就是让vue，react在服务器上跑，再根据请求的路径匹配不同的路由，渲染出对应的html字符串返回给前端。其实说白了就是有点类似java的jsp，node的模板引擎ejs等等，jsp，ejs其实也是服务器渲染来的，他们都是把数据在服务器端填充好返回给前端。但这带来的问题就是后台和人员的问题。首先是后台的问题，ssr一般都是使用node，很少会使用非node的语言来写，而且非node的语言实现起来难度大，而且业界到现在还没有很好的解决方案。使用node来实现ssr主要是node这门语言的基础就是基于js的，对js的亲和度高，实现起来比较简单。但是，现在很少公司或者项目会使用node做后台，主要还是因为node是单线程的问题，一旦某个环节出问题了，就会导致整个后台崩掉。一般node是用来做中间层的，只负责ssr和代理转发，不负责任何业务代码和逻辑。这意味着服务器的开销就变大了。所以单页面应用的ssr一般只是首屏做ssr，并不会所有页面都是用ssr，毕竟这是得不偿失的。其次就是人员问题，一般要使用ssr都是由前端工程师来编写node的后端代码，毕竟前端工程师对js比较熟悉，毕竟很少非node后台工程师会精通node的，当然，像bat这种公司的工程师例外。所以会使用node做ssr的前端工程师一般都是高级前端工程师，所以这意味着招一名高级前端工程师又是一笔开销。所以，ssr这种高端大气上档次的玩意，一般很少小公司会使用到，一般都是大公司使用的，毕竟大公司有的是钱，人才和技术！
预渲染技术
预渲染主要是用来解决SEO不友好的问题，但是对于一些静态页面，或者数据变动不大页面，比如登录页面，注册页面等等，也是可以解决首页白屏时间过长的问题。预渲染这种技术主要的是使用了爬虫技术，比如prerender-spa-plugin这个vue的预渲染插件，在打包的过程中，会用chrome浏览器打开所需要进行预渲染的页面，等待数据获取并渲染出来，然后利用爬虫，把页面的内容爬下来，在读写进文件里面，生成预渲染文件。然后后台利用nginx服务器进行代理转发，如果检测到是搜索引擎爬虫就返回生成的预渲染文件，如果是普通用户就返回正常html文件，这样就可以达到SEO的效果。如果普通用户访问的是一些静态页面或者数据变动不大的页面，我们也可以直接返回生成的预渲染文件，这样既可以解决首页白屏时间过长的问题，又不影响用户的正常浏览和使用，但是这种方法解决首页白屏时间过长的问题有一点需要注意的是当js下载下来后并正常执行，这时候你可能会看见有短暂的闪烁，那是因为js会再次生成该页面的内容并覆盖掉预渲染生成的文件的内容，这样会造成内容从有到无再到有。所以我们需要在预渲染生成的html的根容器上
骨架屏技术
骨架屏技术主要是解决首页白屏时间过长的问题，对于SEO并不是很友好。骨架屏有点类似于手机app那些启动图，当数据还没有准备好的时候，显示的是骨架屏的东西，当数据准备好了之后就干掉骨架屏的内容，显示对应的数据。常见的骨架屏主要有图片背景图，css loading动画，还有就是占位块。首先这里的图片背景图需要注意的是需要以base64的格式引入使用，如果使用链接的形式引入，html获取回来后又要发送请求去获取图片，这无疑是增加了首页白屏时间，而且图片的体积不能太大，不然会导致html文件体积变大，下载时间变长，这也是不可取的。所以这种图片背景图很少会使用在网页app中，大多数是使用在手机app中。然后就是css loading 动画，这种做法见得少，一般都是直接来个全屏半透明遮罩层，在上面加个css loading动画，这种做法就是提示用户正在获取数据。最后就是占位块，占位块就是根据不同页面的内容使用div进行占位，让用户看到占位块就知道页面大概会有什么内容，比如顶部有个500200的轮播图，我们就在顶部放置一个背景颜色是灰色，500200的div。其他的页面组件也是如此，这样就组成我们的占位块了。饿了么外卖就是采用这种占位块的做法。骨架屏的原理主要是根据浏览器的地址来显示对应地址的页面的占位块，隐藏其他页面的占位块。骨架屏技术是解决单页面首页白屏时间过长最有效的办法，成本低，实现起来容易。
总结
对于不同的项目要解决单页面应用的首页白屏时间过长或者SEO不友好的问题采用的方法技术不一样，这需要根据公司和项目的实际情况来选择。如果只针对SEO，那么预渲染就是最好的选择。如果只针对首页白屏时间过长，那么骨架屏是最好的选择。如果要针对SEO和首页白屏时间过长，那么ssr服务端渲染是最好的选择或者骨架屏和预渲染两者相结合。而最近公司的项目就是采用了预渲染和骨架屏技术相结合来解决首页白屏时间过长和SEO不友好的问题