day09-前端面试技巧-（渲染机制）
2019-03-10 本文已影响1人
东邪_黄药师
渲染机制：
- Doctype 是什么? 作用是什么？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏
览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
常见的DOCTYPE html5 严格模式 和传统模式.png
- 浏览器的渲染过程：
image.png
1.HTML解析出DOM Tree
2.CSS解析出Style Rules
3.将二者关联生成Render Tree
4.Layout 根据Render Tree计算每个节点的信息
5.Painting 根据计算好的信息绘制整个页面
6.display
-
重排｛Reflow｝：
Reflow.png
-
重绘 (repaint)：
image.png
- 布局layout：
构建完渲染树后，浏览器便会从渲染树的根节点开始遍历，计算页面上每个对象的几何信息，这一个过程称为布局。布局输出的是一个个「盒子模型」，它精确的计算出每个元素在视口中的准确位置及尺寸大小。
