浏览器从输入 url 到显示网页的全过程

浏览器从输入 url 到显示网页的全过程

  • 浏览器从输入 url 到显示网页的全过程
  • DNS(Domain Name System)解析

浏览器从输入 url 到显示网页的全过程

当你在浏览器中输入一个URL并按下Enter键,以下是浏览器为显示网页所执行的一系列步骤:

  1. 域名解析 (DNS解析):

    • 浏览器首先检查本地缓存,看是否已经有这个域名的IP地址。
    • 如果没有,它会发送请求给系统配置的DNS服务器。如果那个DNS服务器也没有缓存的结果,那么这个解析请求可能会被转发到其他DNS服务器。
    • 一旦IP地址被找到,它将被返回到浏览器。
  2. 建立TCP连接:

    • 浏览器与web服务器建立一个TCP连接,这通常是在HTTP默认的端口80或HTTPS的默认端口443上。
    • 这包括一个三次握手。
  3. 发送HTTP请求:

    • 浏览器发送一个HTTP请求到服务器。这个请求包括请求方法(如GET、POST等)、headers和可能的请求体。
  4. 处理HTTP响应:

    • 服务器处理请求并返回一个HTTP响应。响应包含一个状态码(如200表示成功,404表示未找到),响应头部和响应体(通常是请求的HTML页面)。
  5. HTTPS握手 (如果是https://请求):

    • 在交换实际的HTTP数据之前,客户端和服务器会进行一个TLS/SSL握手,以确保之后的通信是加密和安全的。
  6. 渲染页面:

    • 浏览器开始解析HTML,并构建DOM树。
    • 并行地,浏览器会解析CSS,并构建CSSOM树。
    • DOM树和CSSOM树结合后,形成一个渲染树。
    • 之后,浏览器开始布局渲染树,并计算每个节点的几何位置。
    • 最后,浏览器绘制渲染树到屏幕上。
  7. 执行JavaScript:

    • 如果HTML中引用了JavaScript,浏览器会执行它。JavaScript可能会修改DOM和CSSOM,这可能会导致浏览器重新布局和重新绘制页面。
  8. 加载外部资源:

    • 页面中可能包含其他资源(如图像、CSS、JavaScript文件)。浏览器会为这些资源发出额外的HTTP请求。注意,这些请求可能会因为浏览器的缓存机制或因为数据已被内联到HTML中而被省略。

以上是从输入URL到显示页面的简化过程。这个过程更加复杂,涉及到多种技术、优化和异常处理策略。

DNS(Domain Name System)解析

DNS(Domain Name System)解析是一种将人类可读的域名(例如 www.example.com)转换为与之相关的IP地址(例如 192.0.2.1)的过程。这个转换过程是互联网上的基本操作,因为计算机和其他设备使用IP地址来识别和访问彼此。

以下是DNS解析的基本概念和过程:

  1. 用户请求:当你在浏览器中输入一个网址或通过其他方式尝试访问一个域名时,你的计算机会开始一个DNS解析的请求。

  2. 查询本地缓存:首先,计算机会检查它自己的本地DNS缓存,看看它是否已经知道这个域名的IP地址。如果知道,它会直接使用那个地址。

  3. 递归查询:如果本地缓存中没有答案,计算机会向设置的DNS服务器(通常是由你的互联网服务提供商提供或是一个公共DNS服务器如Google的8.8.8.8)发送一个查询请求。这个DNS服务器会执行递归查询,意味着它会代替你的计算机去找出域名的IP地址。

  4. 迭代查询:如果DNS服务器也不知道答案,它会进行迭代查询,从根DNS服务器开始,然后是顶级域(TLD)服务器,接着是第二级域的名称服务器,直到找到具有所需IP地址的权威名称服务器为止。

  5. 返回IP地址:一旦找到IP地址,DNS服务器会将其返回给请求的计算机,并可能在其本地缓存中保存该信息,以便将来快速响应同样的请求。

  6. 连接到目标IP:现在,你的计算机知道了目标IP地址,它就可以通过IP地址开始与目标服务器建立连接,从而获取网站内容或进行其他相关操作。

通过这个系统,人们可以通过易于记忆的域名(如openai.com)而不是难以记忆的IP地址(如 203.0.113.5)来访问互联网上的资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring小记

Spring是轻量级的开源的javaEE框架目的&#xff1a;解决企业应用开发的复杂性 Spring有两个核心部分&#xff1a;IOC和AOP <1>IOC&#xff1a;控制反转&#xff0c;把创建的对象过程交给Spring进行管理 <2>AOP&#xff1a;面向切面&#xff0c;不修改源代码进行…

为什么建议同时学多门编程语言

晨读一本名叫《4点起床》的书&#xff0c;书中有一段描述与最近学习编制语言时自己的感受完全一致。算是一个小经验&#xff0c;分享给大家。 书中有一章的标题为《同时学六国语言记起来比较快》&#xff0c;其中有两段描述如下&#xff1a; 为什么我推荐大家同时学不同的语言…

大数据-玩转数据-Flink 水印

一、Flink 中的水印 在Flink的流式操作中, 会涉及不同的时间概念&#xff1a; 1.1 处理时间 是指的执行操作的各个设备的时间&#xff0c;对于运行在处理时间上的流程序, 所有的基于时间的操作(比如时间窗口)都是使用的设备时钟。比如, 一个长度为1个小时的窗口将会包含设备…

如何处理生产环境中的数据倾斜问题?

分析&回答 1、flink数据倾斜的表现&#xff1a; 任务节点频繁出现反压&#xff0c;增加并行度也不能解决问题 部分节点出现OOM异常&#xff0c;是因为大量的数据集中在某个节点上&#xff0c;导致该节点内存被爆&#xff0c;任务失败重启 2、数据倾斜产生的原因&#x…

传承精神 缅怀伟人——湖南多链优品科技有限公司赴韶山开展红色主题活动

8月27日上午&#xff0c; 湖南多链优品科技有限公司全体员工怀着崇敬之情&#xff0c;以红色文化为引领&#xff0c;参加了毛泽东同志诞辰130周年的纪念活动。以董事长程小明为核心的公司班子成员以及全国优秀代表近70人一行专赴韶山&#xff0c;缅怀伟人毛泽东同志的丰功伟绩。…

软件测试/测试开发丨Selenium 高级定位 CSS

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27022 一、CSS选择器概念 CSS拥有自己的语法规则和表达式 CSS通常分为相对定位和绝对定位 CSS常和XPATH一起用于UI自动化测试 二、CSS相对定位使用场景 支…

Django基础4——模板系统

文章目录 一、基本了解1.1 引用变量1.2 全局变量 二、if判断2.1 语法2.2 案例 三、for循环3.1 语法3.2 案例3.3 forloop变量3.4 容错语句 四、过滤器4.1 内置过滤器4.2 自定义过滤器 五、模板继承六、模板导入七、引用静态文件 一、基本了解 概念&#xff1a; Django模板系统&a…

11. 网络模型保存与读取

11.1 网络模型保存(方式一) import torchvision import torch vgg16 torchvision.models.vgg16(pretrainedFalse) torch.save(vgg16,"./model/vgg16_method1.pth") # 保存方式一&#xff1a;模型结构 模型参数 print(vgg16) 结果&#xff1a; VGG((feature…

Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required问题解决

运行程序的时候出现了如下的报错&#xff1a; 解决方法&#xff1a;去除EnableAutoConfiguration中的(exclude{DataSourceAutoConfiguration.class})

Compose - 交互组合项

按钮 Button OutLinedButton带外边框、TextButton只是文字、IconButton只是图标形状。 Button(onClick { }, //点击回调modifier Modifier,enabled true, //启用或禁用interactionSource MutableInteractionSource(),elevation ButtonDefaults.elevatedButtonElevation( /…

antdesign Vue table - 换行

表头换行 customHeaderCell: () > {return {style: {whiteSpace: pre-wrap,},}; }, 列表换行 customCell:() > {return {style: {wordWrap:break-word,wordBreak:break-all,whiteSpace:normal,minHeight:50px,// width:150,}} }

EFLK日志平台(filebeat-->kafka-->logstash-->es-->kiabana)

ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 安装顺序 1.安装es 7.17.12 2.安装kibana 7.17.12 3.安装x-pack 保证以上调试成功后开始下面…

【24考研】:四川大学计算机学院23届874考研考情分析

四川大学计算机学院23届CS考研考情分析 作者&#xff1a;老李 往年都是大佬们做的&#xff0c; 今年正好自己在做公众号这一块&#xff0c; 因此不自量力的承担这个工作&#xff0c;顺便锻炼一点pandas包和plt包的应用能力。 所以形式上我也会仿照一下往年的大佬。 21考情&a…

CompletableFuture stream 处理demo

全程无废话&#xff0c;上代码&#xff0c;记录方便自己查阅。 package com.hsj;import com.google.common.collect.Lists; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.junit.jupiter.api.T…

vue使用qrcodejs2生成二维码

目录 概要 构建展示的vue组件qrcode.vue 组件的使用 概要 项目中用到需要展示二维码的样式&#xff0c;想到了qrcode 例如&#xff1a; 前提&#xff1a;安装包 npm install qrcodejs2 --save 构建展示的vue组件qrcode.vue <template><div style"width: …

如何用Python爬虫持续监控商品价格

目录 持续监控商品价格步骤 1. 选择合适的爬虫库&#xff1a; 2. 选择目标网站&#xff1a; 3. 编写爬虫代码&#xff1a; 4. 设定监控频率&#xff1a; 5. 存储和展示数据&#xff1a; 6. 设置报警机制&#xff1a; 7. 异常处理和稳定性考虑&#xff1a; 可能会遇到的…

Uniapp笔记(三)uniapp语法2

一、本节项目预备知识 1、组件生命周期 1.1、什么是生命周期 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段&#xff0c;强调的是一个时间段 我们可以把每个uniapp应用运行的过程&#xff0c;也概括为生命周期 小程序的启动&#xff0c;表示生命周…

2781. 最长合法子字符串的长度

2781. 最长合法子字符串的长度 C代码&#xff1a;滑动窗口、哈希表 typedef struct{char* str;UT_hash_handle hh; } HashTable;HashTable* head;void AddToHash(char* str) {HashTable* out (HashTable*)malloc(sizeof(HashTable));out->str str;HASH_ADD_STR(head, str…

ThinkPHP 文件上传 fileSystem 扩展的使用

ThinkPHP 文件上传 ThinkPHP 文件上传 扩展 filesystem一、安装 FileSystem 扩展二、认识 filesystem 配置文件 config/filesystem.php三、上传验证&#xff08;涉及到验证器的知识点&#xff09;四、文件上传demo ThinkPHP 文件上传 扩展 filesystem ThinkPHP 为我们 提供了 …

【前端】JQ实时显示当前日期、时间、星期

效果图 html <span id"time"></span> JS // 实时显示当前时间 $(document).ready(function () {function showTime() {var today new Date;var y today.getFullYear();var M today.getMonth() 1;var d today.getDate();var w today.getDay();va…