浏览器渲染机制

浏览器渲染的过程

一、从输入 url 到得到 html 的详细过程

1. 浏览器根据 DNS 服务器得到域名 (url) 的 IP 地址。
2. 向这个IP的机器发送 http (https) 请求。
3. 服务器收到，处理并返回 http (https) 请求。
4. 浏览器得到返回的内容。

二、浏览器渲染页面的过程（得到返回内容之后怎么渲染成页面的过程）

1. 根据 HTML 结构生成 DOM Tree（DOM 树）。
2. 根据 CSS 生成 CSSOM Tree。（头部里有 css，先把 css 加载，会生成一个 CSSOM 结构化的东西，解析之后浏览器就已经知道了 div 就要这样，比如样式里设置了 div 的宽高，css渲染完，再解析 div 的时候，它就可以再已知样式的情况下，一次性把页面渲染出来）。
   那么为何要把 css 放在head中呢？
   加载完成 css 后，浏览器直接知道了规则，再渲染下面的body的时候，它会把这个规则考虑进去渲染，如果把样式放在下面，在渲染body里面的内容的时候，并不知道样式规则，会按照默认方式来渲染 div ，渲染出来之后运行到下面会发现还有一个 css，比如 div 的宽和高，就需要重新渲染一遍，页面上的变化就是从刚开始的样子突然闪动变化成被渲染的样子，用户体验差，性能也差（一次渲染的事情，页面渲染了两次）。所以css要放在head里面。
3. 将 DOM Tree 和 CSSOM Tree 整合成 RenderTree（渲染树）。渲染树跟 DOM 树结构一样，只是添加了样式
4. 根据 RenderTree 开始渲染和展示
5. 遇到 < script > 时，会执行并阻塞渲染，所以一般将script相关的放到body的最下面。
   为何要把 js 放在body的最下面？
   1）不会阻塞body里面结构的渲染，能让页面更快的出来
   2）能拿到所有的标签
   上面的步骤用一张图表示：
   
   另外注意下面两个概念
   1）重排Reflow
   DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它们该出现的位置，这个过程称为reflow。
   什么时候会触发Reflow，怎么避免Reflow？
   ①.当你增加，删除，修改DOM节点的时候，会导致Reflow或Repaint（增加的时候用代码片段）
   ②.当你Resize窗口的时候，或者滚动的时候可能会Reflow，这个要看浏览器
   ③.当你修改网页默认字体的时候。当网页Repaint完的时候最好不要修改默认字体，会非常耗性能。（把样式放到head里面）
   2）重绘Repaint
   当各种盒子的位置，大小以及其他属性，例如颜色，字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容呈现了，这个过程称为Repaint（页面要呈现的内容画在页面上就是Repaint）。
   什么时候会触发Repaint
   ①.DOM改动（代码片段）
   ②.CSS改动