浏览器从输入url到网页展现这过程发生了什么

从输入网址开始

当用户在浏览器的地址栏输入目标网站的网址时，浏览器会查找本地的缓存，从中找出与当前模糊匹配的一条条记录，然后显示在搜索提示的框框中，就像网页中有输入联想补全提示的 input 框一样。

浏览器缓存里面有一系列复杂的机制逻辑。想详细了解请翻阅 [ 浏览器缓存机制 ] 。

解析网址并获取 ip 地址

当用户输入网址并按下回车或者选择浏览器给的提示网址后，浏览器就会查找本地host文件、收藏夹、以往的历史记录、书签等，先看看有没有访问过这个网址，如果有就获取对应的网址ip，然后加载网页；
如果没有找到，就查找操作系统中的 DNS 缓存（如windows的hosts文件），再进行获取ip操作；
如果操作系统中也没有，就到本地网络 DNS 服务器查找，再进行获取ip操作；
如果还没有，就到 ISP（互联网服务提供商 Internet Service Provider） 的 DNS 服务器查找（迭代查询、递归查询），直到查到目标所在的服务器并返回ip为止；

[ DNS 解析详解 ] 中有详细的介绍如何将域名转化成 ip 地址。

与目标服务器建立TCP连接

TCP [ 什么是TCP? ] 连接是一种面向连接的、可靠的、基于字节流的传输层通信协议，使用 [ 三次握手 ] 建立连接。

三次握手的目的是确保连接的有效性，三次握手完成后就可以开始发送请求到目标服务器了，这里涉及到http请求与https请求。
服务器接收到请求，然后解析报文，根据内容进行一系列的优化操作（重定向相应、SEO优化等等），返回请求需要的数据。
本地服务器接收到响应报文就会传达给浏览器，浏览器再解析响应报文，根据报文头部中的信息决定是呈现页面、下载文件还是其他操作。

断开连接

TCP使用改进的 [ 四次挥手 ] 来释放连接。

到此，网络请求结束，浏览器拿到服务器发送的数据进行下一步流程。

浏览器渲染页面

浏览器构造

[ 浏览器 ] 由shell（用户界面、网络、UI后端、JavaScript解释器、XML解析器、数据存储）和内核（浏览器引擎、渲染引擎）组成，内核是浏览器的核心。不同的浏览器有不同的内核，ie 浏览器是 Trident，Firefox 浏览器是 Geoko（Mozilla自主研发的渲染引擎），Safari 和 Chrome 使用的是 webkit ，下面以 webkit 为例说说渲染流程。

webkit引擎渲染流程

当一个html文件被服务端传到浏览器时，webkit 引擎就要开始干活了，解析一个文件是极其复杂的，一个html文件可能包含了 javaScript 、Css 、Html 的内容，而一个页面从一片空白到渲染出美轮美奂的画面会经历繁琐的 [ 浏览器渲染页面流程 ] ，这里概括为以下的几个主要步骤：

构建对象模型
构建对象模型包含构建 DOM 树和构建 CSSOM 规则树，构建 DOM 树即渲染引擎使用 HTML 解析器（调用 XML 解析器）解析HTML（XML）文档，将各个 HTML（XML）元素逐个转化成 DOM 节点，从而生成 DOM 树。同时，渲染引擎使用 CSS 解析器解析外部 CSS 文件以及 HTML（XML）元素中的样式规则，元素中带有视觉指令的样式规则将用于下一步，以创建 CSSOM（CSS 对象模型）。

构建渲染树
渲染引擎将 DOM 树和 CSSOM 规则树结合，就生成了渲染树。
渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

布局渲染树
渲染树构建完毕之后，进入本阶段进行“布局”，也就是为每个节点分配一个应出现在屏幕上的确切坐标。

绘制渲染树
渲染引擎将遍历渲染树，并调用 UI 后端将每个节点绘制出来，将代码表达的内容呈现给用户。