120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 前言
|
|||
|
|
|
|||
|
|
> 接下来的几篇文章，讲一下二面的内容。
|
|||
|
|
|
|||
|
|
**二面的内容：**
|
|||
|
|
|
|||
|
|
|
|||
|
|
- 渲染机制
|
|||
|
|
|
|||
|
|
- JS 运行机制
|
|||
|
|
|
|||
|
|
- 页面性能
|
|||
|
|
|
|||
|
|
- 错误监控
|
|||
|
|
|
|||
|
|
本文接下来讲渲染机制。
|
|||
|
|
|
|||
|
|
|
|||
|
|
**渲染机制：**
|
|||
|
|
|
|||
|
|
- 什么是DOCTYPE及作用
|
|||
|
|
|
|||
|
|
- 浏览器渲染过程
|
|||
|
|
|
|||
|
|
面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
|
|||
|
|
|
|||
|
|
- 重排Reflow
|
|||
|
|
|
|||
|
|
面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
|
|||
|
|
|
|||
|
|
- 重绘Repaint
|
|||
|
|
|
|||
|
|
- 布局Layout
|
|||
|
|
|
|||
|
|
|
|||
|
|
这里的Layout指的是浏览器的Layout。
|
|||
|
|
|
|||
|
|
## 什么是DOCTYPE及作用
|
|||
|
|
|
|||
|
|
### 定义
|
|||
|
|
|
|||
|
|
**DTD**：是一系列的语法规则，用来定义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>`。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 浏览器的渲染过程
|
|||
|
|
|
|||
|
|
|
|||
|
|
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
|
|||
|
|
|
|||
|
|
|
|||
|
|
img
|
|||
|
|
|
|||
|
|
面试时，我们要把上面的流程说清楚。
|
|||
|
|
|
|||
|
|
为了理解这个过程，来看几张图：（这几张图是帮助我们私下理解的，不是给面试官的）
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
参考链接：
|
|||
|
|
|
|||
|
|
- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|