渲染机制

一、DOCTYPE及作用

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

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

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict 包含所有HTML元素和属性，但不包括展示性和弃用元素（如font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional 包含所有HTML元素和属性，包括展示性和弃用的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">

二、浏览器的渲染过程

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

触发Reflow

增加、删除、修改DOM节点

移动DOM位置

修改CSS

Resize窗口，或滚动时

修改网页默认字体

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

触发Repaint

DOM改动

CSS改动

最后编辑于：2018.01.05 09:24:28

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。