前端性能优化及首页白屏解决方案

一、页面之所以能渲染

1、从服务器获取需要渲染的内容
从服务器获取的是文件流（进制编码的内容）
2、浏览器基于自己的渲染引擎（例如：webkit、gecko、trident、blink）开始自上而下加载渲染的代码

二、页面渲染步骤:

1、在CSS资源还没有请求回来之前，先生成DOM树（DOM的层级关系/节点关系）
2、当所有的CSS请求回来之后，浏览器按照CSS的导入顺序，依次进行渲染，最后生成CSSOM树
3、把DOM树和CSSOM树结合在一起，生成有样式，有结构的Render TREE渲染树
4、浏览器按照渲染树，在页面中进行渲染和解析
步骤1）计算元素在设备视口中的大小和位置（布局layout或者重排/回流）
步骤2)根据渲染树一级回流得到的几何信息，得到节点的绝对像素 =》 绘制/重绘（painting）

三、CRP性能优化

1、白屏问题: 从服务器请求HTML，请求CSS资源，然后渲染，减少第一次渲染的时间，包括后续打开时间，这些优化就是项目性能优化
1）减少DOM树渲染的时间（HTML层级不要太深，标签语义化…)
2)减少CSSOM树渲染时间（选择器是从右向左解析，所以尽可能减少层级），less和sass中的层级嵌套虽然还用，但是是一个大坑
3)、减少HTTP请求次数和请求大小
4)、一般会把CSS放在页面的开始位置（提前请求资源 用link别用@import，对于移动端来说，如果css样式比较少，尽可能采用内嵌式即可）
5）、为了避免白屏，可以进来第一件事，快速生成一套loading的渲染树（前端骨架屏），服务器的SSR骨架屏所提高的渲染就是避免了客户端再次单独请求数据，而不是样式
6)JS会阻碍GUI的渲染，先把JS去请求(Http线程)，再把请求回来的执行，只有JS执行完，再去GUI渲染
6.1JS一般放在页面的尾部，就是为了确保DOM树生产完才会加载JS
6.2尽可能使用defer或者async，defer是遇到script，GUI继续