浏览器的渲染过程及涉及到的缓存机制

本文涉及到：浏览器对用户呈现出一个页面的过程 ， DNS/CDN缓存及关系，强制缓存，协商缓存，重排和重绘等要点。

浏览器对用户呈现出一个页面的过程

答：dns解析-》tcp链接-》发送HTTP请求-》服务器处理请求并且返回报文-》浏览器解析渲染页面-》链接结束

DNS解析：

是一个将网址解析成IP 地址的过程。
首先从本地域名服务器中查找，如果找不到就继续向上根域名服务器查找，直到顶级域名，这个过程中存在dns优化有的环节。当查找资源时， 会先找缓存，（浏览器缓存-》系统缓存-》路由器缓存等等），也会根据机器的负载量和距离用户的位置进行dns负载均衡。

image.png

建立TCP连接：

A.客户端发送syn到服务器要求连接
B.服务端向客户端发送ack
C.客户端收到ack并确认后，向服务端发送ack，连连接建立。

发送HTTP请求：

tcp连接建立之后，开始通过HTTP协议传输资源，根据情况判断是否使用HTTPS，HTTP包括请求行，请求报头，请求正文（post，put客户端向服务器传输数据的情况）。keepalive什么的可以在请求头里添加。

服务器处理请求并返回HTTP报文：

（此处涉及强制缓存和协商缓存， 为了先讲清楚浏览器渲染过程，我把他们放在文章末尾。）

服务端接到请求开始对tcp进行处理，对http进行解析，按照报文格式封装成HTTP request对象。响应报文码（1xx：请求已接受，2XX：成功，3xx：重定向，4xx：客户端错误，5xx：服务端错误）

浏览器渲染页面：

边解析边渲染，首先解析html,构建dom树，然后解析css，构建cssom。

我思考过很久HTML和css谁先渲染。我的理解是，不一定，看位置了，如果dom构建的过程中遇到了css的link，那就会先去加载并构建cssom，这个过程不是一次性的。css和同步的js文件都是阻塞DOM树渲染的，但不阻塞DOM解析，直到js加载并且执行完毕。遇到阻塞的css也会延迟js的执行和dom构建。（因为js可能会修改dom或者cssom）,css同样，当cssom构建时，js也会停止被阻塞，等待cssom构建完成。

defer & async
1.正常模式

遇到这样的js标签，浏览器会立即加载并执行，不等待后续载入的文档元素。

2.async模式

有async的js文件会和后续的DOM解析渲染并行执行，当js加载完成，立即执行，这时html解析暂停。因此不会按照标签引入顺序执行。

3.defer模式

有defer的js文件的加载，也会和文档的解析构建并行。这一点与async一致。
不同的是，defer的js文件加载完不会立即执行， 会等到所有文档解析完成后，DOMContentLoaded事件触发之前完成， 因此会按照引入顺序执行。

DOMContentLoaded & onload
DOM解析完（阻塞DOM的内容解析完，DOM才真正解析完）会触发DOMContentLoaded事件。如果在DOMContentLoaded之后引入css样式表，DOMContentLoaded可能无法获取样式表里的样式，此时DOM树已经构建完成，但外部css文件还没加载完成，这也是css文件放在头部的原因。

onLoad
页面的所有资源被加载以后触发onLoad事件，会在DOMContentLoaded之后触发。

这个过程中有两个重要的过成是回流和重绘。计算盒模型的大小位置还有解析颜色字体等 属性，这些都确定下来的时候开始repain，合成一个rendertree渲染树，render-tree中必须同时存在dom和cssom，浏览器开始布局并渲染到屏幕上。首次加载必然会经历回流和重绘的过程。

重排和重绘

无论何时总会有一个初始化的页面布局伴随着一次绘制。（除非你希望你的页面是空白的:)）之后，每一次改变用于构建渲染树的信息都会导致以下至少一个的行为：

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。

由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓。

什么情况会触发重排或重绘？

• 任何改变用来构建渲染树的信息都会导致一次重排或重绘。

• 添加、删除、更新DOM节点

• 通过display: none隐藏一个DOM节点-触发重排和重绘

• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

• 移动或者给页面中的DOM节点添加动画

• 添加一个样式表，调整样式属性

• 用户行为，例如调整窗口大小，改变字号，或者滚动。

一些重排可能开销更大。想象一下渲染树，如果你直接改变body下的一个子节点，可能并不会对其它节点造成影响。但是当你给一个当前页面顶级的div添加动画或者改变它的大小，就会推动整个页面改变-听起来代价就十分高昂。

每次重排重绘浏览器都会立即执行吗？

浏览器一直致力于减少这些消极的影响，浏览器会创建一个变化的队列，浏览器可以向队列添加或变更这些变化，在一个特定的时间或达到一定的数量时，执行一次重排或重绘，通过这种方式，多次重排或重绘会整合起来最终减少重排或重绘的次数，以节省浏览器渲染的开销。

所以 ，同时set和get样式是非常糟糕的做法

// no-no!
el.style.left = el.offsetLeft + 10 + "px";

如何减少重排重绘呢？

• 离线编辑样式修改，可以通过创建documentFragment临时保存变动，然后一次性更新到dom上。
• 复制要多次更新的节点，在副本上进行操作，然后一次性替换。

一个问题，为什么会遇到浏览器展示页面开始没有样式，过一会样式才可用的情况？

看到的一个答案，有可能是这个原因，但是我不确定。
开发环境会把css都打包到js里，所以要等js加载好了才有样式，因此会出现这种情况；但是在生产环境下，css会生成css文件，并插入到