当前位置: 首页 > news >正文

从输入URL到展示出页面

目录

了解URL

 1. 输入URL

2. 域名解析

3. 建立连接

4. 服务器处理请求:

5. 返回响应:

6. 浏览器解析HTML:

7. 加载资源:

8. 渲染页面:

9. 执行JavaScript:

10. 页面展示:


从输入URL到展示出页面,涉及到多个步骤和不同的技术。本篇来解释一下整个过程中发生的主要事件:

了解URL

这里特别注意:

服务器地址:可以是 IP 地址,也可以是域名

服务器端口号:通过 IP 地址,只描述了网络资源在哪个主机上,使用端口号来区分是主机上的哪个程序

带层次文件路径:描述你要访问服务器的哪个资源的位置

查询字符串:也就是键值对(程序员自定义的)


 1. 输入URL

用户在浏览器地址栏中输入URL(统一资源定位符),URL是网站的地址,包括协议(通常是HTTP或HTTPS)、域名和资源路径。

2. 域名解析

浏览器通过DNS(域名系统)服务器将域名解析成对应的IP地址。DNS服务器会查找域名对应的IP地址,这个IP地址是指向网站服务器的。

3. 建立连接

浏览器使用HTTP协议向服务器发起请求,请求连接到服务器。如果是HTTPS,通信会被加密以保证安全性。

4. 服务器处理请求:

服务器接收到浏览器的请求后,会根据请求的资源(通常是HTML文件)进行处理。服务器可能需要查询数据库,运行应用程序等,最终生成需要的HTML响应。

5. 返回响应:

服务器将生成的HTML响应发送回浏览器。响应包括HTTP状态码(表示请求成功、重定向、错误等)和相应的数据(HTML、CSS、JavaScript等文件)。

6. 浏览器解析HTML:

浏览器接收到HTML响应后,开始解析HTML文档。它会构建DOM(文档对象模型)树,这是网页的内部表示,包括页面的结构和内容。

7. 加载资源:

在解析HTML的过程中,浏览器会发现页面引用了其他资源,比如CSS、JavaScript、图像等。浏览器会继续发送请求获取这些资源。

8. 渲染页面:

浏览器根据HTML和CSS信息渲染页面,将页面呈现给用户。这个过程包括布局、绘制和渲染交互效果等。

9. 执行JavaScript:

如果页面包含JavaScript代码,浏览器会执行这些脚本。JavaScript可以改变页面内容、响应用户交互、与服务器进行通信等。

10. 页面展示:

最终,页面在用户的浏览器中完全展示出来,用户可以看到页面内容并与页面进行交互。


这个过程涉及到多个技术和协议,包括DNS解析、HTTP/HTTPS通信、服务器端处理、HTML/CSS/JavaScript解析和渲染等。不同的浏览器和服务器可能在具体实现上有所不同,但总体流程大致相同。 

相关文章:

从输入URL到展示出页面

目录 了解URL 1. 输入URL 2. 域名解析 3. 建立连接 4. 服务器处理请求: 5. 返回响应: 6. 浏览器解析HTML: 7. 加载资源: 8. 渲染页面: 9. 执行JavaScript: 10. 页面展示: 从输入URL到…...

【C++】哈希的应用 -- 位图

文章目录 一、位图的概念二、位图的实现三、库中的 bitset四、位图的应用五、哈希切割 一、位图的概念 我们以一道面试题来引入位图的概念: 给40亿个不重复的无符号整数,没排过序。给一个无符号整数,如何快速判断一个数是否在这40亿个数中 我…...

系列二、IO流原理及流的分类

一、概述 IO是Input、Output的缩写,IO流技术是非常实用的技术,用于处理数据传输,例如读写文件,网络通讯等。在Java程序中,对于数据的输入/输出操作以"流(stream)"的方式进行&#xff…...

【算法教程】排列与组合的实现

数据准备 在讲排列与组合之前,我们先定义数据元素类型Fruit class Fruit{constructor(name,price){this.name namethis.price price} }排列 对N个不同元素进行排序,总共有多少不同的排列方式? Step1: 从N个元素中取1个,共N种…...

uniapp实现简单的九宫格抽奖(附源码)

效果展示 uniapp实现大转盘抽奖 实现步骤: 1.该页面可设置8个奖品,每个奖品可设置中奖机会的权重,如下chance越大,中奖概率越高(大于0) // 示例代码 prizeList: [{id: 1,image: "https://img.alicdn…...

C++设计模式_09_Abstract Factory 抽象工厂

与上篇介绍的Factory Method工厂方法模式一样,Abstract Factory 抽象工厂模式也属于典型的“对象创建模式”模式,解决的问题也极其相似,在理解了Factory Method工厂方法模式的基础上再去理解Abstract Factory 抽象工厂模式就会变得更加容易。…...

一些前端面试思考

回流和重绘 先牢记这句话,回流必将引起重绘,而重绘不一定会引起回流。回流的代价要远大于重绘。 当你给一个元素更换颜色,这样的行为是不会影响页面布局的,DOM树不会变化,但颜色变了,渲染树得重新渲染页面&…...

Spring MVC(上)

1、Spring MVC简介: MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分 M:Model,模型层,指工程中的JavaBean,作用是处理数据 JavaBean分为两类: 一类称为实体类Bean:专…...

ORACLE内存结构

内存体系结构 ​​​​​​​ 目录 内存体系结构 2.1自动内存管理 2.2自动SGA内存管理 2.3手动SGA内存管理 2.3.1数据库缓冲区 2.3.1.1保留池 2.3.1.2回收池 2.3.2共享池 2.3.2.1SQL查询结果和函数查询结果 2.3.2.2库缓存 2.3.2.3数据字典缓存 2.3.3大池 2.3.4 …...

excel常用的几个函数

1、MID函数 通常用来返回返回指定字符串中的子串。 函数公式: MID(string, starting_at, extract_length) String(必填):包含要提取字符的文本字符串 starting_at(必填):文本中要提取的第一个字…...

【Bug】【内存相关】偶然发现一个内存溢出Bug复盘

一、问题 跑自动化用例的时候,uat-sg环境,发现SGW经常会返回 502 Bad Gateway响应 二、原因 经过SRE和BE Dev共同排查,502 是从ALB-- > 后端服务 后端服务无法响应导致,ALB会直接给客户端返回502。 服务端:由于c…...

python读写.pptx文件

1、读取PPT import pptx pptpptx.Presentation(rC:\Users\user\Documents\\2.pptx) # ppt.save(rC:\Users\user\Documents\\1.pptx) # slideppt.slides.add_slide(ppt.slide_layouts[1])# 读取所有幻灯片上的文字 for slide in ppt.slides:for shape in slide.shapes:if shape…...

【Godot】【BUG】4.x NavigationAgent 导航不生效

4.2.beta2 试了半天才发现原来默认只对第一个有导航的 TileMap 的第 1 层 生效,而我设置的导航层不是第一层,然后我新建了一个 TileMap 将导航的瓦片设置到这个 TileMap 上了,如图 这样就解决了问题,不用再修改默认设置的东西了&a…...

Rust逆向学习 (1)

文章目录 Hello, Rust Reverse0x01. main函数定位0x02. main函数分析line 1line 2line 3line 4~9 0x03. IDA反汇编0x04. 总结 近年来,Rust语言的热度越来越高,很多人都对Rust优雅的代码和优秀的安全性赞不绝口。对于开发是如此,对于CTF也是如…...

【Golang | reflect】利用反射实现方法的调用

引言 go语言中,如果某个数据类型实现了一系列的方法,如何批量去执行呢,这时候就可以利用反射里的func (v Value) Call(in []Value) []Value 方法。 // Call calls the function v with the input arguments in. // For example, if len(in)…...

Teleport

从官网中获取到的代码如下 App.vue <template><div class"outer"><h3>Tooltips with Vue 3 Teleport</h3><div><MyModal /></div></div> </template> <script setup> import MyModal from "./My…...

flutter与原生 相互通信实战

一、原生和flutter 通信 ios 通信类 CommonUtil.swift import Foundation import Flutterpublic class CommonUtil {public static func emitEvent(channel: FlutterMethodChannel, method: String, type: String, errCode: Int32?, errMsg: String?, data: Any?){safeMa…...

结构光相机原理

结构光相机原理...

ubuntu安装Anaconda

下载 Anaconda 进入 Ubuntu&#xff0c;自己新建下载路径&#xff0c;输入以下命令开始下载 注意&#xff0c;如果不是 x86_64&#xff0c;需要去镜像看对应的版本&#xff08;https://mirrors.bfsu.edu.cn/anaconda/archive/?CM&OA&#xff09; wget https://mirrors.…...

【RNA structures】RNA转录的重构和前沿测序技术

文章目录 RNA转录重建1 先简单介绍一下测序相关技术2 Map to Genome Methods2.1 Step1 Mapping reads to the genome2.2 Step2 Deal with spliced reads2.3 Step 3 Resolve individual transcripts and their expression levels 3 Align-de-novo approaches3.1 Step 1: Generat…...

BitNet b1.58-2B-4T-GGUF开发者案例:基于Gradio+llama-server构建私有AI对话平台

BitNet b1.58-2B-4T-GGUF开发者案例&#xff1a;基于Gradiollama-server构建私有AI对话平台 1. 项目概述 BitNet b1.58-2B-4T-GGUF是一款极致高效的1.58-bit量化开源大模型&#xff0c;采用独特的权重三值化技术&#xff08;-1, 0, 1&#xff09;&#xff0c;平均仅需1.58bit…...

Layui表单提交时如何防止用户重复点击提交按钮

提交按钮点击后应立即禁用并修改提示文字&#xff0c;验证通过后再发请求&#xff0c;AJAX全程保持禁用状态&#xff0c;成功或失败后均需恢复按钮&#xff0c;移动端需在touchstart阶段拦截&#xff0c;且禁用仅限按钮本身以免跳过layui校验。提交按钮点击后立刻禁用用户手快连…...

Win11自动隐藏任务栏下,QQ/微信消息弹窗烦人?实测这3种设置组合能根治

Win11自动隐藏任务栏下根治QQ/微信消息弹窗的3种终极方案 每次全屏写文档时&#xff0c;右下角突然弹出的黄色闪烁图标总让人血压飙升——这可能是Win11自动隐藏任务栏用户最常遭遇的现代办公酷刑。明明选择了隐藏任务栏追求极简&#xff0c;聊天软件却固执地破坏这份宁静。经过…...

从VGG到RepVGG:一个‘重参数化’技巧,如何让经典CNN在训练和推理中‘两头吃香’?

从VGG到RepVGG&#xff1a;重参数化如何重塑经典CNN的现代价值 在计算机视觉领域&#xff0c;卷积神经网络(CNN)的架构演进就像一场永不停歇的接力赛。当2014年VGGNet以其优雅的对称结构和重复堆叠的33卷积层惊艳学界时&#xff0c;没人想到这个"古典美学"代表会在七…...

Hackaday.io硬件开源平台全解析

1. Hackaday.io项目概述Hackaday.io是一个面向硬件黑客、创客和工程师的开源项目分享平台。作为Hackaday网站的官方项目托管平台&#xff0c;它汇集了全球各地极客们的创意与实践。在这里&#xff0c;你可以找到从3D打印机器人到自制电子显微镜等各种令人惊叹的项目。提示&…...

WeChatMsg:你的微信聊天记录永久保存与智能分析终极指南

WeChatMsg&#xff1a;你的微信聊天记录永久保存与智能分析终极指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeC…...

如何彻底掌握Dism++:Windows系统维护的终极解决方案

如何彻底掌握Dism&#xff1a;Windows系统维护的终极解决方案 【免费下载链接】Dism-Multi-language Dism Multi-language Support & BUG Report 项目地址: https://gitcode.com/gh_mirrors/di/Dism-Multi-language 还在为Windows系统维护而烦恼吗&#xff1f;磁盘空…...

用FPGA和Verilog实现一个浪漫的8路呼吸流水灯(基于有限状态机FSM设计)

用FPGA和Verilog打造浪漫呼吸流水灯&#xff1a;有限状态机的艺术实践 当冰冷的电子元件遇上温暖的光效设计&#xff0c;FPGA开发便从枯燥的实验室走进了生活美学领域。本文将带你用Verilog硬件描述语言&#xff0c;基于有限状态机(FSM)设计一个具有呼吸渐变效果的8路LED流水灯…...

告别云服务器:用随身Wifi+Debian搭建PupBot,实现零月供的QQ机器人

随身WifiDebian打造零月供QQ机器人&#xff1a;私有化部署全指南 当大多数开发者习惯性地将服务部署在云端时&#xff0c;一个被忽视的事实是&#xff1a;我们正以数据安全和系统控制权为代价换取所谓的便利性。本文将带你探索一种颠覆性的解决方案——利用随身Wifi设备配合Deb…...

笔记本EC与BIOS的‘暗号’:深入解读Q Event与GPIO SMI在电源、按键背后的协作

笔记本EC与BIOS的‘暗号’&#xff1a;深入解读Q Event与GPIO SMI在电源、按键背后的协作 当按下笔记本电源键时&#xff0c;这个看似简单的动作背后隐藏着一场精密的硬件交响乐。嵌入式控制器&#xff08;EC&#xff09;与BIOS通过Q Event和GPIO SMI这两种特殊通信机制&#…...