详细解释:浏览器从输入URL通过浏览器显示发生了什么
时间 2021-08-15
标签
html
浏览器
缓存
安全
服务器
markdown
网络
布局
搜索引擎
spa
输入URL地址
- 用户输入地址后,浏览器判断输入信息是搜索仍是网址,若是是搜索内容则使用默认搜索引擎合成新的URL;若是输入的URL地址符合规则,浏览器根据URL协议,在这段内容加上协议合成合法URL,例如输入www.baidu.com,会加上协议合成
https://www.baidu.com
按下回车键
- 用户输入内容按下回车键后浏览器导航栏显示loading状态,页面上还显示着前一个页面的内容,这是由于请求的新页面尚未响应数据
构建请求
- 浏览器构建请求头和请求行信息
GET /index.html HTTP1.1
,经过进程间通讯(IPC)将URL请求发送给浏览器的网络进程
查找缓存
- 网络进程收到URL地址发起网络请求以前,在浏览器中查找是否有要请求的文件,若是本地有缓存副本则拦截请求,返回本地资源副本,并直接结束请求返回200。若是本地没有缓存,则进入网络请求过程
准备IP地址和端口
- 网络进程请求DNS返回域名对应的IP和端口号,若是以前DNS数据缓存服务缓存过当前域名信息,则直接返回缓存信息,不然发起请求获取根据域名解析出来的IP和端口号。若是没有端口号,则使用默认端口号,http使用80端口,https使用443端口。若是是https请求,还须要创建TLS链接。
Chrome浏览器的队列机制
- 同一域名同时最多只能创建6个TCP链接,若是在同一个域名下同时有超过6个的请求发生,则剩下的请求进入队列排队,直至进行中的请求完成,若是当前请求数少于6个,则直接创建TCP链接
发起请求
- 通过TCP三次握手即可以发起请求,而后http请求会加上TCP头部—包括源端口号,目的端口号和校验数据完整性的序号,向下层传输
- 网络层在数据包加上IP头部,包括源IP地址和目的IP地址,继续向下层传输
- 底层经过物理网络传输到目的服务器
目的服务器解析请求
- 目的服务器主机网络层接收到数据包解析出IP头部,识别数据部分,解包后开始向上传输到传输层
- 传输层获取到数据解析出TCP头部,识别端口,解包后向上传输到应用层
- 应用层HTTP解析出请求头和请求体,若是须要重定向,HTTP直接返回HTTP响应状态码301(永久重定向)或者302(临时重定向),同时在请求头Location字段附上重定向地址,浏览器进行重定向操做。若是不是重定向,服务器根据请求头中的
If-None-Match
的值判断请求资源是否被更新,若是没有更新返回304,告诉浏览器以前的缓存还可使用,不然就返回新数据200状态码,服务器能够在响应头中设置Cache-Control:Max-age=2000(单位:秒)
来让浏览器设置数据缓存时间。
- 数据最终又经过应用层—>传输层—>网络层—>底层—>底层—>网络层—>传输层—>应用层的顺序返回到浏览器的网络进程中
- 数据传输完成后,TCP四次挥手断开链接。若是浏览器或者服务器在请求头加上
Connection:Keep-Alive
字段则能够保持浏览器和服务器的链接状态,省去下次从新创建链接的时间。
浏览器解析响应数据
- 浏览器的网络进程得到数据包后根据响应头的
Content-Type
字段判断响应数据类型,若是是字节流类型则将请求交给下载管理器。若是是text/html类型,则通知浏览器进程获取到文档进行渲染。
- 浏览器进程收到通知,判断页面B是否从页面A打开而且判断A和B是不是同一个站点(根域名和协议同样就属于同一站点),若是知足条件则页面B和页面A共用同一个渲染进程,若是之后打开更多页面符合同一站点规则,则都复用页面A的渲染进程。不是同一站点,则新建一个单独的渲染进程。
- 浏览器收到确认提交的消息后便更新浏览器的页面状态,包括安全状态、URL地址,前进后退的历史状态,并更新页面。
- 渲染进程开始页面的渲染,HTML解析生成DOM树,CSS样式表转化为浏览器能看懂的styleSheets,计算出DOM节点的样式
- 建立布局树,计算元素布局信息
- 对布局树进行分层,生成分层树
- 为每一个图层生成绘制列表,将其提交到合成线程(属于渲染进程),合成线程将图层分红图块,并在光栅化线程池中将图块转化成位图
- 合成线程发送绘制图块命令DrawQuad给浏览器进程,浏览器进程收到信息后生成页面并显示。