浅析url从浏览器解析到页面过程

(浅析从url到浏览器解析直至页面过程)

浏览器的多进程架构

从浏览器输入 URL 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。

1. 浏览器主进程: 管理子进程、提供服务功能
2. 渲染进程：将HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他会为每一个tab页面创建一个渲染进程
3. GPU进程：本来是负责处理3Dcss的，后来慢慢的UI界面也交给GPU来绘制
4. 网络进程：就是负责网络请求，网络资源加载的进程
5. 插件进程：负责插件的运行的，因为插件很容易崩溃，把它放到独立的进程里不要让它影响别人

具体过程

1.输入url
用户输入url，处理输入信息：

如果为非url结构的字符串，交给浏览器默认引擎去搜索改字符串；

若为url结构的字符串，浏览器主进程会交给 网络进程 ,开始干活。
2.1查找浏览器缓存
网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-> IP -> TCP
2.2DNS解析
网络进程拿到url后，先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS，那么还需要建立TLS连接。
2.3建立TCP连接，三次握手
接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，向服务器发送请求。
3服务器响应
服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。
网络进程解析响应行和响应头信息的过程：
3.1重定向
如果响应行状态码为301（永久重定向）和302（临时），那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址，并重新发起网络请求。
3.2 响应数据处理
导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。
比如：若为application/octet-stream，则会按照下载类型来处理这个请求，导航结束。
若为text/html，这就告诉浏览器服务器返回的是html格式，浏览器会通知渲染进程，你要干活了。
4 准备渲染进程
默认情况，每个页面一个渲染进程。但若处于同一站点（同根域名+协议），那么渲染进程就会复用。
5提交文档
渲染进程准备好后，浏览器进程发出“提交文档的消息”，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。
等数据传输完成了，渲染进程会告诉浏览器进程，确认文档提交，这时候浏览器会更新页面，安全状态，url，前进后退的历史。
到这里导航结束，进入渲染阶段。
注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。

浏览器的渲染过程

1.浏览器无法直接读取html，需要先构建Dom树。

2.把读取到的css，变成浏览器可以理解的cssom树。
转换样式表中的属性值，使其标准化。2em 被解析成了 32px，red 被解析成了 rgb(255,0,0)，bold 被解析成了 700……
计算出 DOM 树中每个节点的具体样式。利用css继承、css优先级、css层叠规则等计算出来。

3.浏览器会先从DOM树的根节点开始遍历每个可见节点，并把这些节点添加到渲染树中。不可见的节点不会添加到渲染树，比如css设置了display为none 属性的节点。

4.根据生成的渲染树，进行布局（也可以叫做回流），得到各个节点在页面中的确切位置和大小。（自动重排）。布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小，所有相对的测量值也都会被转换为屏幕内的绝对像素值（重绘）。

5.生成分层树，页面都是一层一层叠加在一起形成的。比如一些复杂的css动画，z-index等，渲染引擎会为他们生成专用的图层，并生成对应的图层树。

6.构建完图层之后，渲染引擎会对图层树中的每个元素进行绘制。合成线程会把分层树的图层变成图块。

7.GPU的栅格化把视窗附近的图块变成位图，然后保存在GPU的进程中。（因为一个页面可能很大，而用户只能看到视口中页面的一部分，如果全部绘制开销会很大，所以合成线程会按照视口附近的图块来优先生成位图）

8.栅格化完成之后，浏览器进去GPU进程里取出页面内容显示在屏幕上，这就完成了渲染阶段

回流和重绘

回流:回流发生在浏览器渲染页面的过程里，由DOM树和样式计算出布局树的过程就叫做回流，这个步骤需要计算出每个元素的大小和位置（忽略display:none的元素）
重绘：我们将布局树和样式转换为屏幕上的实际像素，这个阶段就叫做重绘节点。所以，回流必定导致重绘，重绘却不一定回流，且回流的代价比重绘高。