从输入URL到页面展示的浏览器过程

229 阅读3分钟

俗话说的好,温故而知新。我今天翻开了自己的笔记,非常不意外的发现我把之前所学的知识都忘得一干二净。因此萌生了写博客记录知识的想法,将知识进行梳理和总结,有助于加深记忆。 好了废话不多说,让我们进入正题。 来谈谈我对从输入URL到页面展示的浏览器过程的理解。

一、用户输入

首先是用户输入URL,浏览器判断输入的信息是搜索内容还是网址

1、URL:统一资源定位符

格式:<协议类型> : / /  <主机名> :<端口号> / <路径> ? <参数名># <锚点>

scheme  : / / host :port / path ? query # fragment

例如:blog.csdn.net/weixin_4479… 

2、用户输入内容之后,判断输入信息是否符合URL规则。

(1)如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带有搜索关键字的URL

(2)如果是符合URL规则的内容,根据URL协议(比如https),把这段内容加上协议,合成完整合法的URL

(3)此时浏览器导航栏显示loading状态,这是因为页面的响应数据还没有获得

二、查找DNS缓存、发起DNS查询

浏览器进程浏览器构建请求行信息

浏览器进程会通过进程间通信(IPC)将URL请求发送给网络进程,如:GET /index.html HTTP1.1 网络进程收到URL之后,浏览器寻找域名的IP地址,进行DNS解析

1、DNS解析过程

浏览器DNS缓存-->操作系统缓存-->路由器缓存-->DNS缓存-->如果都没有缓存,则运营商的DNS浏览器发起迭代DNS请求,查找域名对应IP

2、另外,如果是https请求,还需要建立TLS连接

三、建立TCP连接,发送HTTP请求到服务器

网络进程发起网络请求,也就是通过IP地址发起TCP连接(三次握手)

四、服务器接收请求、处理请求并发回响应

服务器收到报文后处理请求,同时返回响应数据

五、渲染页面

1、网络进程将获取到的数据包进行解析,根据响应头中的Content-type来判断响应数据的类型,如果是字节流类型,就将该请求交给下载管理器,该导航流程结束,不再进行;如果是text/html类型,就通知浏览器进程获取到文档准备渲染。

2、浏览器进程接收到网络进程的响应头数据之后,发送CommitNavigation消息到渲染进程,发送时携带响应头等基本信息。

3、渲染进程接收到CommitNavigation消息之后,便开始接收HTML数据,接收数据的方式是直接和网络进程建立数据管道

4、最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程,说已经准备好了

六、显示页面

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

2、渲染进程对文档进行页面解析和子资源加载,HTML 通过HTM 解析器转成DOM Tree(二叉树类似结构的东西),CSS按照CSS 规则和CSS解释器转成CSSOM TREE,两个tree结合,形成render tree(不包含HTML的具体元素和元素要画的具体位置),通过Layout可以计算出每个元素具体的宽高颜色位置,结合起来,开始绘制,最后显示在屏幕中新页面显示出来

至此,一个页面展示过程才基本完成。

通过本次对于这个看似简单的问题的学习,我发现里面串联了许多的知识,关于http协议,TCP连接,TLS连接,渲染过程等等。