从访问地址栏开始到页面渲染完成都经历了什么?

首先说从输入地址栏开始到拿到html页面都经历了什么。

  1. 浏览器从url中获取域名以及其他所需参数;
  2. 通过DNS解析,把域名转换成相应的ip;
  3. 通过IP查找到对应的服务器地址;
  4. 与服务器建立连接;
  5. 向服务器发送所需数据请求,并等待服务器给出回应;
  6. 服务器处理相应请求,并做出反应;
  7. 浏览器收到服务器响应,得到html代码;
  8. 渲染页面。

这个期间浏览器和服务器还分别做了三次握手和四次挥手的动作,

三次握手分别是:

  1. 建立连接,客户端向服务端发出请求,并等待确认;
  2. 服务器收到客户端请求,向客户端发送请求数据确认码;
  3. 客户端接收确认码,并给出确认请求回应,客户端和浏览器建立连接完成,数据传输开始。

四次挥手分别是:

  1. 客户端向服务器发送结束数据传递请求;
  2. 服务器收到请求返回一个确认码;
  3. 服务器关闭数据传递,并向客户端发送结果;
  4. 客户端收到服务器处理结果,数据传递结束。

当浏览器拿到html代码的时候,就开始渲染页面,渲染的流程大概如下:
html页面渲染是从上到下依次渲染,遇到外联的css文件或者js文件会分出另外一个线去做下载动作,下载的同时页面继续加载,当css文件或者js文件下载完成时,会停止渲染页面去做解析css文件和js文件的动作,解析完成后继续向下加载。浏览器会先去解析css文件和js文件是因为这些文件的内容可能会影响到dom树的结构,不至于发生页面混乱。

以上是浏览器从访问地址栏开始到渲染完成的基本过程,写的比较简单,中间还有许多的http交互没有写出来,我会伴随着学习一直更新这篇文章。

以上纯属个人理解,如果有问题或者错误,还请留言批注,我会及时更新改正。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值