首页 > 其他分享 >说说地址栏输入 URL 敲下回车后发生了什么?

说说地址栏输入 URL 敲下回车后发生了什么?

时间:2024-04-03 18:56:33浏览次数:20  
标签:请求 URL 响应 服务器 解析 地址栏 回车 页面

一、简单分析

简单的分析,从输入 URL到回车后发生的行为如下:

  • URL解析
  • DNS 查询
  • TCP 连接
  • HTTP 请求
  • 响应请求
  • 页面渲染

二、详细分析

URL解析

首先判断你输入的是一个合法的URL 还是一个待搜索的关键词,并且根据你输入的内容进行对应操作

URL的解析第过程中的第一步,一个url的结构解析如下:

DNS查询

在之前文章中讲过DNS的查询,这里就不再讲述了

整个查询过程如下图所示:

最终,获取到了域名对应的目标服务器IP地址

TCP连接

在之前文章中,了解到tcp是一种面向有连接的传输层协议

在确定目标服务器服务器的IP地址后,则经历三次握手建立TCP连接,流程如下:

发送 http 请求

当建立tcp连接之后,就可以在这基础上进行通信,浏览器发送 http 请求到目标服务器

请求的内容包括:

  • 请求行
  • 请求头
  • 请求主体

响应请求

当服务器接收到浏览器的请求之后,就会进行逻辑操作,处理完成之后返回一个HTTP响应消息,包括:

  • 状态行
  • 响应头
  • 响应正文

在服务器响应之后,由于现在http默认开始长连接keep-alive,当页面关闭之后,tcp链接则会经过四次挥手完成断开

页面渲染

当浏览器接收到服务器响应的资源后,首先会对资源进行解析:

  • 查看响应头的信息,根据不同的指示做对应处理,比如重定向,存储cookie,解压gzip,缓存资源等等
  • 查看响应头的 Content-Type的值,根据不同的资源类型采用不同的解析方式

关于页面的渲染过程如下:

  • 解析HTML,构建 DOM 树
  • 解析 CSS ,生成 CSS 规则树
  • 合并 DOM 树和 CSS 规则,生成 render 树
  • 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
  • 绘制 render 树( paint ),绘制页面像素信息
  • 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上

参考文献

  • https://github.com/febobo/web-interview/issues/141
  • https://zhuanlan.zhihu.com/p/80551769

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

 

标签:请求,URL,响应,服务器,解析,地址栏,回车,页面
From: https://www.cnblogs.com/smileZAZ/p/18113349

相关文章

  • python使用request发送x-www-form-urlencoded类型的数据
    场景:当接口的Content-Type类型是x-www-form-urlencoded,使用json类型去请求,无法请求成功解决方法:使用parse.urlencode()方法对json数据进行解码处理,再传入。实例代码如下:importrequestsfromurllibimportparsesession=requests.session()headers={"Content-Type":"app......
  • url编码对照表和在线验证
    转自:https://blog.csdn.net/liuxl57805678/article/details/132335562在线验证链接:https://tool.ip138.com/urlencode/  有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的......
  • uniapp-设置UrlSchemes从外部浏览器H5打开app
    需求:外部浏览器H5页面,跳转到uniapp开发的原生app内部。1、uniapp内部的配置:(1)打开manifest->App常用其他设置,如下,按照提示输入您要设置的urlSchemes:(2)填写配置之后,可到manifest->源码试图查看,如下:(3)uniapp中修改了manifest配置之后,一定要重新打包,然后再运行到手机,否则可......
  • 【攻防技术系列】 linux没有curl / wget如何实现下载功能 ( 测试成功版 )
    最近在分析挖矿木马,发现挖矿木马在入侵后都会对系统自带的部分命令进行替换或劫持。最常见的就是将wget和curl命令重命名。在多个挖矿木马同时竞争的情况下,没有wget和curl该如何远程下载挖矿脚本呢?直接看挖矿脚本是如何实现的。这里面涵盖了很多知识点,非常值得学习!funct......
  • url图片转base64
    constbase64Str:string=awaitnewPromise(resolve=>{constimg=newImage()img.crossOrigin='anonymous';img.src=url;//图片链接img.onload=function(){constcanvas=document.createElement('canv......
  • 把请求参数放到 url 上
    get请求把查询条件放在url上现有功能,要求在前端传递一个id给后端,有下述两种情况加以区分:(/xxx/addYyy?id=${data})(/xxx/addYyy/${data})前端请求:(/xxx/addYyy?id=${data})这种id是作为查询参数(queryparameter)传递的。查询参数附加在URL的路径之后,以问号(?)开......
  • cURL error 60: SSL certificate problem: unable to get local issuer certificate
    阿里云短信window报cURLerror60:SSLcertificateproblem:unabletogetlocalissuercertificate原文链接:https://blog.csdn.net/qq_41408081/article/details/124309075序:帮客户接一个阿里云短信验证码提醒,新版的SDK,一下,折磨简单,在Windows上搞的差点心力交瘁,差点怀疑......
  • 【前端面试3+1】06继承方式及优缺点、缓存策略、url输入到渲染全过程、【二叉树中序遍
    一、继承有哪些方式?以及优缺点        继承的方式包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和组合式继承。1.原型链继承:实现方式:将子类的原型指向父类的实例来实现继承。优点:简单易懂,代码量少。缺点:存在引用类型共享的问题。functionPare......
  • @rollup/plugin-url 使用及原理介绍
    @rollup/plugin-url使用及原理介绍一款用于将导入的文件转换成data-uri或者es模块的插件。安装npminstall@rollup/plugin-url-D使用在rollup.config.js文件中引入插件并进行简单配置。importurlfrom'@rollup/plugin-url';exportdefault{input:'......
  • 当你在浏览其中输入一个网址回车后,发生了什么?
    当我们在浏览器中输入一个网址时,等访问结束后,就能看到对应的内容。那这个过程究竟发生了什么呢?域名解析首先,我们需要通过域名解析来获取对应的IP地址,因为访问一个机器需要知道它的IP地址。域名解析有三种渠道:域名解析的渠道有三种:缓存:包括浏览器缓存、操作系统缓存、运营商缓......