JS渲染机制
2018-10-03 本文已影响0人
王小滚
1. 什么是DOCTYPE及作用？
DTD是一系列的语法规则，用来定义XML或HTML的文件类型。浏览器会使用它来判断文档类型。
- <!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
- 严格模式的排版和js运作模式是以该浏览器支持的最高标准运行。
- 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2. 浏览器渲染过程
浏览器渲染过程
- html经过HTml Parser转化成dom tree，将css文件按照css解释器解析，顺序为：浏览器默认样式->自定义样式->页面内的样式。转化成style rules
- 转化后的dom树与样式规则结合形成了一个render tree
- render tree中不包含HTML的具体内容，也不知道这个dom树需要挂在页面的具体位置，通过layout指定元素具体的位置，宽，高，颜色在render tree呈现出来
- 浏览器通过gui开始画图，呈现内容
- 页面效果渲染在浏览器上
3. 重排reflow
定义：
DOM结构中各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程就是重排。
触发重排的动作：
- 增加 删除 修改dom元素
- 移动dom元素的时候
- 修改css样式的时候
- resize窗口的时候
- 修改网页的默认字体（所有dom元素重排）
4. 重绘repaint
定义：浏览器把确定好的元素按照各自的特性绘制了一遍。
触发repaint：
呈现内容发生变化
5.如何避免重排与减少repaint频率？
- 分离读写操作
- 样式集中改变，可以添加一个类，样式都在类中改变
- 可以使用absolute脱离文档流。
- 使用display:none ，不使用 visibility，也不要改变 它的 z-index
- 能用css3实现的就用css3实现。
