【随笔】面试-渲染机制

1.1 什么是DOCTYPE及作用

DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义 XML 或（X）HTML 的文件类型。

<!-- HTML5 -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict -->


<!-- HTML 4.01 Transitional  -->

1.2 浏览器渲染过程（从输入 url 到展示的过程）

DNS 解析
TCP 三次握手
发送请求，分析 url，设置请求报文(头，主体)
服务器返回请求的文件 (html)
浏览器渲染
- HTML parser --> DOM Tree
  - 标记化算法，进行元素状态的标记
  - dom 树构建
- CSS parser --> Style Tree
  - 解析 css 代码，生成样式树
- attachment --> Render Tree
  - 结合 dom树与 style树，生成渲染树
- layout: 布局
- GPU painting: 像素绘制页面
- 连接关闭（四次挥手）

1.3 重绘回流

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

重排（回流）Reflow

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。
（当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。）

触发Reflow：
- 页面初次渲染
- 浏览器窗口大小改变，Resize 窗口的时候（移动端没有该问题），或是滚动的时候
- 元素尺寸、位置、内容发生改变
- 添加或者删除可见的 dom 元素
- 移动DOM的位置，或是搞个动画的时候
- 激活 CSS 伪类（例如：:hover）
- 修改网页的默认字体，元素字体大小变化

重绘Repaint

当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器是把这些元素都按照各自的特性绘制了一边，于是页面的内容出现了，这个过程称之为Repaint。
（当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少。例如：元素的颜色改变）

1.4 布局Layout

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下