前端首屏（白屏）优化

从输入URL到页面加载完成，过程：

网络通信部分：

1. 浏览器输入URL

2. （应用层）DNS解析域名

3. （应用层）生成HTTP请求报文

4. （传输层）建立TCP连接

5. 使用IP协议选择传输路线

6. （数据链路层）保证数据的可靠传输

7. 服务器接收数据

8. 服务器响应请求

9. 服务器返回响应文件

浏览器渲染部分：

1. 解析HTML源代码，构建DOM树；
2. 解析CSS代码，构建CSSDOM树
3. 将DOM和CSSDOM合并为一个渲染树  （渲染树只会包括需要显示的节点，以及这些节点的样式信息，display：none不会显示）
4. 根据渲染树进行布局和绘制

白屏原因：网络环境差、JS加载延迟 ,会阻塞页面

性能优化：

网络通信部分：加载更快

1.减少访问次数：资源打包，合并请求多使用缓存，减少网络传输使用keep-alive建立持久连接使用HTTP2的多路复用技术SSR服务器端渲染

2.减少资源体积：压缩代码，代码分割，按需加载                                                                   

对于分割的代码我们可以进行按需加载，最常用的就是ES6中的import()方法，
在Vue项目中，我们经常用到的就是路由的按需加载。

3.使用更快的网络：CDN

浏览器渲染部分：渲染更快

1. 减少DOM树渲染的时间（HTML层级不要太深，标签语义化…)

2. CSS放在head

   提前请求资源 用link别用@import，对于移动端来说，如果css样式比较少，尽可能采用内嵌式即可
   

3. JS会阻碍GUI的渲染，JS放在body中（defer、async）

   defer：遇到script，GUI继续渲染，http去请求，JS请求回来也不会执行，而是等待GUI主线程渲染完
   在DOMContentLoaded事件之前，再按照之前引入的script顺序，依次执行；
   async：遇到script，GUI继续渲染，http去请求，JS请求回来立刻执行，会打断GUI主线程渲染，先回
   来的先执行。
   

4. 使用骨架屏

   骨架屏就是指在未加载完时，先简单的用图形勾勒出页面的大概布局，给用户一个视觉上更好一点的
   体验，等页面加载完成之后，再将骨架屏替换掉即可
   

5. 尽早执行JS，用DOMContentLoaded触发

6. 懒加载（图片懒加载，上滑加载更多）

7. DOM部分：对DOM查询进行缓存，频繁的DOM操作合并到一起再插入DOM结构（减少回流重绘）

8. 节流throttle、防抖debounce