vue导致页面加载白屏时间长的原因有哪些，怎么优化

写在前面：vue是单页面应用，默认index.html里只要一个空的div。需要将所有的资源都下载到浏览器端进行解析。当网速较差时会出现一定程度的白屏。

什么是白屏时间

白屏时间是指用户输入内容回车到浏览器开始出现第一个字符,也就是说(页面)开始显示内容的时间。

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率

用户输入URL回车后到页面加载完成中间经历了什么

简要流程

1、首先，在浏览器地址栏中输入url。

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接显示页面内容；若没有，就需要向后台发送请求。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。（一个IP可以对应多个域名，一个域名只能对应一个IP）

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器。

7、浏览器收到HTTP响应，读取页面内容，开始进行渲染。

查找缓存

浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
ISP缓存：若上述均失败，继续向ISP搜索。

渲染机制

接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树。
将CSS解析成CSSOM树（CSS Rule Tree）
结合DOM树和CSSOM树，来构建Render Tree（渲染树）,注意渲染树，并不等于DOM树，因为一些像head或display:none的东西，就没有必要放在渲染树中了。
有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义，以及它们的从属关系，下一步操作就是Layout,顾名思义，就是计算出每个节点在屏幕中的位置。
Layout后，浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步painting,按照算出来的规则，通过显卡，把内容画到屏幕上

注意：

当我们浏览器获得HTML文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
加载说的就是获取资源文件的过程，如果在加载过程中遇到外部CSS文件和图片，浏览器会另外发送一个请求，去获取CSS文件和相应的图片，这个请求是异步的，并不会影响HTML文件的加载。
但是如果遇到Javascript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。

为什么HTML需要等待JavaScript呢？

因为JavaScript可能会修改DOM，导致后续HTML资源白白加载，所以HTML必须等待JavaScript文件加载完毕后，再继续渲染，这也就是为什么JavaScript文件在写在底部body标签前的原因。

Reflow 和Repaint的区别：

Repaint ——改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
Reflow ——元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化
比如display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。