从输入 URL 到页面展示，这中间发生了什么？

[habc0807]

[Casseil-1996]

面试必考。至少要答到以下几个点。

• 通过域名查找IP的过程（host，dns，根服务器）
• 获取页面的过程（TCP）
• 渲染页面的过程（Dom树，样式树，渲染树，什么时候加载静态资源等）

[habc0807]

大致流程：

• 用户输入url，先校验是内容还是url，内容的话，就走默认搜索，否则根据url组装协议，构成完整的url，用户输入完成，按下回车键，浏览器导航显示loading状态，页面还是呈现的前一个页面；
• 浏览器进程构建请求行信息，通过PIC通信将url请求发送给网络进程 ；
• 网络进程接收到任务后，先进行强缓存的检查，如果有缓存文件则拦截该请求，直接使用缓存资源，并通知浏览器进程；否则，进入网络请求过程；
• 网络进程的流程是：先进行DNS域名解析，获取服务器的ip地址和端口号（http默认80, https默认443），然后利用IP地址和服务器建立tcp连接，构建请求头信息，发送请求信息，服务器响应后，网络进程接收到响应头和响应数据，并解析响应请求；
• 网络进程检查状态码，如果是301/302等重定向状态，则从Location中读取地址，进程一个新url的网络进程的处理；协商缓存生效，返回304；如果是200，则继续处理，通过content-type来区分资源类型，如果是字节流则将请求交给下载管理器，如果是html则通知浏览器进程准备渲染进程进行渲染；
• 渲染进程准备好，检查url是否是同一个站点，如果是则复用之前的进程，如果不同，则开启新的渲染进程，渲染进程准备好后，浏览器向渲染进程发起“提交文档的”信息，渲染进程接受到消息和网络进程建立PIC通信的数据管道，渲染进程接收完数据后向浏览器进程发送“确认提交”，浏览器进程接收到信息后，则更新浏览器loading状态、url、地址栏、前进后退的状态，更新web页面，此时的web页面是空白页面；
• 渲染进程对文档进行页面解析和子资源加载，html 通过HTML解析器转成DOM树，css会按照CSS的规则和CSS解析转成CSSOM 树，两个树结合，形成render树，再通过Layout计算出每个元素具体的宽高颜色位置等，结合起来，开始绘制，渲染进程将绘制好图层后通过PIC告知浏览器进程，浏览器进程通过显卡，将最终于的页面在屏幕中展示出来。