浏览器拿到一个HTML页面（包含css和js）是如何根据html，css，js渲染出画面的？我简单的描述一下整个过程：
1）什么是DOCTYPE及作用？
DTD（文档类型定义）。它定义了文档是属于HTML或者XHTML文件类型。浏览器判断文件类型，根据相应的解析器来解析以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的。一个主要的作用是使文件规范化，如果文件不规范，浏览器解析时会出一些差错。
2）DOCTYPE有哪几种声明？
-
-
-
- HTML5声明方式 <!DOCTYPE html>
- HTML4.0.1 严格声明（所谓的严格声明是包含了所有的HTML元素和属性，不包含展示和废弃的元素。如font）。
- HTML4.0.1 传统声明(所谓的传统声明是包含了所有的HTML元素和属性，但包含展示和废弃的元素。如font)。
-
-
3）浏览器渲染过程？
- HTML元素通过HTML解析器，解析元素为DOM Tree。
- CSS样式通过css解析器和解析规则，将css解析为CSSOM tree。
- cssOM tree和 DOM tree合并成render tree。
- 通过layout计算各个盒子的样式。
- 浏览器开始绘画。
- 浏览器展示。
4）重排Reflow
概念：DOM结构中各个元素有自己的盒子，浏览器需要根据各种样式计算，并根据计算结果将元素放置到合适的位置。
触发条件：
- 增、删、改DOM节点。
- 移动DOM节点。
- 修改CSS样式（比如float）。
- 调整浏览器窗口样式（可能会触发）。
- 修改浏览器默认字体（会导致浏览器在加载的时候出现闪烁）。
减少Reflow
尽量少操作DOM的增删改。操作时，可以获取片段，然后对其操作后，在append上去。(只列举了一个，其他的后面自己再补充)
5）Repaint
概念：当每个盒子的字体大小、颜色、样式、确定以后，浏览器需要将其通过绘画，展示到页面
触发条件：
DOM改变。
CSS改变。
减少避免：
尽量少操作DOM的增删改。操作时，可以获取片段，然后对其操作后，在append上去。(只列举了一个，其他的后面自己再补充)
扫一扫
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
