浏览器渲染机制
2020-04-09 本文已影响0人
事在人为s
什么是doctype及作用
浏览器渲染过程
重排 reflow
重绘 repaint
布局 layout
什么是doctype及作用
DTD(document type definition，文档类型定义)，告诉浏览器我是什么文档类型，浏览器根据这个来判断用什么引擎来解析、渲染
DOCTYPE 直接告诉浏览器什么是dtd，DOCTYPE告诉当前的文档是哪个文档类型
- HTML5 <!DOCTYPE html>
- HTML 4.01 Strict 严格模式
- HTML 4.01 Transitional 传统模式
浏览器渲染过程
浏览器渲染过程
DOM Tree
CSSOM Tree
Render Tree
Layout
重排 reflow
定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置
触发reflow
- 增删改DOM结点时，会导致reflow或repaint
- 移动DOM的位置、搞个动画的时候
- 修改CSS样式的时候，如改变宽高
- resize窗口的时候也可能（移动端没有这个问题），或是滚动的时候
- 修改网页的默认字体时
重绘 repaint
定义
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了
触发repaint
- DOM改动
- CSS改动
repaint无法避免，可减少repaint
先创建一个文档片段（document.createDocumentFragment），在这个片段中操作完之后，在一次插入到dom中
