什么是DOCTYPE及作用？
DTD（document type definition，文档定义类型）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
常见DOCTYPE声明：
1.HTML 5
<!DOCTYPE html>
2.HTML 4.01 Strict //该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.HTML 4.01 Transitional //该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">浏览器渲染过程
浏览器工作原理系列文章：https://blog.csdn.net/lxcao/a...
还可以查看该文章：https://www.cnblogs.com/aaron...
Layout主要是告诉Render Tree（渲染树）每个元素的位置，渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。
浏览器渲染的过程主要包括一下五步：
1、浏览器将获取的HTML文档并解析成DOM树
2、处理CSS标记，构成层叠样式表模型CSSOM（CSS Object Model）
3、将DOM和CSSOM合并为渲染树（rendering tree）将会被创建，代表一系列将被渲染的的对象。
4、渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就看可以布局所有的元素。
5、将渲染树的各个节点绘制到屏幕上，这一步称之为painting。
需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM
浏览器渲染过程更多可以参考：https://www.imooc.com/article...
实例代码和DOM树:
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>
Hello <span>web performance</span>
students!
</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
实例代码和CSSOM树：
CSSOM树是显示最后的结果，因为一个元素可能会有两处或多处设置样式
body{font-size:16px};
p{font-size:bold};
span{color:red}
p span{display:none}
img{float:right}
Render Tree：
DOM+CSSOM+Layout计算最后生成Render Tree。
Layout：Layout就是计算每个元素的位置、宽高
重排Reflow：
定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
触发Reflow
1、当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
2、当你移动DOM的位置，或是搞个动画的时候
3、当你修改CSS样式的时候
4、当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
5、当你修改网页的默认字体时
面试时候可能会问如何尽量减少Reflow
重绘Repaint：
定义
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint
触发Repaint
1、DOM改动
2、CSS改动
面试时候可能会问如何减少Repaint的频率
布局Layout：
浏览器渲染和浏览器重排和重绘更多可以参考
https://www.imooc.com/article...
https://www.imooc.com/article...
https://www.cnblogs.com/cence...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。