产业气象站：URL 到页面展示过程发生了什么？，(详解)从浏览器输入( 二 )
3.数据处理
当网络进程接收到的响应报文状态码 ， 进行相应的操作 。 例如状态码为200OK时 ， 会解析响应报文中的Content-Type首部字段 ， 例如我们这个过程Content-Type会出现application/javascript、text/css、text/html ， 即对应Javascript文件、CSS文件、HTML文件 。
详细的MIME类型讲解可以看MDN
2.3创建渲染进程
当前需要渲染HTML时 ， 则需要创建渲染进程 ， 用于后期渲染HTML 。 而对于渲染进程 ， 如果是同一站点是可以共享一个渲染进程 ， 例如a.abc.com和c.abc.com可以共享一个渲染渲染进程 。 否则 ， 需要重新创建渲染进程
需要注意的是 ， 同站指的是顶级域名和二级域名相等
2.4开始渲染
在创建完渲染进程后 ， 网络进程会将接收到的HTML、JavaScript等数据传递给渲染进程 。 而在渲染进程接收完数据后 ， 此时用户界面上会发生这几件事：
更新地址栏的安全状态更新地址栏的URL前进后退此时enable ， 显示正在加载状态更新网页
文章图片
2.5渲染过程
大家都知道页面渲染的过程也是面试中单独会考的点 ， 并且时常会由这个点延申出另一个问题 ， 即如何避免回流和重绘 。
渲染过程 ， 是整个从理器输入URL到页面渲染过程的最后一步 。 而页面渲染的过程可以分为9个步骤：
解析HTML生成DOM树解析CSS生成CSSOM加载或执行JavaScript生成渲染树（RenderTree）布局分层生成绘制列表光栅化显示2.5.1构建DOM树
由于网络进程传输给渲染进程的是HTML字符串 ， 所以 ， 渲染进程需要将HTML字符串转化成DOM树 。 例如：
文章图片
需要注意的是这个DOM树不同于Chrome-devtool中Element选项卡的DOM树 ， 它是存在内存中的 ， 用于提供JavaScript对DOM的操作 。
2.5.2构建CSSOM
构建CSSOM的过程 ， 即通过解析CSS文件、style标签、行内style等 ， 生成CSSOM 。 而这个过程会做这几件事：
规范CSS ， 即将color:blue转化成color:rgb()形式 ， 可以理解成类似ES6转ES5的过程计算元素样式 ， 例如CSS样式会继承父级的样式 ， 如font-size、color之类的 。 
文章图片
CSSObjectModel是一组允许用JavaScript操纵CSS的API 。 详细API讲解可以看MDN
2.5.3加载JavaScript
通常情况下 ， 在构建DOM树或CSSOM的同时 ， 如果也要加载JavaScript ， 则会造成前者的构建的暂停 。 当然 ， 我们可以通过defer或sync来实现异步加载JavaScript 。 虽然defer和sync都可以实现异步加载JavaScript ， 但是前者是在加载后 ， 等待CSSOM和DOM树构建完后才执行JavaScript ， 而后者是在异步加载完马上执行 ， 即使用sync的方式仍然会造成阻塞 。
而JavaScript执行的过程 ， 即编译和运行JavaScript的过程 。 由于JavaScript是解释型的语言 。 所以这个过程会是这样的：
针对每句代码进行分行处理 ， 即Token化根据Token ， 生成AST（AbstractSytanxTree)抽象语法树和创建上下文解释器解析和执行AST ， 生成字节码 。 编译器针对需要反复执行的代码 ， 生成对应的机器码 ， 提高运行效率2.5.4生成渲染树（RenderTree）
在有了DOM树和CSSOM之后 ， 需要将两者结合生成渲染树RenderTree ， 并且这个过程会去除掉那些display:node的节点 。 此时 ， 渲染树就具备元素和元素的样式信息 。
2.5.5布局
根据RenderTree渲染树 ， 对树中每个节点进行计算 ， 确定每个节点在页面中的宽度、高度和位置 。
需要注意的是 ， 第一次确定节点的大小和位置的过程称为布局 ， 而第二次才被称为回流
推荐阅读
- 中国电子报智能传感器能占多大市场？，30万亿元智慧养老产业
- 长沙晚报打造“中国软件开发者产业中心城市”，长沙携手CSDN
- 数码狂人“云演唱会”会成为音乐产业新常态吗，5G+4K+VR+多视角技术融合
- 浙视频来看这份最新报告，想了解浙江人工智能产业发展全景
- 手机侃侃谈但王健林手里还有个世界第一产业，一年能赚800亿，去年亏7百亿
- 国商园区国贸电商产业园助力企业参展网上广交会
- 新龙网持续拓展5G、8K、半导体等产业边界，康佳科技创新步伐加快
- 燕赵都市报电商产业迅猛发展，肃宁：多措并举
- 雅格布别动不动就要做个平台、整合产业链
- 电商客节能产业加速度：全域节能增效化身“行业核动力”