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

一、页面之所以能渲染

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别用@i