HTML页面渲染

HTML页面渲染

上网对我大家来说只是点击鼠标，敲敲键盘的小事，再简单不过，可是作为程序猿，那么整个过程背后又发生了什么呢？

浏览器获取HTML

• 浏览器获取HTML大致可以分为以下的步骤：

  1. 输入的网址或者点击的链接进过DNS解析之后获取服务器的IP地址

  2. 浏览器通过获取的IP地址向服务器发送HTTP请求，经过TCP三次握手确认链接：

     1. 服务器接收请求后，解析主机头对应的站点，把请求传送给站点

     2. 站点接受转发的请求作出回应并返回HTTP回应

     3. 浏览器接到返回的HTTP回应，解析头信息和HTML主体

     4. 根据解析的头信息设置必要的数据，如cookie，编码，语言等声明的处理

HTML解析

• HTML解析大致分为五部分：

  1. 解析HTML

  2. 构建DOM树

  3. 构造呈现树（Render Tree）

  4. 布局

  5. 绘制

解析与构建DOM树

对于服务器返回的HTML浏览器有专门的HTML解析器进行解析，而后解析成一棵DOM树

• 整个文档是一个文档节点

• 每个HTML元素是元素节点

• HTML内的文本是文本节点

• 每个HTMl'属性是属性节点

• 注释也是注释节点

DOM-TREE.png

解析CSS样式

对于获得CSS文件浏览器也有专门的CSS解析器解析，并解析成样式规则，将样式表规则放大到对应的DOM节点上，形成一课带有样式的DOM，也就是呈现树

Render-TREE.png

布局

浏览器按照从上到下、从左到右的顺序读取DOM树的节点，依次放到文档流中，文档流中，每一个节点姑且看作是一个盒子，这个盒子中包含着他的子节点，同时这个盒子也会被他的父节点包含，举个栗子

wendnagliu.png

上面这种情况P元素包含spani标签，但是同时也会被div标签包含，在文档流中是这样的

wendangliu.png

再根据呈现树计算每个呈现树节点的大小和位置信息，可能你会有疑问，之前css样式附着DOM树是不是已经有了样式吗，为什么还有计算，原因：以上包含大小的样式信息只是存在内存里，并没有实际使用，浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置。就这样递归的遍历每一个节点进行布局。

绘制页面

布局之后，完成的任务只是将每一个节点按照大小、位置进行摆放，并没有进行可视化，那么最后一步就是绘制啦。对于每一个呈现树节点，绘制的顺序如下：

1. 背景颜色

2. 背景图片

3. 边框

4. 子呈现树节点

5. 轮廓

最后看到的才是我们日常所看到页面。

文章有错误之处欢迎各位道友不吝指正

参考源：https://www.cnblogs.com/dojo-lzz/p/3983335.html