什么是DOCTYPE及作用？
- 文档声明，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- <!DOCTYPE html> DOCTYPE不区分大小写，但是一般建议大写
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
- DOCTYPE声明之前，只能有注释和空白
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- HTML5 不基于 SGML，所以不需要引用 DTD。
- 在 HTML 4.01 中有三种 <!DOCTYPE> 声明,在 HTML5 中只有一种：
// HTML5 写法
<!DOCTYPE html>
// HTML4.01 有严格模式(Strict)和传统模式(Transitional)之分
// 这两种模式的区别
严格模式引用的DTD包含所有HTML元素和属性，但不包括展示和弃用的元素，比如font.
传统模式引用的DTD包含所有HTML元素和属性，包括展示和弃用的元素，比如font.
浏览器渲染过程
image.png
- 浏览器会将HTML解析成一个DOM Tree，DOM Tree的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
- 将CSS解析成 CSS Rule Tree 。
- 根据DOM Tree和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。 - 再下一步就是绘制(painting)，即遍历Render Tree，并使用UI后端层绘制每个节点
注意
上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
重排Reflow
当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
// 触发Reflow
1. 当你增加，删除，修改DOM节点的时候会触发Reflow或Repaint
2. 当你移动DOM位置或者是搞个动画的时候
3. 当修改部分会影响布局和尺寸的CSS样式的时候
4. 当窗口尺寸变化或滚动的时候
5.当修改网页默认字体的时候
重绘Repaint
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
// 触发Repaint
1. DOM改动
2. CSS样式改动
注意
(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
(2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
网友评论