页面从输入url到渲染完成的全部过程

页面从输入url到渲染完成的全部过程

1、DNS 域名解析

2、HTTP 请求和TCP 连接

3、请求返回html

处理 HTML 标记并构建DOM 树，通过HTML解析器解析HTML文档，构建一个DOM Tree。
处理CSS 标记并构建CSSOM 树，通过CSS解析器解析HTML中存在的CSS，构建Style Rules。
将DOM与 CSSOM合并成一个渲染树（Render Tree）。
根据渲染树来布局，Render Tree构建完毕，进入到布局阶段（layout/reflow），将会为每个阶段分配一个应出现在屏幕上的确切坐标。
最后将全部的节点遍历绘制出来后，一个页面就展现出来了。
浏览器在解析html文件时，会"自上而下"加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。

4、浏览器解析HTML文档过程

5、reflow(回流)和repain(重绘)

DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。
页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。