一、原因：

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏

二、解决办法：

（1）优化 webpack 减少模块打包体积，code-split 按需加载

（2）服务端渲染，在服务端事先拼装好首页所需的 html

（3）首页加 loading 或 骨架屏 （仅仅是优化体验）

（4）缓存一定要使用，但是请注意合理使用

（5）代码压缩，服务端压缩，浏览器端解压缩

三、HTTP压缩的过程

1. 浏览器发送Http request 给Web服务器,  request 中有Accept-Encoding: gzip, deflate。 (告诉服务器， 浏览器支持gzip压缩)·

2. Web服务器接到request后， 生成原始的Response, 其中有原始的Content-Type和Content-Length。

3. Web服务器通过Gzip，来对Response进行编码， 编码后header中有Content-Type和Content-Length(压缩后的大小)， 并且增加了Content-Encoding:gzip.  然后把Response发送给浏览器。

4. 浏览器接到Response后，根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后， 然后显示出网页。

四、什么是骨架屏

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

五、如何实现骨架屏

https://www.jianshu.com/p/eacac700630e

https://segmentfault.com/a/1190000020124630?utm_source=tag-newest