从输入一个URL到页面展示这期间发生了什么？

chrome进程

我们先了解一下多进程浏览器打开页面后都有哪些进程？从图中可以看出，现在的chrome浏览器包括：一个浏览器主进程、多个渲染进程、多个插件进程、网络进程、1个GPU进程。

1.浏览器进程：主要负责界面显示、用户交互、子进程管理、提供存储功能等功能

2.渲染进程：将HTML、CSS、Javascript转换为用户可以交互的界面，默认情况下，chrome会为每个Tab标签提供一个渲染进程，渲染进程是运行在沙箱模式下

3.GPU进程：chrome的UI界面都选择使用GPU来绘制

4.网络进程：负责页面的网络资源加载

5.插件进程：负责插件的运行，因为插件的易崩溃，所以需要通过插件进程来隔离，已保证插件崩溃时，不会影响浏览器以及其他页面资源

（如果是同一站点，从A页面点到B页面，此时，两个页面同用一个渲染进程，如果两个页面的站点不同，会是两个渲染进程，如果页面中有iframe，iframe也会自己占用一个进程）

从用户输入URL到页面显示发生了什么？

1. 用户输入URL，浏览器会根据用户输入的信息判定是搜索还是网址。如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL。

2. 用户输入完内容，按下回车键，浏览器导航栏显示loading状态。但是此时页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得。

3. 浏览器进程通过进程间通信（IPC）把URL发送给网络请求。

4. 网络请求接收到URL请求后会检查本地缓存是否缓存了该资源。如果有，那么拦截请求，返回状态值200，并将该资源返回给浏览器进程。

5. 否则的话，网络进程会向WEB服务器发起http请求（网络请求），流程如下：
   5.1：进行DNS解析，返回对应的域名，对应的IP和端口号。如果之前DNS数据缓存服务器缓存过当前域名信息，就会直接返回缓存信息；否则发起请求获取根据域名解析出来的IP和端口号；
   5.2：利用IP地址和服务器建立TCP连接。（由于chrome机制，统一域名同时最多只能建立6个TCP连接，少于6个可直接建立）
   5.3:建立请求头信息。http请求加上TCP头部----包括源端口号，目的程序端口号和用于校验数据的完整性的序号，向下传输。
   5.4：发送请求头信息。
   5.5：服务器响应后，网络进程接收响应头和响应信息，并解析响应内容。

6. 网络进程解析响应流程。
   6.1：检查状态码，如果为301/302，则需重定向。从Location中读取地址，重新操作第四步。
   6.2：为200，需要检查响应类型Content-Type,如果为字节流类型，则将该请求提交给下载管理器，改导航流程结束，也不会进行后续的渲染；如果是html，渲染进程将会准备。

7. 渲染进程准备：浏览器会检查当前URL是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程。

8. 浏览器会发出“提交文档”的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。

9. 浏览器进程收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态，地址栏的URL，前进后退的历史状态，并更新web页面，此时web页面是空白页。

10. 渲染进程对文档进行页面解析及子资源加载：
    10.1：HTML通过HTML解析器转成DOM Tree；
    10.2：CSS按照CSS规则和CSS解析器转成CSSOM Tree；
    10.3：两个Tree相结合，形成Render Tree；
    10.4：通过Layout可以计算出每个元素的具体宽高，结合起来，开始绘制，最后显示在新页面中。