页面渲染：
1.从服务器获取需要渲染的内容。
2.浏览器基于自己的渲染引擎开始自上而下加载渲染代码。
浏览器获取的是文件流
1.浏览器首先会把16进制的字节信息编译为代码字符串
2.按照w3c规则进行字符解析，生成对应的Tokens，最后转换为浏览器内核可以识别渲染的DOM节点
3.按照节点最后解析为DOM Tree / CSSOM Tree
link和@import都是外部导入样式
1.遇到link 浏览器会派发一个新的线程去加载资源文件，与此同时GUI渲染线程会继续向下渲染代码
无论css是否请求回来，代码继续渲染
2.遇到@import GUI线程会暂时停止渲染，去服务器加载资源文件，资源文件没有返回之前，是不会
继续渲染的， @import会阻碍浏览器的渲染，项目中尽量少用
3.style GUI直接渲染
页面渲染第一步：在css资源还没有请求回来之前，先生成DOM树。
页面渲染第二部：当所有的css资源都请求回来之后，浏览器按照css导入顺序，依次进行渲染，最后生成CSSOM树
页面渲染地三步：把DOM树和CSSOM树结合在一起，生成有结构 有样式的RENDER TREE渲染书
最后一步：浏览器按照渲染书，在页面中进行渲染和解析，
性能优化：
1.减少DOM树渲染的时间（html层级不要太深，标签语义化）
2.减少CSSOM树渲染的时间（选择器是从右向左解析，所以尽可能减少选择器的层级）
3.减少HTTP的请求次数和请求大小。
4.一般会把css放在页面的开始位置（提前请求资源，用link别用@import，对于移动端，如果css比较少，采用内嵌样式即可）
5.为了避免白屏，可以进来第一件事快速生成一套loading的渲染书（ 前端骨架屏 ），服务器的ssr骨架屏所提高的玄滩
是避免了客户端再次单独请求数据，而不是样式和结构上的，（首屏处理）
6.把js放在页面底部以及尽可能使用defer和async
7.减少DOM的回流和重绘。