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 后端模块完成。
浏览器的渲染过程
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 大家好，我是李俊辉！如果您觉得文章有用，请帮忙点个赞或关注，也为我鼓励一下，坚持写下去！ 本文是转载，是目前为止看...
