197 lines
5.5 KiB
JavaScript
197 lines
5.5 KiB
JavaScript
|
||
|
||
|
||
## 前言
|
||
|
||
> 接下来的几篇文章，讲一下二面的内容。
|
||
|
||
**二面的内容：**
|
||
|
||
|
||
- 渲染机制
|
||
|
||
- JS 运行机制
|
||
|
||
- 页面性能
|
||
|
||
- 错误监控
|
||
|
||
本文接下来讲渲染机制。
|
||
|
||
|
||
**渲染机制**包括的内容：
|
||
|
||
- 什么是DOCTYPE及作用
|
||
|
||
- 浏览器渲染过程
|
||
|
||
面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
|
||
|
||
- Reflow：重排
|
||
|
||
面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
|
||
|
||
- Repaint：重绘
|
||
|
||
- Layout：布局
|
||
|
||
这里的Layout指的是浏览器的Layout。
|
||
|
||
## 什么是DOCTYPE及作用
|
||
|
||
### 定义
|
||
|
||
**DTD**（Document Type Definition）：文档类型定义。
|
||
|
||
是一系列的语法规则，用来定义XML或者(X)HTML文件类型。**浏览器会使用DTD来判断文本类型**，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我）
|
||
|
||
**DOCTYPE**：用来声明DTD规范。
|
||
|
||
一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（说白了，DOCTYPE就是用来声明DTD的）
|
||
|
||
|
||
### 常见的DOCTYPE声明有几种
|
||
|
||
> 面试官紧接着会问，常见的 DOCTYPE 有哪些，以及 HTML5 的 DOCTYPE 怎么写。
|
||
|
||
1、**HTML 4.01 Strict**：（严格的）
|
||
|
||
```html
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
```
|
||
|
||
PS：该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。
|
||
|
||
2、**HTML 4.01 Transitional**：（传统的）
|
||
|
||
```html
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
|
||
```
|
||
|
||
PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。
|
||
|
||
|
||
3、HTML 5：
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
```
|
||
|
||
|
||
**总结：**
|
||
|
||
面试时，不会让你写出 HTML 4.01的写法，因为大家都记不住。但是要记住 HTML 5 的写法，别看它简单，知道的人还真不多。
|
||
|
||
面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是`<!DOCTYPE html>`。
|
||
|
||
|
||
## 浏览器的渲染过程
|
||
|
||
|
||
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
|
||
|
||
|
||
|
||
|
||
这里先解释一下几个概念，方便大家理解：
|
||
|
||
- DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。
|
||
|
||
- CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
|
||
|
||
- Render Tree: DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout）
|
||
|
||
- layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去**计算出每个节点在屏幕中的位置**(宽高、颜色等)。
|
||
|
||
- painting：按照算出来的规则，通过显卡，把内容画到屏幕上。
|
||
|
||
- display：打击看到的最终效果。
|
||
|
||
参考链接：
|
||
|
||
- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html)
|
||
|
||
|
||
## Reflow：重排
|
||
|
||
### 定义
|
||
|
||
**重排 Reflow**：DOM结果中的各个元素都有自己的盒子（模型），这些都需要浏览器**根据各种样式来计算，并根据计算结果将元素放在它该出现的位置**，这个过程称之为Reflow。
|
||
|
||
|
||
### 什么时候触发 Reflow
|
||
|
||
- 增加、删除、修改DOM节点时，会导致 Reflow 或 Repaint。
|
||
|
||
- 移动DOM的位置，或是加个动画的时候
|
||
|
||
- 修改CSS样式时（宽高、display 为none等，都是通过css样式来修改的）
|
||
|
||
- 当用户Resize窗口时（移动端没有这个问题），或是滚动的时候，**有可能**会触发（具体要看浏览器的规则）。
|
||
|
||
- 修改网页的默认字体时（这个影响非常严重）。
|
||
|
||
**面试总结：**
|
||
|
||
首先要答出 Reflow 定义；其次，什么时候触发，至少要答出两条。更进一步，面试官可能还会问你**怎么避免reflow**，这个自己去查查吧。
|
||
|
||
|
||
## Repaint：重绘
|
||
|
||
### 定义
|
||
|
||
**Repaint重绘制：**当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
|
||
|
||
说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。
|
||
|
||
|
||
### 什么时候触发 Repaint
|
||
|
||
- DOM改动
|
||
|
||
- CSS改动
|
||
|
||
其实，就是判断当前呈现的内容是否发生变化（无论这个变化是通过DOM改动还是CSS改动）。只要页面显示的内容不一样了，肯定要 Repaint。
|
||
|
||
**面试总结：**
|
||
|
||
面试官经常会问：“如何**尽量减少**Repaint的频率？”
|
||
|
||
注意， reflow是问“怎么避免”，repaint是问“怎么减少”。Repaint是无法避免的，否则就成了静态页面了。
|
||
|
||
**答案**：
|
||
|
||
（1）如果需要创建多个DOM节点，可以使用**DocumentFragment**创建完，然后一次性地加入document。（加一个节点，就repaint一次，不太好）
|
||
|
||
（2）将元素的display设置为”none”，完成修改后再把display修改为原来的值。
|
||
|
||
参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|