面试二面/三面涉及的知识——浏览区的渲染机制

本文详细介绍了网页渲染的基本原理，包括DOCTYPE的作用、浏览器渲染的过程、重排Reflow的概念及其触发条件，以及重绘Repaint的过程。文章还提供了一些优化建议。

一、渲染机制

1.DOCTYPE的作用

DOCTYPE是用来声明文档类型的DTD（一系列的语法规范）规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。（大白话：DOCTYPE通知浏览器当前的文档包含哪个DTD，也就是哪个文档类型）

常见的DOCTYPE有哪些？

html5： <!DOCTYPE html>
html4 strict（严格模式）:该DTD包含所有HTML元素和属性，但不包括展示型和启用的元素 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html4 transitional（传统模式）::该DTD包含所有HTML元素和属性，包括展示型和启用的元素 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/lose.dtd">

2.浏览器渲染过程

DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

3.重排Reflow

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

触发reflow：

当你正删改DOM节点时，会导致Reflow或Repaint
当移动DOM的位置，或是改革动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。（有可能）
当你修改网页的默认字体时

4.重绘repaint

定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素按照各自特性重绘一遍，于是页面内容出现了，这过程叫repaint。（大白话：页面要呈现的内容彤彤都画在页面上）

触发repaint：

DOM改动
CSS改动

repaint是无法避免的，但可以减少：如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document。

var fragment = document.createDocumentFragment();
　　fragment.appendChild(document.createTextNode('keenboy test 111'));
　　fragment.appendChild(document.createElement('br'));
　　fragment.appendChild(document.createTextNode('keenboy test 222'));
　　document.body.appendChild(fragment);