vue首页白屏优化

一、原因：

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

二、解决办法：

1. 优化webpack减少模块打包体积，code-split按需加载
2. 服务端渲染，在服务端事先拼装好首页所需的html
3. 缓存一定要使用，但是请注意合理使用
4. 代码压缩，服务端压缩，浏览器端解压缩
5. 首页加loading或骨架屏（仅仅是优化体验）

三、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后， 然后显示出网页。

四、什么是骨架屏

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

vue骨架屏实践：vue骨架屏实践 - 简书

骨架屏那些事儿：骨架屏安装使用