页面渲染

2018-08-22

什么是DOCTYPE以及作用

DTD(document type definition,文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档的类型，决定使用何种协议来解析，以及切换浏览器模式。

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法。那么浏览器解析时便会出一些差错。

1 2	<!--html5--> <!DOCTYPE html>

1
2
3

<!--HTML Strict DTD-->
<!--该DTD包含所有元素和属性，但不包括展示性和弃用的元素（比如font）-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1
2
3

<!--HTML Transitional DTD-->
<!--该DTD包含所有元素和属性，包括展示性和弃用的元素（比如font）-->
<!DOCTYPE DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

浏览器渲染过程

浏览器渲染过程图解

图解：
浏览器渲染涉及html、css、js，三者都会影响页面的呈现形式。
第一步，HTML经过HTML Parse（DOM Parse）转成DOM Tree(DOM 树);

然后CSS按照CSS规则和CSS解释器转成CSSOM Tree;

然后HTML Tree和CSSOM Tree整合形成Render Tree
此时告诉浏览器要渲染树的结构基本准备完成，（Render Tree平行的Layout,Render Tree不包含Html的具体内容，也不知道位置，也就是说Layout之前，Render Tree不知道摸个元素的位置，通过Layout精确计算即将显示的DOM真正的位置、宽高颜色）

最后浏览器paint(浏览器通过GUI开始画图，把内容全部呈现)

最后，display 在浏览器可以看见最终的效果

网上copy的图片便于理解：
DOM Tree
DOM Tree解

CSSOM Tree

Render Tree

Layout
Layout

重排Reflow

概念：

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到他该出现的位置，这个过程称之为Reflow.

触发Reflow的场景

增删改DOM节点，会导致Reflow或repaint
移动DOM位置，或者做动画
修改CSS样式
窗口Resize(移动端不会触发)，或者滚动
修改网页默认字体

重绘Repaint

概念

当各种盒子的位置、大小以及其他属性，比如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

简言之，页面即将呈现的内容统统画到屏幕上的过程。

触发repaint条件

DOM改动
CSS改动

如何尽量减少repaint频率？

repaint无法避免，但是可以最大程度的降低，把最后的所有结果塞到documentFragment，一次性添加到页面。

布局Layout