揭秘浏览器键入URI到页面显示的过程: 浏览器键入URI,到页面显示,中间发生什么?

news2024/12/24 18:48:05

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁
🦄 博客首页——猫头虎的博客🎐
🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺
🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐
🌊 《100天精通Golang(基础入门篇)》学会Golang语言,畅玩云原生,走遍大小厂~💐

🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅,敬请批评指正!🍁🐥

文章目录

      • 第一阶段:解析URI
      • 第二阶段:域名解析
      • 第三阶段:建立TCP连接
      • 第四阶段:发起HTTP请求
      • 第五阶段:服务器处理请求并返回数据
      • 第六阶段:浏览器渲染页面
    • 代码案例
      • Go语言示例:
      • Java语言示例:
      • Python语言示例:
      • 总结
  • 原创声明

在日常使用互联网的过程中,我们经常会使用浏览器访问各种网页,但你是否曾经好奇,当我们在浏览器中键入一个网址(也称为URI),到页面最终显示出来的背后究竟发生了什么?本篇博客将带你深入了解这个过程的各个阶段。

在这里插入图片描述

第一阶段:解析URI

一切从用户在浏览器地址栏键入网址开始。这个网址实际上是一个统一资源标识符(URI),它可以是一个网页的地址、一个文件的路径,甚至是一个在线应用的链接。浏览器首先会将这个URI进行解析,分解出其中的协议、域名、路径以及可能的查询参数等信息。

第二阶段:域名解析

在浏览器解析出域名后,接下来的步骤是将域名转换为IP地址,这个过程称为域名解析。浏览器会首先查询本地的DNS缓存,如果找不到,就会向本地DNS服务器发起查询。如果本地DNS服务器也没有缓存该域名的IP地址,它会依次向更高级别的DNS服务器发起查询,直到找到对应的IP地址为止。

第三阶段:建立TCP连接

有了目标服务器的IP地址后,浏览器会与服务器建立TCP连接。TCP(传输控制协议)是一种可靠的通信协议,它确保数据在客户端和服务器之间的可靠传输。在这个阶段,浏览器和服务器之间会进行“三次握手”来建立连接,确保双方都准备好进行数据传输。

第四阶段:发起HTTP请求

一旦TCP连接建立,浏览器会发起实际的HTTP请求。HTTP请求中包含了浏览器想要获取的资源信息,例如网页的HTML文件、CSS样式表、JavaScript脚本等。服务器在接收到请求后,会根据请求的资源类型和路径返回相应的数据。

第五阶段:服务器处理请求并返回数据

服务器收到HTTP请求后,会根据请求的内容和参数,从文件系统或数据库中获取相应的数据。这可能涉及到后端编程、数据库查询等一系列复杂的操作。一旦服务器准备好数据,它会将数据以HTTP响应的形式返回给浏览器。

第六阶段:浏览器渲染页面

浏览器收到服务器返回的数据后,开始进行页面渲染。这包括解析HTML结构、加载CSS样式、执行JavaScript代码等。浏览器会按照解析到的顺序逐步构建页面,最终在用户的屏幕上显示出完整的页面内容。

代码案例

当我们访问一个网页时,浏览器将展示一个丰富的页面内容,但背后却隐藏着一个复杂的过程。通过具体的代码示例,分别使用Go语言、Java语言和Python语言来展示从浏览器键入URI到页面显示的完整过程。

Go语言示例:

package main

import (
	"fmt"
	"net"
	"net/http"
	"time"
)

func main() {
	// 用户输入的URI
	uri := "https://www.example.com"

	// 解析URI获取主机名和端口
	host, port, err := net.SplitHostPort(uri)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}

	// 建立TCP连接
	conn, err := net.DialTimeout("tcp", net.JoinHostPort(host, port), 5*time.Second)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}
	defer conn.Close()

	// 发起HTTP请求
	request, err := http.NewRequest("GET", uri, nil)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}

	client := &http.Client{}
	response, err := client.Do(request)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}
	defer response.Body.Close()

	// 读取和处理响应数据
	// 这里可以根据实际需要对响应数据进行处理,比如解析HTML内容等
	// ...
}

Java语言示例:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection;

public class Main {
    public static void main(String[] args) throws IOException {
        // 用户输入的URI
        String uri = "https://www.example.com";

        // 创建URL对象
        URL url = new URL(uri);

        // 打开HTTP连接
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();

        // 配置连接属性
        connection.setRequestMethod("GET");
        connection.setConnectTimeout(5000);
        connection.setReadTimeout(5000);

        // 发起请求
        int responseCode = connection.getResponseCode();
        if (responseCode == HttpURLConnection.HTTP_OK) {
            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String line;
            StringBuilder content = new StringBuilder();
            while ((line = reader.readLine()) != null) {
                content.append(line);
            }
            reader.close();

            // 处理响应数据
            // 这里可以根据实际需要对响应数据进行处理,比如解析HTML内容等
            // ...
        } else {
            System.out.println("HTTP Request failed with response code: " + responseCode);
        }
    }
}

Python语言示例:

import socket
import ssl
import requests

def main():
    # 用户输入的URI
    uri = "https://www.example.com"

    # 解析URI获取主机名和路径
    parsed_uri = requests.utils.urlparse(uri)
    host = parsed_uri.netloc
    path = parsed_uri.path if parsed_uri.path else "/"

    # 建立TCP连接并进行SSL握手
    context = ssl.create_default_context()
    with socket.create_connection((host, 443)) as sock:
        with context.wrap_socket(sock, server_hostname=host) as ssock:
            request = f"GET {path} HTTP/1.1\r\nHost: {host}\r\n\r\n"
            ssock.sendall(request.encode())

            response = ssock.recv(4096)
            response = response.decode("utf-8")

            # 处理响应数据
            # 这里可以根据实际需要对响应数据进行处理,比如解析HTML内容等
            # ...

if __name__ == "__main__":
    main()

上述代码示例分别展示了在不同编程语言中,从用户输入URI到页面显示的完整过程。这些示例包括了解析URI、建立TCP连接、发起HTTP请求、处理响应数据等步骤,帮助你更深入地理解浏览器加载页面的背后工作原理。

总结

从用户输入URI到页面最终显示,涉及了诸多复杂的过程。浏览器的背后有着域名解析、TCP连接、HTTP请求和服务器处理等多个环节。了解这些过程有助于我们更好地理解网络访问的原理,也有助于开发人员优化网站性能,提供更快速、更稳定的用户体验。无论是普通用户还是开发者,对于这个过程的了解都能让我们在互联网世界中更加游刃有余。

原创声明

======= ·

  • 原创作者: 猫头虎

作者wx: [ libin9iOak ]

学习复习

本文为原创文章,版权归作者所有。未经许可,禁止转载、复制或引用。

作者保证信息真实可靠,但不对准确性和完整性承担责任

未经许可,禁止商业用途。

如有疑问或建议,请联系作者。

感谢您的支持与尊重。

点击下方名片,加入IT技术核心学习团队。一起探索科技的未来,共同成长。

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

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

相关文章

差分升级在物联网水表上的实现与应用(学习)

摘要 当越来越多的物联网水表加入抄表系统后,实现了水表数据的信息化,并且当水表终端需要技术更新时,通过网络方式来升级产品可以高效修复设备面临的问题,减少用户损失,降低维护成本,但同时也对有限的网络…

IDEA 设置字体大小无效

设置字体大小,一般都是从file>settings>editor>font>Size里设置,一般都有效。 但是,如果是更换了主体,则需要从主体颜色菜单那里这是,你看这个页面,上面黄色三角也提示你了,要去颜色…

这所211热度很高!连续3年分数上涨!

一、学校及专业介绍 中国地质大学(武汉)(China University of Geosciences, Wuhan),简称地大。位于武汉市,是中华人民共和国教育部直属的全国重点大学,由教育部和湖北省人民政府共建&#xff0…

告别if else!试试这款轻量级流程引擎吧,跟SpringBoot绝配!

之前同事用了一款轻量级的规则引擎脚本AviatorScript,我也跟着用了起来,真的挺香,能少写很多代码。这期就给大家介绍一下这款规则引擎。 简介 AviatorScript是一门高性能、轻量级寄宿于 JVM (包括 Android 平台)之上的…

java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver的解决办法

springcloudAlibaba项目连接mysql时(mysql版本8.0.31,Springboot2.2.2,spring cloud Hoxton.SR1,spring cloud alibaba 2.1.0.RELEASE),驱动名称报红,配置如下: 原因:引入的jdbc驱动包和使用的m…

uniapp实现自定义上传图片

目录 1、布局样式2、使用uniappAPI&#xff08;uni.chooseImage&#xff09;3、解决bug和添加功能3.1 bug13.2 bug23.3 bug33.4 点击图片进行预览3.5 删除图片 4、云函数上传到云存储 1、布局样式 在正式自定义上传前我们先将静态页面搭建好。 样式代码&#xff1a; <temp…

【面试题】这道面试题真的很变态吗?

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 最近帮公司招聘&#xff0c;主要负责一面&#xff0c;所以基本上问的基础多一点。但是我在问这样一道面试题的时候&#xff0c;很少有人答对。不少人觉得…

福布斯发布2023年云计算100强榜单,OpenAI排名第一

&#x1f989; AI新闻 &#x1f680; 福布斯发布2023年云计算100强榜单&#xff0c;OpenAI排名第一 摘要&#xff1a;福布斯发布《2023年云计算100强榜单》&#xff0c;OpenAI排名第一。榜单关注全球高成长性的云计算公司&#xff0c;特别注重AI领域的发展。今年有16家新上榜…

基于自适应曲线阈值和非局部稀疏正则化的压缩感知图像复原研究【自适应曲线阈值去除加性稳态白/有色高斯噪声】(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

自带flash的浏览器,免安装

一. 内容简介 自带flash的浏览器&#xff0c;免安装 二. 软件环境 2.1 FlashBrowser_v1.0.5 2.2 安装包链接 链接&#xff1a;https://pan.baidu.com/s/1O8_uHBkDMAXnj0KCfj_Urw?pwd1234 提取码&#xff1a;1234 三.主要流程 3.1 下载安装包 3.2 运行 点击CefFlashBro…

怎么裁剪视频大小尺寸?简单的裁剪方法分享

怎么裁剪视频的画面大小尺寸呢&#xff1f;有时当我们下载下来一段视频&#xff0c;由于视频的画面大小比例不同&#xff0c;会有很多的黑边&#xff0c;我们不管是观看还是进行二次编辑都非常影响体验&#xff0c;而调整视频画面比例以适应观众的设备或平台&#xff0c;比如将…

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库&#xff0c;体积小&#xff0c;无需安装&#xff0c;是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…

iview 日期 datetimerange

问题&#xff1a;每次点击编辑按钮进入到编辑页面&#xff0c;活动时间明明有值&#xff0c;却还是提示请选择活动时间。 原因&#xff1a;值没绑定上 解决办法&#xff1a;v-model 修改为 :value <Form-item label"活动时间" prop"timeRange"><d…

谷粒商城第九天-对商品服务中所涉及到的表的思考

目录 一、总述 二、spu、sku、规格参数、销售属性之间的关系理解 三、相关表设计 1. 属性表 2. 基本属性分组表 3. 分组-基本属性关系表 ​4. spu基本属性值表 5. spu详情信息表 6. spu评论表 7. 商品sku值表 8. sku详情表 9. sku图片表 10. 分类表 11. 品牌表 …

什么是代码合并。PR、MR通识说明

What is it ? 首先我想先来讲讲什么是分支合并请求Merge Request(也可叫Pull Request&#xff0c;下文中全用Merge Request或其缩写MR指代)&#xff0c;以及它有什么作用&#xff08;如果你对此概念有所了解&#xff0c;你完全可以跳过What is it&#xff09;。 MR(或者PR)就…

海外应用商店优化实用指南之元数据的迭代更新

随着每天都有新应用程序加入App Store和Google Play商店&#xff0c;许多应用程序都会针对与我们相同的关键词&#xff0c;虽然我们的元数据保持不变&#xff0c;但竞争对手的应用会重新编入索引&#xff0c;最终导致我们的关键词排名随着时间的推移稳步下降。 1、迭代的重要性…

Mysql in 查询的奇怪方向

Mysql in 查询的奇怪方向 关于表字段存储的数据为 num1,num2,num3时, 还要通过多个num1,num2入参针对该字段进行查询 建表语句 CREATE TABLE test (test_ids varchar(100) DEFAULT NULL COMMENT 保存ids 以逗号分隔 ) ENGINEInnoDB;数据项 查询语句 SELECT test_ids FROM t…

OSPF工作原理及其配置命令

目录 一、OSPF&#xff08;开放式最短路径优先协议&#xff09;&#xff1a; 作用&#xff1a;防环 弊端&#xff1a; 结构化部署: 更新方式&#xff1a; 二、OSPF的数据包 三、OSPF的状态机 Down Init 2way 条件&#xff1a; Exstart Exchange Loadi…

Stephen Wolfram:让 ChatGPT 真正起作用的是什么?

What Really Lets ChatGPT Work? 让 ChatGPT 真正起作用的是什么&#xff1f; Human language—and the processes of thinking involved in generating it—have always seemed to represent a kind of pinnacle of complexity. And indeed it’s seemed somewhat remarkabl…

stm32项目(9)——基于stm32的智能门窗设计

目录 一.功能设计 二.硬件方案 1.单片机 2.显示器 3.温湿度模块 4.烟雾模块 5.光照模块 6.数字舵机 7.蓝牙模块 8. 语音识别模块 三.程序设计 四.课题意义 五.国内外发展现状 一.功能设计 本次设计的功能如下&#xff1a; 系统包括了语音模块 、传感器数据采集模块和…