浏览器的渲染过程

1 用户输入url地址，DNS（域名解析系统）服务器根据输入的域名查找对应 IP
2 浏览器向该IP地址服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
3 浏览器加载 HTML 文件及文件内包含的外部引用文件（CSS、JS）及图片，多媒体等资源。
4 据请求回来的 HTML 文件，渲染引擎开始从上到下解析HTML文档，首先将标签转换成DOM树中的DOM节点（包括js生成的标签），也叫内容树（Content Tree/DOM Tree），此时解析过程中碰见了外部引用的 CSS 文件，去服务器请求回 CSS 文件，构建 CSSOM (CSS Object Model)树，加载解析样式生成 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的。
5 此时继续解析 HTML，又碰见了外部引用的 JS 文件，去服务器请求回 JS 文件，加载并执行 JS 代码（包括内联代码或外联 JS 文件）
6 此时在解析 HTML 过程中发现一个标签内引用了一张关联图片，去服务器请求回这张图片，浏览器解析器不会等待图片下载完，而是继续渲染后面的代码。
7 此时 HTML 代码和 CSS 代码已经形成 DOM 树和 CSSOM 树,并生成渲染树(render tree)，渲染树按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
8 布局（layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
9 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过 UI 后端模块完成。