从输入URL到展示出页面

news/2025/2/21 7:09:44/

目录

了解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解析和渲染等。不同的浏览器和服务器可能在具体实现上有所不同,但总体流程大致相同。 


http://www.ppmy.cn/news/1168490.html

相关文章

利用Bootstrap的分页组件实现分页效果

在网页开发过程中&#xff0c;如果碰到内容过多的情况&#xff0c;一般都会使用分页处理。 在<ul>元素上添加pagination类&#xff0c;在<li>元素上添加page-item类&#xff0c;在超链接中添加 page-link类&#xff0c;即可实现一个简单的分页。 目录 00-基础知识…

SpringSecurity源码学习五:跨域与跨站请求伪造

目录 什么是跨域springboot是怎么解决跨域问题在springSecurity中怎么解决跨域问题CORS源码跨域请求伪造CSRFCSRF源码总结 什么是跨域 跨域是指在网络中&#xff0c;当一个网页的资源&#xff08;如字体、脚本或样式表&#xff09;尝试从不同的域名、端口或协议请求数据时&…

华为OD 最大差(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…

卷积神经网络CNN学习笔记-卷积计算Conv2D函数的理解

目录 1.全连接层存在的问题2.卷积运算3.填充(padding)3.1填充(padding)的意义 4.步幅(stride)5.三维数据的卷积运算6.结合方块思考7.批处理8.Conv2D函数解析9.conv2d代码9.1 stride19.2 stride2 参考文章 1.全连接层存在的问题 在全连接层中&#xff0c;相邻层的神经元全部连接…

Leetcode1833. 雪糕的最大数量

Every day a Leetcode 题目来源&#xff1a;1833. 雪糕的最大数量 解法1&#xff1a;贪心 排序 本题唯一的难点在于计数排序。 计数排序详解&#xff1a;C算法之计数排序 为了尽可能多的买到雪糕&#xff0c;我们选择从价格低的雪糕开始买&#xff0c;统计能够买到的雪糕…

运行stable-diffusion-xl-refiner-1.0遇到version `GLIBCXX_3.4.29‘ not found的问题

一、问题背景 https://huggingface.co/stabilityai/stable-diffusion-xl-refiner-1.0 在运行示例程序时候遇到GLIBCXX_3.4.29‘ not found diffusers to > 0.18.0 import torch from diffusers import StableDiffusionXLImg2ImgPipeline from diffusers.utils import loa…

【React】高频面试题

1. 简述下 React 的事件代理机制&#xff1f; React使用了一种称为“事件代理”&#xff08;Event Delegation&#xff09;的机制来处理事件。事件代理是指将事件处理程序绑定到组件的父级元素上&#xff0c;然后在需要处理事件的子元素上触发事件时&#xff0c;事件将被委托给…

【Qt控件之QToolBox】介绍及使用

概述 QToolBox类提供了一个列式的带有选项卡的小部件条目。工具箱是一个小部件&#xff0c;以一个列式的选项卡显示在上方&#xff0c;并在当前选项卡下方显示当前的小部件条目。每个选项卡在选项卡列中有一个索引位置。选项卡的小部件条目是一个QWidget。 每个小部件条目都有…