服务器渲染 和 客户端渲染

数据是服务器渲染还是客户端基于AJAX从服务器获取后，客户端基于JS自己实现绑定的
SCRIPT会阻碍GUI的渲染 ，先把JS去请求（HTTP线程），在把请求回来的执行，只有JS执行完，再去GUI渲染
遇到link不会阻碍GUI的渲染 ，GUI继续向下，LINK会开启一个新的HTTP线程去加载CSS代码
<link href='xxx.css'>
<style>
</style>
DOM TREE
=>遇到JS都是先把JS执行的
按照指定的顺序依次渲染CSS代码 CSSOM树
RENDER TREE
LAOUT 计算元素在页面中的位置和大小
PATING 按照计算的结果进行绘制
【分图层绘制】
defer async
defer 遇到 script defer：GUI继续渲染，同时HTTP去请求，请求回来也不会立即执行，而是等到GUI渲染完，再去按照之前引入的SCRIPT顺序 依次去执行 （依赖顺序的）
ASYNC ： GUI继续，HTTP请求，当请求回来后，立即执行JS（GUI暂停），JS执行完GUI继续 谁先回来谁执行（没有依赖顺序就）
理论上 只有 DOM TREE +CSSOM TREE =>RENDER TREE LAYOUT PATING 页面才会呈现出内容
真实情况下 如果一个CSS资源请求时间过长，浏览器也不等了，自己先把渲染好的 呈现出来

当代浏览器都有一个 预处理机制 html-preload-scanner，预先把所有请求资源 在GUI渲染之前 就去发送请求 HTTP并发限制

回流：当页面第一次渲染完，我们后期基于某些操作可能要去修改页面中元素的样式：可能会引发 元素位置或者大小的变化，这样浏览器需要重新进行LAUOUT计算（回流/重排），重排完成后，浏览器需要重新的计算（应尽量避免）
但是如果并没有改变位置和大小 只是改变一些基础的样式（color...）则不需要重排，只修要重绘即可

重要：DOM性能优化：减少回流和重绘（重排）

image.png image.png