从输入一个URL到页面渲染的流程简介

news/2024/6/18 21:38:52 标签: 运维, 数据库, 网络

首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽
从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善。

一、获取IP地址

为什么要获取IP地址?

IP地址对应一台真实的物理机器,而且IP地址就像人的身份证是唯一的,用户请求服务器,只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆,因而使用较为语义化的域名来替代IP地址,而且一个域名可能对应了对个IP地址,比如用户输入www.baidu.com,该域名下对应了多个IP,域名解析服务器会根据一定的规则分配给用户其中一个IP地址。
  1. 首先会在浏览器的缓存中查找,是否缓存了URL,如果有,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;
  2. 在本地的hosts文件中是否保存了该URL和其对应的IP地址,如果保存了,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;
  3. 向本地DNS服务器(一般由本地网络接入服务器提供商提供,比如移动)发送DNS请求,本地DNS服务器会首先查询它的缓存记录,如果有就将该域名对应的IP地址返回给用户,如果没有则进行下一步;
  4. 首先向根域名服务器发送DNS查询请求,根域名服务器返回给可能保存了该域名的一级域名服务器地址;本地主机再根据返回的地址,向一级域名服务器发送DNS查询请求;...一直迭代,直到找到对应的域名存放的服务器,向其发送DNS查询请求,该域名服务器返回该域名对应的IP地址;

二、TCP/IP连接

三次握手:

为什么要进行三次握手?如果是两次握手,如下面的对话只有前两句,有可能出现的问题是:客户端之前发送了一个连接请求报文,由于网络原因滞留在网络中,后来到达服务器端,服务器接收到该请求,就会建立连接,等待客户端传送数据。而此时客户端压根就不知道发生了什么,白白造成了服务器资源浪费。

clipboard.png
注:图片来源于https://baijiahao.baidu.com/s...

  1. 客户端:我要请求数据可以吗?
  2. 服务器:可以的
  3. 客户端:好的

三、浏览器向web服务器发送http请求

客户机与服务器建立连接后就可以通信了,这里就暂时先不详细展开说http请求了。讲下客户端请求静态资源和动态资源。

  1. 静态资源:如果客户端请求的是静态资源,则web服务器根据URL地址到服务器的对应路径下查找文件,然后给客户端返回一个HTTP响应,包括状态行、响应头和响应正文。
  2. 动态资源:如果客户端请求的是动态资源,则web服务器会调用CGI/VM执行程序完成相应的操作,如查询数据库,然后返回查询结果数据集,并将运行的结果--HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

四、浏览器渲染

浏览器拿到HTML文件后,根据渲染规则进行渲染:

  1. 解析HTML,构建DOM树
  2. 解析CSS,生成CSS规则树
  3. 合并DOM树和CSS规则树,生成render树
  4. 布局render树
  5. 绘制render数、树,即绘制页面像素信息
  6. GPU将各层合成,结果呈现在浏览器窗口中。

五、四次挥手

客户端没有数据发送时就需要断开连接,以释放服务器资源。

clipboard.png
注:图片来源于https://baijiahao.baidu.com/s...

  1. 客户端:我没有数据要发送了,打算断开连接
  2. 服务器:你的请求我收到了,我这还有数据没有发送完成,你等下
  3. 服务器:我的数据发送完毕,可以断开连接了
  4. 客户端:ok,你断开连接吧(客户端独白:我将在2倍的最大报文段生存时间后关闭连接。如果我再次收到服务器的消息,我就知道服务器没有收到我的这句话,我就再发送一遍)。

最终服务器收到该客户端发送的消息断开连接,客户端也关闭连接。


http://www.niftyadmin.cn/n/1409598.html

相关文章

提供一批ip供另外一个局域网做互通_演播室IP信号视频传输解决方案

演播室是电视节目制作的常规基地,演播室的节目制作过程中,大部分是摄像机与制作中心使用SDI视频线连接。视频传输需要的带宽和线缆问题愈发突出,电视台现有的以SDI基带视频接口和专用SDI数字视频矩阵为基础的技术架构已难以满足。随着融合媒体…

More-iOS国际化一站式解决方案

title: More-iOS国际化一站式解决方案 date: 2018-04-10 21:10:40 tags: iOS国际化关于iOS开发中的国际化(也可称为多语言)在网上的文章多如牛毛,不过总结起来就那么一回事,不是说他们写的不好我写的多好,而是说过于零…

id3决策树 鸢尾花 python_30分钟理解决策树的基本原理

文章发布于公号【数智物语】 (ID:decision_engine),关注公号不错过每一篇干货。来源 | Python与算法之美(ID:Python_Ai_Road)作者 | 梁云1991决策树是一种非参数的监督学习方法,它主要用于分类和回归问题。决策树模型通过一系列if…

Flutter路由传参

Flutter路由传参1、普通路由2、路由拦截onGenerateRoute1、普通路由 //main.dart routes: routes,// 路由跳转 onTap: () {// 跳转到任务详情页Navigator.of(context).pushNamed(taskDetail,arguments:listViewData[index]); },// 接收参数,在Widget中 Text(ModalR…

TCP/IP基础总结性学习(4)

返回结果的 HTTP 状态码 一.简单介绍: 总述:HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端的处理是否正常、通知出现的错误等工作。状态码构成:以 3 位数字和原因短语组成。数字中的第一位指定了响应类别,后两位无…

xgboost算法_手把手机器学习实战系列:xgboost 算法

算法简介xgboost算法是一种boosting的集成学习算法,是将多个弱学习模型进行组合,从而获得更好的效果,使得组合后的模型有更强的泛化能力, 它通常是由基本的回归树(CART)树模型组成如图所示:通过输入用户的年龄,性别来判…

python计划任务

2019独角兽企业重金招聘Python工程师标准>>> APScheduler模块不同于python-crontab模块,它不会在系统上创建任何cronjob,所有任务将在运行时执行。 APScheduler是基于Quartz的一个Python定时任务框架,实现了Quartz的所有功能,使用…

Flutter日期时间

Flutter日期时间1、日期选择器2、当前时间3、UTC时间4、时间戳转日期1、日期选择器 //日期选择flutter_datetime_picker: ^1.5.1//日期格式化date_format: ^2.0.4// showDatePicker、showTimePicker、showDateTimePicker TextButton(onPressed: () {DatePicker.showDateTimePic…