# 项目

# 首屏白屏处理

作者：william_li21790

1、ssr

想到白屏问题，首先想到的解决方案一般都是服务端渲染，在服务端将渲染逻辑处理好，然后将处理好的HTML直接返回给前端展示，这样就可以解决白屏的问题，也可以解决seo的问题，因为不需要动态获取数据了，但是，这和我早期的写后端时的开发模式很像，前端和后端关联在了一起，不利于维护，同时，对于前端工程师来说，要求变高来，需要了解一定的后端知识，虽然有类似Nuxt.js这类的SSR框架帮我们简化了服务端的部分，但是在要做定制或是解决bug时还是无法避免要对服务端部分进行调试、维护，成本颇高，还有需要考虑的服务端渲染会增加服务器压力，要处理并发、运行速度问题等等

2、预渲染

这个方案是相对简单直接的一个解决办法，尝试成本也比较低，这里介绍如何用prerender-spa-plugin做预渲染，这样就可以在浏览器进行渲染，而不需要将Vue或者React代码部署到服务器上，以vue-cli3的官方demo为例做配置，看具体的配置文件：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
  configureWebpack: config => {
    let plugins = []
    plugins.push(new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, 'dist'),
      routes: ['/', '/about'],
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        decodeEntities: true,
        keepClosingSlash: true,
        sortAttributes: true
      },
      renderer: new Renderer({
        renderAfterDocumentEvent: 'custom-render-trigger'
      })
    }))
    config.plugins = [
      ...config.plugins,
      ...plugins
    ]
  }
}

上面代码是常用prerender-spa-plugin的配置，staticDir预渲染输出的文件地址，routes要做预渲染的路由，minify压缩相关的配置，renderer渲染引擎相关的配置，可以传入自定以的渲染引擎或者直接使用默认的PuppeteerRenderer，renderAfterDocumentEvent是渲染引擎配置中的一个属性，指当某个事件触发时才执行预渲染，这里 有关于渲染引擎的完整属性介绍，这很重要，尤其是对一些特定场景的下的需求，当然简单场景下完全可以不配置renderer渲染引擎选项，直接用默认选项。

以往在没有使用预渲染插件时app节点里面是空的没有内容，从加载index.html文件开始到js文件解析完成之前，由于app节点里面是空的，因此页面会处于白屏状态，但是预渲染插件在编译阶段就将对应的路由编译好插入到app节点，这样就能在js文件解析过程中有内容展示，js解析完成后，Vue会将app节点内的内容替换成Vue渲染好的内容，来看看chrome调试下渲染有什么区别：

常规渲染：

预渲染：

利用chrome浏览器的加载截屏功能可以看出常规渲染时会有明显的白屏时间，而预渲染则不会产生白屏， 那么预渲染有什么缺点呢？

• 动态数据无法展示，不同的用户看到的都是同样的页面
• 路由很多时，代码构建时间太长
• 用户容易误操作，由于预渲染时js还没有加载，因此展示出来的内容没有js的交互逻辑，比如按钮点击，在js加载完成之前用户点击是没有反应的
• 预加载内容很少，当页面有内容是依赖动态数据加载时，在编译时是无法加载出动态数据的，因此会导致这部分内容编译不出来

3、骨架屏

骨架屏的实现原理和预加载类似，都是利用了Puppeteer爬取页面的功能，Puppeteer是chrome出的一个headlessChromenode库，提供了API可以抓取SPA并生成预渲染内容，和预加载不太一样的是骨架屏技术会在Puppeteer生成内容后，利用算法将生成的内容进行替换，生成骨架页面，page-skeleton-webpack-plugin是一个用来生成骨架屏的webpack插件