浏览器渲染机制_浏览器flow based layout-CSDN博客

本文链接：https://blog.csdn.net/q535999731/article/details/79666319

什么事DOCTYPE是什么及作用

DTD 文档类型定义(Document Type Definition)是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及其换浏览器模式。
（通俗解释，DTD是告诉浏览器是什么文档类型，然后浏览器去根据这个文档类型进行解析）

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证，如果文档代码不合法，那么浏览器解析时便会出一些差错。
（通俗解释：DOCTYPE告诉浏览器当前文档包含那个解析标准）

常见DOCTYPE

名称	例子	说明
HTML5	`<!DOCTYPE html>`	HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
HTML 4.01 Strict	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	该DTD包含所有HTML元素和属性，但是不包括展示性和弃用的元素（如font）
HTML 4.01 Transitional	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	该DTD包含所有HTML元素和属性，同时，包括展示性和弃用的元素（如font）
HTML 4.01 Frameset	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`	一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。

拓展：https://www.cnblogs.com/tinyTea/p/6065051.html
Doctype作用，标准模式与兼容模式的区别
https://www.cnblogs.com/sunhe/p/4994058.html
SGML：
https://www.zhihu.com/question/20249139

浏览器的渲染过程：
webkit内核

Gecko
Gecko
解析HTML以构建DOM树 —— 构建render树 —— 布局render树 —— 绘制render树
这里写图片描述

浏览器拿到HTML和CSS之后，
首先将HTML通过HTML Parser转成DOM Tree，CSS按照CSS规则通过CSS Parser转成Style Rules Tree，
然后将DOM Tree和Style Rules Tree结合，成为Render Tree，这样基本就像HTML要渲染的树的结构就出来了（不包含HTML具体内容和位置），然后通过Layout可以精确计算到要现实的DOM的宽高颜色位置等等，然后通过Painting对画面进行绘制，最后呈现出画面

解析部分详细

浏览器引擎会通过 DOM Tree 和CSS Rule Tree 来构造 Rendering Tree。
这里写图片描述
注意：
* Rendering Tree 渲染树并不等同于 DOM Tree，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中。
* CSS 的Rule Tree 主要是为了完成匹配并把CSS Rule附加上 Rendering Tree 上的每个 Element，也就是 DOM 节点，也就是所谓的 Frame。
* 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及它们的从属关系。
* 然后，计算每个 Frame（也就是每个Element）的位置，这又叫 layout 和 reflow 过程。

Repaint（重绘）

当各种盒子的位置、大小以及其他属性，如颜色、字体大小等都确定下来后，浏览器把这些元素按照各自特性绘制一遍

触发Repaint
DOM改动
CSS改动

Reflow（回流）

浏览器要花时间去渲染，当它发现了某个部分发生的变化影响了布局，即意味着元件的几何尺寸变了，我们需要重新验证并计算 Render Tree 进行重新渲染。Render Tree的一部分或全部发生了变化，这就是Reflow，或者说是Layout （HTML 使用的是 flow based layout，也就是流式布局，所以如果某元件的几何尺寸发生了变化，需要重新布局，也就是 Reflow）。reflow 会从 <html> 这个root frame 开始递归往下，依此计算所有节点的几何尺寸和位置。在 reflow 的过程中，可能会增加一些 frame，比如一个文本字符串必须被包装起来。

触发Reflow

当你增加、删除、修改DOM节点时，会导致Reflow 或Repaint
当你移动DOM位置，或是搞个动画的时候
当你修改CSS样式的时候
当你Resize 窗口的时候（移动端没有这个问题），或是滚动的时候
当你修改网页的默认字体的时候
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化