了解一点浏览器的工作流程

浏览器工作流程

浏览器工作流程主要有四步：
1.将HTML解析为DOM树。
2.渲染解析出的DOM树。
3.布局（确定每一个dom节点的位置）。
4.绘制（在浏览器中呈现出这些dom节点）。

火狐的Gecko ，与谷歌的webkit大致流程相同，个别名字不同火狐的布局叫做（reflow，重排）。

dom操作优化

在实际的开发和使用中，不同的操作，会导致浏览器进行布局（重排）和绘制。比如，js获取dom节点的位置值，包括但不限于height,width,top…等等。因为这些值都是动态计算的，所以浏览器需要尽快完成页面的绘制，然后计算返回值，从而打乱了重排或重绘的优化。所以，在开发中需谨慎取得DOM元素的布局信息。

解析

解析的过程可以分成两个子过程：词法分析和语法分析。
词法分析（英语：lexical analysis）是计算机科学中将字符序列转换为单词（Token）序列的过程。进行词法分析的程序或者函数叫作词法分析器（Lexical analyzer，简称Lexer），也叫扫描器（Scanner）。词法分析器一般以函数的形式存在，供语法分析器调用。完成词法分析任务的程序称为词法分析程序或词法分析器或扫描器。
语法分析是编译过程的一个逻辑阶段。语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语，如“程序”，“语句”，“表达式”等等.语法分析程序判断源程序在结构上是否正确。

HTML解析过程由两个阶段组成：标记化和树构建。
标记化：
遇到字符 < 时，状态更改为“标记打开状态”。
接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”。
遇到 > 标记时，会发送当前的标记，状态改回“数据状态”。
树构建

//initial mode
<html> //before html
<head>//before head
//in head
</head>//after head<body>Hello world//in body</body>//after body
</html>

呈现树和 DOM 树的关系

在 DOM 树构建的同时，浏览器还会构建另一个树结构：呈现树。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。

布局

呈现器在创建完成并添加到呈现树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。为避免对所有细小更改都进行整体布局，浏览器采用了一种“dirty 位”系统。如果某个呈现器发生了更改，或者将自身及其子代标注为“dirty”，则需要进行布局。

全局布局和增量布局

全局布局是指触发了整个呈现树范围的布局，触发原因可能包括：

1.影响所有呈现器的全局样式更改，例如字体大小更改。
2.屏幕大小调整。
布局可以采用增量方式，也就是只对 dirty 呈现器进行布局。

绘制

在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。

绘制顺序

1.背景颜色
2.背景图片
3.边框
4.子代
5.轮廓