浏览器输入一个url到页面显示发生了什么?

12 篇文章 0 订阅
4 篇文章 0 订阅

URL解析

首先浏览器会对Url进行解析,这过程中,保留字符(保留字符指& = + $ , / ?等不被转换就会造成url有歧义的字符)会被进行转义(encodeURIComponent:是范围更广的转义api,能够将保留字符转义为UTF-8的字符)

根据dns进行ip查找

  • 例如输入的是www.baidu.com,系统会先去hosts查看相应记录返回对应ip值(操作系统的hosts文件可配置域名对应ip,例如配置github的ip可加速访问giehub)
  • 如果在上一步没找到,会查找本地的dns解析缓存,否则继续向上查找
  • 查找本地dns服务器
  • 查找根dns域名服务器、返回。com域服务器地址,。com域服务器会告诉本地服务器域名解析服务器的地址,最后查询到真正的ip地址后返回用户,并缓存ip
    前端可使用dns预解析加快dns解析的速度
// 打开和关闭DNS预读取
<meta http-equiv="x-dns-prefetch-control" content="off">
// 强制查询特定主机名
<link rel="dns-prefetch" href="//hm.baidu.com">

http请求

HTTP和HTTPS的简单了解
http是基于tcp/ip协议的超文本传输协议,在这个 过程中会经历tcp的三次握手

  • 第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认;
  • 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
  • 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。
    到达web服务器。

这其中路过了应用层、传输层、网络层、数据链路层和物理层(七层网络模型

缓存

如果之前已经请求过的url浏览器会查看是否命中强制缓存,如果没有与浏览器进行协商缓存,以此来减少网络带宽消耗、降低服务器压力、减少延迟,加快打开页面

关闭tcp链接

执行tcp的四次挥手完成传输任务

解析html

浏览器需要解析html文件才能生成页面

  • 从上到下根据HTML文件构建DOM树
  • 构建CSSOM(CSS Object Model)树:加载解析样式
  • 合并DOM树和CSSOM树,生成渲染树(去除不显示的节点:去除head、display为none的节点)
  • 解析css的同时会继续解析HTML文件,但是遇到js脚本时,会阻塞后续的解析,所以一般将script标签放在dom节点的后面
  • 浏览器布局渲染浏览器重绘和重排

这就是一个大概的过程,还有不重复的部分欢迎指正,我也会不断补充

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霜叶w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值