【面试题】从输入url到看见页面,中间经历了什么?

184 阅读3分钟

image.png

一、url解析

浏览器判断输入的关键字是搜索内容,还是url? 如果是搜素内容,地址也会用浏览器的默认搜索引擎,合成带关键字的url; 如果输入内容符合url规则,地址栏会把内容加上协议,合成完整的url。

浏览器将url解析为协议、网络地址、资源路径

二、缓存检查

浏览器会通过进程间通信,把url请求发送至网络进程,网络进程收到请求后,会查看本地是否有缓存资源。如有,则直接将缓存资源返回给浏览器进程;如果没有,则进入网络请求进程;

强缓存: image.png

协商缓存: image.png

三、DNS解析

根据浏览器解析出的域名,到DNS服务器上,查找出对应的服务器外网IP地址。

浏览器提供了DNS缓存服务,如果某个域名已经解析过,浏览器会缓存解析的结果,以备下次查询时使用。

四、TCP三次握手

第一次:客户端发送syn包给服务器,并进入syn_send状态

第二次:服务器接收到syn包并确认,然后再发送syn+ack包给客户端。

第三次:客户端收到,并向服务器端发送ack确认包。进入established状态。通道建立,进入正式传输数据阶段

如果是UDP协议,则直接建立连接

五、数据传输

浏览器构建请求头、请求行信息,并将域名相关的cookies等数据附加到请求头中,然后向服务器发送构建的请求信息。

服务器接收到请求信息后,会根据请求信息,生成响应数据,并发送给网络进程。网络进程接收到响应头和响应行之后,开始解析响应头。

重定向

如果发现返回的状态码是301或者302,则需要根据请求头location的地址重定向

响应数据类型处理

处理完跳转信息之后,浏览器会根据content-type字段,区分是下载类型还是正常的html页面。 如果是下载类型,则该请求会被提交给浏览器的下载管理器,同时该请求到此结束。 如果是HTML页面,则接下来需进入准备渲染进程

准备渲染进程

默认情况下,Chrome浏览器会为每一个页面准备一个进程;但是如果从一个页面打开一个新页面,且两个页面处于同一个站点之下,则新页面会复用父页面的渲染进程。

提交文档

浏览器进程接收到渲染进程提交文档的请求后,会清理旧文档,发出确认请求的消息给渲染进程。同时浏览器进程会更新浏览器界面状态,包括安全状态,地址栏url,前进后退历史状态,以及web页面

六、四次挥手

四次挥手,关闭通道

image.png

七、页面渲染

构建dom树

样式计算

把css转换为浏览器可识别的styleSheet文件; 换算表中的属性值,使其标准化; 计算出在dom树种每个节点的位置

布局

创建布局树; 布局计算;

分层

图层绘制

raster操作

合成和显示