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

一、页面之所以能渲染

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继续渲染，http去请求，JS请求回来也不会执行，而是等待GUI主线程渲染完，在DOMContentLoaded事件之前，再按照之前引入的script顺序，依次执行；
但async是：GUI继续，http继续，当js请求回来后，立即执行Js(GUI)暂停，JS执行完GUI继续，加async的的js没有顺序，谁先回来谁执行
6.3当代浏览器都有一个预处理机制html-preload-scanner，在GUI渲染前就把“src” , “link”等属性中需要请求的资源进行发送，找到外部链接资源后进行预加载，避免了资源加载的等待时间，同样实现了提前加载以及加载和执行分离。

四、浏览器的渲染队列

// 这样会触发两次，一旦遇到获取样式的代码，需要先把之前队列中的样式进行渲染
 box.style.width = '200px';
console.log(box.offsetWidth);
box.style.height = '200px';

减少上述回流重绘的方法

// 1、分离“读写“
box.style.width = '200px';
box.style.height = '200px';
console.log(box.offsetWidth);

2、使用文档碎片
 let frg = document.createDocumentFragment();
 for (let i = 0; i < 10; i++) {
	  let span = document.createElement('span');
	  span.innerHTML = i;
			frg.appendChild(span);
       }
document.body.appendChild(frg); *
3、放弃传统操作dom的时代，基于vue/react开始数据影响视图模式
4、动画效果应用position属性为absolate或fixed的元素上（脱离文档流）
5、使用CSS3动画+transform
6、牺牲平滑度换取速度
7、避免table布局和使用css的javascript表达式
``

点击一个div让这个div从立即移到左边，再往右缓慢移动