输入 url 到页面展示的短短几秒内浏览器究竟作了什么？

面试的时候，咱们常常会被问从在浏览器地址栏中输入 url 到页面展示的短短几秒内浏览器究竟作了什么？那么浏览器到底作了啥？

浏览器的多进程架构
一个好的程序经常被划分为几个相互独立又彼此配合的模块，浏览器也是如此，以 Chrome 为例，它由多个进程组成，每一个进程都有本身核心的职责，它们相互配合完成浏览器的总体功能，每一个进程中又包含多个线程，一个进程内的多个线程也会协同工做，配合完成所在进程的职责。

具体说来，Chrome 的主要进程及其职责以下： 
Browser Process： 负责包括地址栏，书签栏，前进后退按钮等部分的工做； 负责处理浏览器的一些不可见的底层操做，好比网络请求和文件访问； 
Renderer Process： 负责一个 tab 内关于网页呈现的全部事情 
Plugin Process： 负责控制一个网页用到的全部插件，如 flash 
GPU Process 负责处理 GPU 相关的任务

咱们知道浏览器 Tab 外的工做主要由 Browser Process 掌控，
Browser Process 又对这些工做进一步划分，使用不一样线程进行处理： 
UI thread ： 控制浏览器上的按钮及输入框； 
network thread: 处理网络请求，从网上获取数据； 
storage thread: 控制文件等的访问；

当咱们输入url，浏览器开始工做

因此 network thread 会执行 DNS 查询，随后为请求创建 TCP 链接。

在上述过程再细化为

1. 浏览器搜索本身的 DNS 缓存。
2. 在浏览器缓存中没找到，就在操做系统缓存中查找，这一步中也会查找本机的 hosts 看看有没有对应的域名映射。（所谓的改hosts的原理！！！）
3. 在系统中也没有的话，就到你的路由器来查找，由于路由器通常也会有本身的 DNS 缓存。
4. 若没有，则操做系统将域名发送至 本地域名服务器——递归查询方式，本地域名服务器 查询本身的 DNS缓存，查找成功则返回结果，不然，采用迭代查询方式。本地域名服务器通常都是你的网络接入服务器商提供，好比中国电信，中国移动。
5. 本地域名服务器 将获得的 IP 地址返回给操做系统，同时本身也将 IP 地址缓存起来。
6. 操做系统将 IP 地址返回给浏览器，同时本身也将 IP 地址缓存起来，以备下次别的用户查询时，能够直接返回结果，加快网络访问。

至此，浏览器已经获得了域名对应的 IP 地址。开始创建 TCP 链接，进行三次握手

三次握手的步骤：（抽象派）

客户端：hello，你是server么？
服务端：hello，我是server，你是client么
客户端：yes，我是client

通过一系列检查和数据请求，确认数据以及渲染进程均可用了， Browser Process（进程） 会给 Renderer Process（进程） 发送消息，页面加载和渲染过程开始。

渲染步骤大体能够分为如下几步：

1. 解析HTML，构建 DOM 树
2. 解析 CSS ，生成 CSS 规则树
3. 合并 DOM 树和 CSS 规则，生成 render 树
4. 布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算
5. 绘制 render 树（ paint ），绘制页面像素信息
6. 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上

构造 DOM 树

浏览器在解析html文件时, 是WebKit 中的 HTML 解释器的将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。具体过程以下 ：

在 WebKit 中这一过程以下：首先是字节流，通过解码以后是字符流，而后经过词法分析器会被解释成词语（Tokens），以后通过语法分析器构建成节点，最后这些节点被组建成一棵 DOM 树。

浏览器在解析html文件过程当中，会 ”自上而下“ 加载，并在加载过程当中进行解析渲染。在解析过程当中，若是遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载，且统一交由 Browser 进程来处理，这使得资源在不一样网页间的共享变得很容易。

解释 CSS

CSS 解释过程是指从 CSS 字符串 通过 CSS 解释器 处理后变成渲染引擎内部规则的表示过程。

生成样式规则以后，会进行样式规则匹配，WebKit 会为其中的一些节点（只限于可视节点）选择合适的样式信息，规则的匹配则是由 ElementRuleCollector 类来计算并得到，它根据元素的属性等，并从 DocumentRuleSets 类中获取规则集合，依次按照 ID、类别、标签等选择器信息逐次匹配得到元素的样式。

最后，WebKit 对这些规则进行排序。对于该元素须要的样式属性，WebKit 选择从高优先级规则中选取，并将样式属性值返回。

从整个网页的加载和渲染过程来看，CSS 解释和规则匹配处于 DOM 树创建以后，RenderObject 树创建以前，CSS 解释器解释后的结果会保存起来，而后 RenderObject 树基于该结果来进行规范匹配和布局计算。当网页有用户交互或者动画等动做的时候，经过 CSSDOM 等技术，JavaScript 代码一样能够很是方便地修改 CSS 代码，WebKit 此时须要从新解释样式并重复以上这一过程。

回流与重绘

当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)。每一个页面至少须要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

注意：回流必将引发重绘，而重绘不必定会引发回流。

回流什么时候发生：

当页面布局和几何属性改变时就须要回流。下述状况会发生浏览器回流：

一、添加或者删除可见的DOM元素；

二、元素位置改变；

三、元素尺寸改变——边距、填充、边框、宽度和高度

四、内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变；

五、页面渲染初始化；

六、浏览器窗口尺寸改变——resize事件发生时；

因此绘制 render 树的过程当中会发生屡次回流与重绘。另外避免回流与重绘也是web优化技巧之一。

参考连接 ：
图解浏览器的基本工做原理 - 知乎
https://zhuanlan.zhihu.com/p/...
面试题之从敲入 URL 到浏览器渲染完成 - 全栈修炼 - SegmentFault 思否
https://segmentfault.com/a/11...
HTTP请求过程-域名解析和TCP三次握手创建连接 - 小Cai先森 - 博客园
https://www.cnblogs.com/caijh...
页面重绘和回流以及优化-WEB前端开发
https://www.css88.com/archive...