当输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?

简介: 当输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?键盘到操作系统、操作系统到浏览器、浏览器到服务器、服务器返回数据页面渲染……

键盘到操作系统


回车键按下时,与键盘相关的电路闭合,通过消抖操作,键盘的电路系统将回车键转化为键码13。按键被按下会触发中断事件,回车键的键码被编码并通过通用串行总线(USB)传输到中断请求线上(IRQ),中断控制器接收到IRQ上的信号后,会映射一个中断向量。中断描述符表将中断向量映射到对应的处理函数上(中断处理器)。


操作系统到浏览器

操作系统通过相应的API函数获取到当前的活动窗口(该浏览器)并获取到当前浏览器地址栏句柄,操作系统使用sendMessage函数将消息添加到地址栏句柄的消息队列中,sendMessage函数参数将带有按键以及按键的信息。然后浏览器地址栏句柄的消息处理函数将被调用,处理消息队列中的消息。


浏览器到服务器


处理URL


关键字or地址:浏览器搜先分析地址栏的内容是关键字还是URL。若地址栏的为关键字,则使用浏览器的搜索引擎搜索该关键字。当把文字作为关键字传递给搜索引擎时,通常会在URL后面加上一个参数,这个参数告诉搜索引擎搜索来自哪个浏览器。

HSTS列表: HSTS强制客户端使用HTTPS与服务器创建连接。若访问的URL在HSTS列表里,则浏览器会把HTTP协议变为HTTPS。

683cd4630fa740f49e632bbe871aa4da.png


编码: 对URL进行Unicode编码


DNS查询


浏览器处理完URL后,将获取要访问的URL所在服务器的地址。这时需要进行DNS查询。


DNS查询过程:


1.查询本地DNS缓存

2.查看本地host表

3.查询DNS服务器在DNS服务器上进行查询时,首先查询本地DNS服务器。若本地DNS 服务器上有域名的缓存,则本地DNS服务器将对应IP发送给查询方。若本地DNS服务器上没有域名的缓存,则向根域名服务器发起查询(递归)。根域名服务器收到请求后,会返回下一级域名信息的DNS服务器地址。本地DNS服务器收到地址后继续进行查询(迭代),最后获取到目标域名的IP并发送给查询方。

image.png


TCP连接


此时获取到URL中域名的IP地址,通过协议可以获取到端口(HTTP:80、HTTPS:443),下一步该进行浏览器与服务器之间的连接。


浏览器使用socket函数来进行TCP连接,初始化socket时参数为 AF_INET和SOCK_STREAM。


TCP建立连接过程(三次握手):


1.客户端发送一个TCP包。设置SYN=1(请求建立连接)、Seq=X(随机产生的序列号)

2.服务器发回确认包(ACK)应答。SYN=1、ACK=1、ACK number = X+1、Seq = Y(随机产生)

3.客户端再次发送确认包(ACK) 。SYN=0、ACK=1、ACK number= Y+1、Seq = X+1

image.png


TCP断开连接过程(四次挥手):


1.客户机给服务器一个FIN为1的TCP报文

2.服务器返回给客户端一个确认ACK报文

3.服务器给客户端发送一个FIN报文

4.客户机回复ACK报文


服务器动作


从浏览器发起请求到请求到页面数据的过程中,可能会经过负载均衡等中间部分


负载均衡


image.png


请求处理


1.服务器收到请求后将请求解析为:请求方法、域名、请求路径

2.服务器找到该域名对应的虚拟主机,并验证该虚拟主机是否可以使用该请求方法

3.服务器获取请求路径对应的内容,并根据内容使用指定的程序来处理(e.g.使用不同的程序解析PHP、JSP等文件),将输出的结果发送给浏览器


PLUS - 请求方法


image.png


浏览器页面渲染


浏览器收到服务器返回的页面数据后,开始对页面进行渲染


浏览器进程与线程


浏览器是多进程的,用于页面显示的有Browser进程、第三方插件进程、GPU进程(3D绘制等)、浏览器渲染进程(浏览器内核,每个Tab页面都有一个渲染进程)。


浏览器渲染进程包含的线程:


GUI渲染线程

JS引擎线程

事件触发线程

定时器触发器线程

异步http请求线程注意: JavaScript可以操作DOM,如果修改元素的时候同时渲染页面,就可能出现不可预料的结果,所以GUI渲染线程与JS引擎线程是互斥的


浏览器渲染页面过程


1.解析HTML建立dom树

2.解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)

3.布局render树(确定每个节点在屏幕上的位置)

4.绘制render树(遍历render树,并使用UI后端层绘制每个节点)

 image.png


image.png


CSS加载是否会阻塞dom树渲染?


css加载不会阻塞DOM树解析

css加载会阻塞render树渲染


回流和重绘


回流:浏览器重新渲染部分或全部文档的过程

重绘:元素改变的样式不影响元素位置时,浏览器将新样式赋予给元素并重新绘制它的过程

相关实践学习
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。     相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
目录
相关文章
|
缓存 网络协议 JavaScript
浏览器输入 URL 后的那些事儿
本文介绍了浏览器输入URL后到页面展示的完整过程,涵盖DNS解析、TCP三次握手、HTTP请求与响应、以及浏览器渲染等关键步骤。首先,浏览器通过DNS解析将域名转换为IP地址;接着,通过TCP三次握手建立连接;随后发送HTTP请求获取网页内容;最后,浏览器解析HTML、CSS并构建渲染树,完成页面渲染。整个过程涉及网络协议和浏览器内部机制的协同工作。
633 13
|
缓存 网络协议 JavaScript
浏览器输入url之后最后网页渲染出来经过了什么
【10月更文挑战第31天】从浏览器输入 URL 到网页渲染出来是一个涉及多个环节和技术的复杂过程,每个环节都对最终的网页显示效果和用户体验有着重要的影响。
298 3
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
缓存 网络协议 前端开发
浏览器输入一个URL后,发生了什么?
浏览器输入一个URL后,发生了什么?
666 1
|
缓存 网络协议 JavaScript
第八问:在浏览器中输入URL后发生了什么?
当在浏览器中输入URL并按下回车键时,会经历一系列复杂的过程:1. 用户输入URL;2. DNS解析域名;3. 建立TCP连接;4. 发送HTTP/HTTPS请求;5. 服务器处理请求;6. 浏览器渲染页面;7. 页面展示。每个步骤涉及不同的技术和协议,确保数据的准确传输和页面的正确显示。
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
508 5
|
域名解析 缓存 网络协议
浏览器输入 URL 回车后会经历哪些步骤?
本文首发于微信公众号“前端徐徐”,详细解析了从在浏览器中输入URL到页面完全呈现的全过程,涵盖检查缓存、URL解析、DNS解析、TCP连接、HTTP请求、服务器响应、浏览器处理响应、页面解析与渲染、关闭TCP连接等关键步骤。通过这些步骤,帮助读者深入了解互联网的工作原理,提升网站性能和用户体验。
640 0
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
485 0
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
987 156