渲染机制类

javaScript

浏览器渲染原理

什么是DOCTYPE及其作用

DTD(document type definition,文档类型定义) ,是一种用来定义XML或XHTML文件类型的语法规则, 告诉浏览器我是什么文档类型,然后浏览器会根据这个用什么引擎来解析和渲染它。

DOCTYPE用来声明文档类型和DTD规范的(通知浏览器告诉当前的文档包含的是哪个DTD)。

文档类型:
html5: < !DOCTYPE html >
html4.0.1严格模式:不包括展示性的和弃用的元素(比如 font)
html4.0.1宽松模式:包括展示性的和弃用的元素(比如 font)

浏览器渲染过程

浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

渲染过程

重排Reflow

定义:会引起DOM树重新计算的行为,这个过程称之为reflow。

触发Reflow:
1)、增加、删除、修改DOM节点时,会导致Reflow或Repaint
2)、移动DOM的位置,或是有动画的时候
3)、修改CSS样式的时候(width、height、padding…)
4)、窗口Resize窗口的时候(移动端没有这个问题),或是滚动的时候
5)、修改网页默认字体时

重绘Repaint

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

触发Repaint:
DOM修改
CSS改动

布局Layout
参考文章