从输入一个url到页面出现内容发生了什么

浏览器是多进程架构的，分为主进程（处理用户输入，交互等），网络进程，渲染进程（处理页面加载），GPU进程（处理图形），那么，从输入一个url到页面出现内容主要有以下几个步骤。

1. 浏览器主进程处理用户输入，并将输入传输给网络进程

当用户在导航栏上输入一串字符后，首先浏览器主进程会判断这串字符是否是合法的url地址，如果不是，就会调用搜索引擎，如果是则作相应处理，比如www.baidu.com浏览器会自动帮你把http://这个协议补充上，接着主进程就可以将这个完整的url地址发送给网络进程了。

2. 网络进程接收地址，收集到相应数据（可能来自缓存，也有可能来自服务器），并将数据传输给渲染进程

2.1 处理缓存

当拿到一个url地址后，网络进程并不会立即发送请求去访问服务器，而是先看要经历缓存。首先我们先分析有缓存的情况下，缓存分为强缓存和弱缓存，强缓存即不需要走网络，直接使用本地缓存的情况，由expires和cache-control两个响应头控制，expires保存了一个时间点，使用时将于现在这个时间点进行比对，如果大于当前时间点，则说明缓存有效，则直接使用本地缓存，cache-control和expires是类似的，cache-control控制的更为精细，并且如果同时有cache-control和expires，优先使用cache-control进行缓存判断，如果强缓存判定有效，就会直接使用本地缓存，并不会访问网络，而如果强缓存判定无效，则进入协商缓存，所谓的协商缓存即发送一个请求去询问服务器我电脑本地的缓存是否是有效的，如果有效则使用本地缓存，那么服务器是如何判断用户本地的缓存是否有效呢?有last-modefied和etag两种机制，last-modefied即该资源在服务器上的最后修改时间，用户询问时把本地缓存的last-modefied发送给服务器，服务器找到该资源，查看该资源的最后修改时间，如果一致说明服务器并没有修改过这个资源，证明用户本地的缓存是没有过期的，反之则不然，因为时间的精度是有限的，所以last-modefied仅通过对比最后修改时间做出缓存是否有效的决定不是很靠谱，后来就有了etag机制，etag机制是根据文件算一个hash值，通过对比用户发送来的hash和服务器的hash来判读缓存是否失效。经过缓存有效与否的判定之后，若有效则直接将缓存发送给渲染进程，若无效，则进入发送请求的流程。

2.2 DNS域名解析

我们要发送请求，是需要知道服务器的地址是什么的，即ip地址，我们现在的url是一串字符串，这是为了方便人类记忆的，所以我们需要将这串字符串翻译成ip地址，DNS系统就是用来做这件事的。

处理DNS之前也要先看本地有没有缓存，缓存分浏览器级别，用户本地级别，浏览器会保存一部分缓存，而用户本地的host目录下也会保存一部分缓存，访问之前先看浏览器有没有缓存，再看用户本地有没有缓存，如果有就直接返回ip，如果没有则访问dns系统（这也是一个远程服务器，保存了ip和域名的对应关系）

经过域名解析之后，我们成功获得了服务器的ip地址，就可以建立tcp/ip连接了！

2.3 tcp/ip连接的建立

浏览器访问服务器用的不是http协议么？怎么又会有个tcp/ip协议呢？其实http协议是应用层的协议，是建立在tcp/ip协议之上的，我简单说下这几个协议的关系，ip协议是网络层协议，规定了每个主机要有唯一的ip地址，但是大家想想光有ip没用啊，数据倒是到达了目标ip了，但是数据给哪个应用呢？是浏览器需要数据，还是某个桌面应用程序需要数据？这时候就需要tcp协议了，tcp是传输层协议，规定了每个应用要有端口号，通过端口号即可定位到目标应用程序，最后到http协议了，这是应用层协议，他具体规定了交互双方的数据格式应该是怎样的，详细的，http规定了每次请求要有请求行，请求头，请求体，每次相应要有响应行，响应头，响应体等等。

所以在建立http之前，我们需要建立tcp/ip连接，建立连接需要三次握手，建立好连接后，就可以正式的传输数据了，接收到数据的网络进程把数据传输给渲染进程。

3. 渲染进程处理数据

文件有很多种类型，不同类型的文件的处理方式是不同的，响应报文通过content-type这个属性值来告诉浏览器，该文件是什么类型的。

3.1 遇到html，构建dom树

3.2 样式计算

    3.2.1 将css转化成浏览器可以理解的结构 

    当引入css时，渲染进程会把css先处理成stylesheets，可通过document.stylesheets进行查看

    3.2.2 将stylesheets标准化

   举个例子，比如字体font:bold，标准化即将其转化化font:500

   3.2.3

    计算出 DOM 树中每个节点的具体样式

 3.3 布局阶段

3.3.1 构建布局树（将刚刚的stylesheets与dom树结合，生成一个只包含可见元素的布局树）

3.3.2 布局计算 （计算几何位置）

页面是由很多图层组成的，浏览器采取的策略是绘制一个个图层，再将他们叠加起来，图层可根据布局树生成。

总体来说 html css的处理就像一个流水工程，dom => style => layout => layer => paint。