资讯专栏INFORMATION COLUMN

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

you_De / 1450人阅读

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

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

一、获取IP地址

为什么要获取IP地址?

IP地址对应一台真实的物理机器,而且IP地址就像人的身份证是唯一的,用户请求服务器,只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆,因而使用较为语义化的域名来替代IP地址,而且一个域名可能对应了对个IP地址,比如用户输入www.baidu.com,该域名下对应了多个IP,域名解析服务器会根据一定的规则分配给用户其中一个IP地址。

首先会在浏览器的缓存中查找,是否缓存了URL,如果有,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;

在本地的hosts文件中是否保存了该URL和其对应的IP地址,如果保存了,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;

向本地DNS服务器(一般由本地网络接入服务器提供商提供,比如移动)发送DNS请求,本地DNS服务器会首先查询它的缓存记录,如果有就将该域名对应的IP地址返回给用户,如果没有则进行下一步;

首先向根域名服务器发送DNS查询请求,根域名服务器返回给可能保存了该域名的一级域名服务器地址;本地主机再根据返回的地址,向一级域名服务器发送DNS查询请求;...一直迭代,直到找到对应的域名存放的服务器,向其发送DNS查询请求,该域名服务器返回该域名对应的IP地址;

二、TCP/IP连接

三次握手:

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


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

客户端:我要请求数据可以吗?

服务器:可以的

客户端:好的

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

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

静态资源:如果客户端请求的是静态资源,则web服务器根据URL地址到服务器的对应路径下查找文件,然后给客户端返回一个HTTP响应,包括状态行、响应头和响应正文。

动态资源:如果客户端请求的是动态资源,则web服务器会调用CGI/VM执行程序完成相应的操作,如查询数据库,然后返回查询结果数据集,并将运行的结果--HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

四、浏览器渲染

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

解析HTML,构建DOM树

解析CSS,生成CSS规则树

合并DOM树和CSS规则树,生成render树

布局render树

绘制render数、树,即绘制页面像素信息

GPU将各层合成,结果呈现在浏览器窗口中。

五、四次挥手

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


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

客户端:我没有数据要发送了,打算断开连接

服务器:你的请求我收到了,我这还有数据没有发送完成,你等下

服务器:我的数据发送完毕,可以断开连接了

客户端:ok,你断开连接吧(客户端独白:我将在2倍的最大报文段生存时间后关闭连接。如果我再次收到服务器的消息,我就知道服务器没有收到我的这句话,我就再发送一遍)。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/35930.html

相关文章

  • 输入一个URL页面渲染流程简介

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

    niceforbear 评论0 收藏0
  • 输入一个URL页面渲染流程简介

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

    elliott_hu 评论0 收藏0
  • 【前端芝士树】浏览器搜索框输入网址网页呈现发生了什么?

    摘要:动态映射利用来进行域名解析,在专门的服务器上配置主机到地址的映射。前两者都无效的情况下,向路由器发送查询的请求,或者直接向用户定义的服务地址发送域名解析的请求。 【前端芝士树】从浏览器搜索框输入网址到网页呈现发生了什么? 这个也是在前端面试中问得比较多的一个问题了,文章篇幅有限尽可能关注一些前端开发中不太会遇到的知识点,如果想扩展的话请点击引用文章吧,也欢迎评论,后续会继续补充。 0....

    longmon 评论0 收藏0
  • 输入URL地址显示完整页面Webkit都做了哪些事情

    摘要:从输入地址到显示完整的页面都做了哪些事情从输入地址到获取到数据的流程输入地址如。从获取到数据到显示最终完整页面的流程在输入之后,依赖网络模块,资源加载器加载网页只要是能够解析的,都会把输入的地址资源当成解析。 从输入URL地址到显示完整的页面Webkit都做了哪些事情 从输入地址到获取到数据的流程 1、输入URL地址,如:http://www.yejm16361.com/demo......

    468122151 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    vvpvvp 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<