当打开浏览器,从在地址栏里输入一个URL开始,到出现整个页面,网络上都发生了什么事

最新推荐文章于 2025-09-10 10:24:26 发布
转载 最新推荐文章于 2025-09-10 10:24:26 发布 · 3.4k 阅读 · 1

本文详细介绍了从用户在浏览器中输入URL到页面完全加载的过程。包括域名解析、HTTP请求、服务器处理、HTML渲染等多个步骤，揭示了网页加载背后的复杂机制。

1、浏览器查找域名的IP地址

导航的第一步是通过访问域名找出其IP地址。DNS查找过程如下：

  • 浏览器缓存——浏览器会缓存DNS记录一段时间（2分钟到30分钟不等并由浏览器决定）。
  • 系统缓存——如果浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用。
  • 路由器缓存—接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
  • ISP DNS缓存——接下来要检查的是ISP缓存DNS的服务器。在这里一般都能找到相应的缓存记录。
  • 递归搜索——你的ISP的DNS服务器从根域名服务器开始进行递归搜索（顶级域名服务器到一般DNS服务器）

备注：一下方法可以消除这个瓶颈：循环DNS（DNS查找时返回多个IP时的解决方案。举例来说，Facebook.com实际上就对应了四个IP地址。）

     负载平衡器（以一个特定IP地址侦听并将网络请求转发到群服务器上的硬件设备）

                                                    地理DNS根据用户所处的地理位置，通过吧域名映射到多个不同的IP地址提高可扩展性。

2、浏览器给web服务器发送一个HTTP请求

GET  http：//facebook.com/   HTTP/1.1

Accept:  application/x-ms-application,image/jpeg

User-Agent:Mozilla/4.0

Accept-Encoding:gzip,deflate

Connection:Keep-Alive

Host:facebook.com

3、如果是大型服务器发送永久重定向响应

HTTP/1.1 301 Moved Permanently

Cache-Control:private,no-store,on-cache

Expires:Sat,01 jan 2000

location:http://www.facebook.com

4、浏览器跟踪重定向地址

现在，浏览器知道了“http://  ”，在发送另外一个请求。

5、服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。表面上看起来是一个顺利的任务，但中间发生了很多有意思的东西：

a、WEB服务器软件

web服务器软件（IIS、Apache、……）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理时一个能够读懂请求并且能生成HTML来进行相应的程序

b、请求处理

请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据，并将数据存储在服务器上。然后，处理会生成一个HTML响应。

6、服务器发回一个HTML响应

HTTP/1.1 200 OK

Cache-Control:private,no-store……

……

<Doctype!>

7、浏览器开始显示HTML

在浏览器没有完整接收全部HTML文档时，它就开始显示这个页面了


8、浏览器发送获取嵌入在HTML中的对象

图片、css样表、javascript文件

9、浏览器发送异步(AJAX)请求



在别处找到de另一个答案：

打开浏览器输入URL 回车以后，就会在网络上寻找路由器，找到路由器里面以后，就读路由表理论上在12个路由表之内能找到你所输入的URL 然后空连接到这个地址 如果是http头然后就会进行默认的监听80端口如果是FTP头就会监听其它端口 监听正常以后会进行握手 握手就是确定协议类型 接着会话 你的电脑像URL提交需要信息的一个表单 电脑说我要你这个地址下面的所有WEB页面 那边的WEB站点会要你的电脑出示身份证看看你的电脑是不是好人 如果是好人 就说OK 我给你 但是我先给你一份我WEB里面资料的单据把 就是cookies 同时WEB站点在自己运算 把网页代码运算成用户可以接受的窗口网页 然后你的电脑拿到了这个单据 再根据单据里面的内容和WEB要 WEB就把运算好的网页返回到你的浏览器中。

从浏览器输入网址(URL)，到最终展示页面，都发生了什么？
CYK_byte的博客
11-01 4093
从（如下图）到你按下回车，再到最后出现这个网页界面（如下图）中间到底发生了什么？接下来就带你一步步进行解析~
【面试常问之网络】在浏览器上输入一个网址后，发生了什么？/HTTP的工作流程/DNS域名解析过程
m0_52165864的博客
08-14 8526
在浏览器中输入url并且获取响应的过程，其实就是浏览器和该url对应的服务器的网络通信过程。就比如在浏览器中输入：www.baidu.com，那么会返回一个百度搜素的界面，这其实就是浏览器和百度服务器之间的网络通信过程。浏览器就是客户端，用于发出请求，而百度的服务器就是服务器，用于接收并响应请求。......
网络面试——浏览器输入url到显示主页的过程
weixin_53432918的博客
03-22 1296
解析URL包括识别协议（例如HTTP、HTTPS）、主机名（例如www.example.com）、路径（例如/index.html）等。- 如果是HTML页面，浏览器会解析HTML文档，并同时获取并解析页面中引用的外部资源，如CSS样式表、JavaScript脚本、图像等。否则，将向DNS服务器发送DNS查询请求。- 请求头部可能包括信息如请求的方法（GET、POST等）、所需的页面或资源、浏览器的相关信息等。- 服务器接收到浏览器发送的HTTP请求后，会根据请求的内容和服务器的配置进行相应的处理。
从浏览器地址栏输入url到显示页面的步骤
m0_56896206的博客
04-17 315
从浏览器地址栏输入url到显示页面的步骤 在浏览器地址栏输入URL 浏览器查缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤 如果资源未缓存，发起新请求 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。 检验新鲜通常有两个HTTP头进行控制 HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间 浏览器解析URL获取协议，主机，端口，path
从浏览器地址栏输入url到显示页面的过程
zz130428的博客
12-14 670
第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态。第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK。第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，（如元素大小、位置的改变）（字体颜色、背景颜色的改变）第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）
从浏览器中输入一个URL之后会发生什么?
周鹏飞的IT学习之路
07-28 375
参考答案： 在浏览器中输入一个网址，首先要做的就是域名的解析，也就是域名->ip的解析，依次查看了浏览器缓存，系统缓存，hosts文件，路由器缓存，递归搜索根域名服务器，直到找到最终的ip地址。 然后就是TCP协议的三次握手建立连接，由浏览器发送一个HTTP请求；经过路由器的转发，通过服务器的防火墙，该HTTP请求到达了服务器；服务器处理该HTTP请求，返回一个HTML文件；浏览器解析该HTML文件，并且渲染显示在浏览器端。 ...
浏览器地址栏输入url回车后发生了什么
weixin_67791761的博客
09-28 1439
面试官:在浏览器地址栏输入地址后怎么发送请求的 我:按回车键 面试官:6
从浏览器地址栏输入url到页面显示的过程
weixin_43828011的博客
07-29 1675
文章目录1、输入地址（回车前）2、浏览器查看缓存（回车后）3、URL解析/域名解析4、浏览器与目标服务器建立TCP连接（tcp三次握手）5、浏览器通过http协议向目标服务器发送请求6、服务器处理请求并返回HTTP报文7、断开连接8、浏览器解析渲染页面（HTML解析过程中会逐步显示页面） 1、输入地址（回车前） 当我们开始在浏览器中输入网址的时候，浏览器可能会做一些预处理，已经在智能的匹配可能得 ...
在地址栏输入URL后，会发生哪些事
Async Cipher
09-10 1618
这个过程涉及了计算机网络的多个层面（应用层、传输层、网络层等）和浏览器的核心工作原理，构建 DOM → 构建 CSSOM → 构建渲染树 → 布局 → 绘制 → 合成理解这个流程对于前端性能优化至关重要，因为它帮助我们：最小化关键资源（如压缩、减少CSS/JS阻塞）。减少重排（回流）和重绘的次数（如使用transform代替修改top/left利用合成机制来创建平滑的动画。
从浏览器地址栏输入url到显示页面的步骤？
weixin_62889848的博客
01-06 473
从浏览器地址栏输入url到显示页面的步骤？
从浏览器地址栏输入url到显示主页的过程
07-14 1099
从浏览器地址栏输入URL到显示主页的过程是一个复杂而精细的交互过程，涉及多个步骤和组件的协同工作。
当你在浏览器地址栏输入一个URL后回车，页面出现之前发生了什么？
qq_30414027的博客
08-29 1475
网络通信是靠IP地址和端口号，当我们在地址栏输入主机名之后，浏览器会将主机名转换为IP地址才可以发送数据接受数据。 IP地址是主机和主机之间通信，端口号是应用程序和应用程序之间通信。 一、DNS解析（把主机名转换成IP地址） 查找主机名对应的IP地址，首先在浏览器缓存文件中查找，如果没有找到，继续在主机缓存中查找，是在hosts文件夹里面查找，如果没有就要通过DNS服务器查找。 DNS服务
从输入url到页面展示的过程
rock_23的博客
03-30 1459
唠唠叨：我不想误人子弟，我这篇算是搬运工，加上自己的理解做点总结，所以还请大家科学上网去看这篇：https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/
在浏览器输入一个URL回车之后发生了什么？
我是扣肉呀~
09-19 319
注意：本文的步骤是建立在，请求的是一个简单的HTTP请求，没有HTTPS、HTTP2、最简单的DNS、没有代理、并且服务器没有任何问题的基础上，尽管这不切实际。 大致流程： URL解析 DNS查询 TCP连接 处理请求 接受响应 渲染页面 1、URL解析 地址解析： 首先判断你输入的是一个合法的URL还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作。 HS...
计算机网络常见题目
m0_46663240的博客
06-21 1162
回答要有条理，记起来好记 是什么： TCP是传输控制协议，UDP是用户数据报协议，它们都是属于传输层的协议，为应用层提供服务，而且他们都具有复用也就是可以用于不同的应用层协议，分用功能，也就是可以解析不同数据报给应用层，但TCP是基于字节流的，只支持点对点的单播通信，是全双工通讯，UDP是基于报文的，支持，一对一，一对多，多对多等多种通信模式。 他们最主要的区别就是TCP是面向连接的，所以它比较可靠，而UDP是尽最大努力交付，面向无连接的，不保证可靠性，这样也就导致了，TCP需要大量操作去保证连接可靠性，如
在ajax发送数据时检查页面中的网络下状态一栏中有个禁止的图标是怎么回事
最新发布
09-12
<think> 我们正在讨论：在Ajax发送数据时，页面网络状态栏中出现禁止图标的原因及解决办法。 根据用户之前的上下文，我们知道用户遇到了页面跳转的问题，但现在已经解决（通过阻止默认行为）。现在用户关注的是另一个问题：在Ajax发送数据时，网络状态栏（通常是浏览器地址栏旁边的一个图标）出现禁止图标。 禁止图标通常表示浏览器阻止了某些内容的加载或请求。常见的原因包括： 1. 跨域请求被浏览器同源策略阻止（CORS问题） 2. 混合内容（HTTPS页面中请求HTTP资源） 3. 浏览器扩展（如广告拦截器）拦截了请求 4. 安全软件（如杀毒软件、防火墙）阻止了请求 5. 请求的URL无效或无法解析 6. 服务器端配置问题（如未返回正确的CORS头） 参考之前的引用，特别是引用[1]中提到状态码（3xx重定向，4xx客户端错误，5xx服务器错误）以及引用[2]中关于HTTP请求过程的描述，我们可以将问题定位到网络请求被浏览器阻止的情况。 因此，解答步骤应该是： 1. 确认请求是否被跨域策略阻止（CORS） 2. 检查是否由于混合内容（HTTPS页面中发送HTTP请求）被浏览器阻止 3. 检查浏览器扩展或安全软件是否拦截 4. 检查请求的URL是否正确 5. 检查服务器端配置（如CORS头设置） 具体解决方案： 第一步：检查浏览器控制台（Console）和网络（Network）选项卡 - 打开开发者工具（F12），查看Console中是否有红色错误信息，特别是关于CORS的错误（如Access-Control-Allow-Origin）。 - 在Network选项卡中查看该Ajax请求的状态码（Status）和响应头（Response Headers），确认是否有正确的CORS头。 第二步：检查请求URL的协议 - 如果当前页面是HTTPS，那么Ajax请求的URL也必须是HTTPS，否则浏览器会阻止。 第三步：暂时禁用浏览器扩展 - 尝试在无痕模式下运行页面（无痕模式通常禁用扩展），或者手动禁用广告拦截器等扩展。 第四步：检查URL是否正确 - 确保Ajax请求的URL没有拼写错误，且服务器可达。 第五步：服务器端配置CORS - 如果是跨域请求，服务器需要设置响应头，例如： Access-Control-Allow-Origin: * 或者具体的域名 Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type 另外，引用[4]中提到了使用Fiddler等工具查看HTTP请求和响应，我们可以借助这些工具来详细分析请求和响应头。 总结：禁止图标通常表示请求被浏览器安全策略阻止，最常见的原因是CORS和混合内容。通过开发者工具可以诊断具体原因，然后针对性地解决。 注意：在回答中我们不使用代码块，而是用自然语言描述，但可以给出示例配置（如CORS头）。 同时，根据要求，我们需要在回答末尾生成相关问题。 因此，回答结构如下： 1. 解释禁止图标出现的可能原因（重点突出CORS和混合内容） 2. 提供逐步排查的方法（利用开发者工具） 3. 针对每种原因给出解决办法 4. 生成相关问题 注意：由于用户使用的是Django，我们可以提及Django中如何配置CORS（如使用django-cors-headers中间件）。 最后，在引用处添加引用标记。 </think> 在 Ajax 发送数据时，页面网络状态栏出现禁止图标（🚫）通常表示**浏览器主动阻止了请求**。以下是主要原因及解决方案，结合开发者工具诊断流程： --- ### 常见原因及解决方案 #### 1. 跨域请求被阻止（CORS错误）[^1] **现象**： 控制台报错 `Access-Control-Allow-Origin`，状态码为 403 **原因**： Django 未配置跨域资源共享，浏览器因同源策略阻止请求 **解决方案**： ```python # settings.py INSTALLED_APPS = [ ..., 'corsheaders' # 添加应用 ] MIDDLEWARE = [ ..., 'corsheaders.middleware.CorsMiddleware', # 需放在首位 ] CORS_ALLOWED_ORIGINS = [ "http://localhost:8000", # 允许的前端域名 "https://your-production-domain.com", ] ``` #### 2. CSRF 验证失败[^2] **现象**： 状态码 403，响应包含 `CSRF verification failed` **原因**： Django 默认要求 POST 请求携带 CSRF token **解决方案**： 前端 Ajax 添加 CSRF token： ```javascript // 从cookie获取token function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } // 发送请求时携带 xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); ``` #### 3. 混合内容阻塞（HTTPS/HTTP冲突）[^3] **现象**： 控制台警告 `Mixed Content`，状态码被替换为 `(blocked)` **原因**： HTTPS 页面请求 HTTP 资源被浏览器阻止 **解决方案**： ```nginx # 服务器强制HTTPS（Nginx示例） server { listen 80; server_name yourdomain.com; return 301 https://$host$request_uri; } ``` #### 4. 浏览器扩展拦截 **现象**： 仅特定浏览器出现，禁用扩展后恢复正常 **解决方案**： - 禁用广告拦截器（如 uBlock Origin） - 检查隐私扩展（如 Privacy Badger） - 使用隐身模式测试 --- ### 诊断流程（使用开发者工具）[^4] 1. **打开 Network 面板** `F12` → `Network` → 重现问题 2. **检查被阻止的请求** - 红色状态码（如 403） - `Status` 列显示 `(blocked)` 3. **查看响应头** 重点关注： ```http Access-Control-Allow-Origin: * X-Frame-Options: DENY # 可能导致嵌入拦截 ``` 4. **使用 Fiddler/Wireshark** 确认是否实际发出请求（可能被客户端安全软件拦截） --- ### 其他可能原因 | 原因 | 现象 | 解决方案 | |---------------------|--------------------------|------------------------------| | 无效的 Content-Type | 状态码 415 | 设置头：`xhr.setRequestHeader('Content-Type', 'application/json')` | | 防火墙拦截 | 请求完全消失 | 关闭本地防火墙测试 | | DNS 解析失败 | 状态码 `ERR_NAME_NOT_RESOLVED` | 检查域名配置 | | 无效的 HTTP 方法 | 状态码 405 | 确认视图支持该请求方法 | --- ### 预防措施 1. **始终在 Django 视图检查请求类型**： ```python def api_view(request): if request.method != 'POST': return JsonResponse({'error': 'Method not allowed'}, status=405) ``` 2. **启用 Django 安全中间件**： ```python # settings.py SECURE_BROWSER_XSS_FILTER = True SECURE_CONTENT_TYPE_NOSNIFF = True ``` 3. **使用跨域配置工具**： ```bash pip install django-cors-headers ``` > **关键原则**：通过开发者工具 `Network` 面板分析具体拦截原因 → 针对性地解决协议/头部/配置问题[^4]。 --- ### 相关问题 1. 如何在 Django 中为 API 视图统一处理 CORS 配置？ 2. 当 Ajax 请求被浏览器拦截时，如何通过错误回调进行优雅降级？ 3. 使用 HTTPS 的 Django 站点需要哪些强制安全配置？ 4. 如何区分请求是被浏览器阻止还是被服务器拒绝？ 5. 在混合内容（HTTP/HTTPS）环境下，如何安全加载第三方资源？ [^1]: 跨域请求被浏览器安全策略阻止 [^2]: Django 的 CSRF 验证机制导致请求被拒 [^3]: HTTPS 页面加载 HTTP 资源触发混合内容阻塞 [^4]: 开发者工具 Network 面板可诊断具体拦截原因
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值