当前位置： 首页 > article >正文

总结“从输入URL到展示出页面“ 过程发生了什么

article 2026/5/9 3:08:47
当我们在浏览器地址栏输入URL并按下回车后背后会经历一系列复杂的步骤最终将网页内容呈现在眼前整个过程可以分为以下几个阶段一、URL解析与处理浏览器首先会判断输入的内容是否为合法URL如果是域名如www.example.com会先在本地缓存、系统hosts文件中查找对应的IP地址如果没有找到则进入DNS域名解析若URL包含路径、查询字符串等如www.example.com/article?id123浏览器会将其拆分明确请求的资源位置。二、DNS域名解析浏览器向本地DNS服务器发起请求查询域名对应的IP地址 若本地DNS服务器没有缓存它会向根域名服务器、顶级域名服务器如.com服务器、权威域名服务器依次查询最终获取目标服务器的IP地址。三、TCP建立连接(三次握手)浏览器通过IP地址与目标服务器建立TCP连接1. 客户端发送SYN包请求建立连接2. 服务器返回SYNACK包确认请求并同步序列号3. 客户端发送ACK包确认连接建立。此处具体见TCP/IP博客四、发送HTTP/HTTPS请求浏览器向服务器发送HTTP请求或HTTPS的加密请求请求中包含1.首行:请求方法如GET、POST、请求路径、HTTP版本2.请求头如User-Agent、Cookie、Host等3.请求体若为POST请求包含提交的数据。*如果是HTTPS还会先进行TLS握手完成加密密钥协商确保通信安全。五、服务器处理请求并返回响应1.服务器接收到请求后根据请求路径和参数由后端程序处理逻辑查询数据库或读取静态文件。2.服务器生成HTTP响应中包含状态码如200 OK表示成功404 Not Found表示资源不存在等响应头如Content-Type、Content-Length等响应体HTML、CSS、JS、图片等资源内容六、浏览器接收并解析响应浏览器接收到响应后先根据Content-Type判断资源类型如果是HTML开始解析HTML构建DOM树 解析过程中遇到CSS、JS、图片等资源会发起额外的请求如CSS文件、JavaScript脚本、图片资源同时解析CSS构建CSSOMCSS对象模型将DOM树与CSSOM结合生成渲染树七、页面渲染与展示浏览器根据渲染树进行布局计算每个元素的位置和大小然后进行绘制将元素的颜色、样式等绘制到屏幕上最后进行合成将不同图层合并最终展示完整的页面。八、TCP断开连接四次挥手页面加载完成后客户端与服务器通过四次挥手关闭TCP连接释放资源。九、总结整个过程可以概括为URL解析 -DNS解析 -TCP建立连接 -HTTP请求 -服务器响应 -浏览器接收并解析 -页面渲染并展示 -TCP断开连接

相关文章：

总结“从输入URL到展示出页面“ 过程发生了什么

当我们在浏览器地址栏输入URL并按下回车后，背后会经历一系列复杂的步骤，最终将网页内容呈现在眼前，整个过程可以分为以下几个阶段：一、URL解析与处理浏览器首先会判断输入的内容是否为合法URL，如果是域名（如…...

编程日记 2026/5/9 3:08:47

javassit使用过程的坑

https://segmentfault.com/a/1190000044154053 https://blog.csdn.net/Kingairy/article/details/104003524 经过不断的试错和研究&#xff0c;总结如下&#xff1a; 以CtMethod#setBody 方法为例 不要在代码中使用范型&#xff0c;哪怕是定义List<Object>这样基础范型…...

编程日记 2026/5/9 3:06:43

L-system与硬件补偿技术在自动钢琴音乐生成中的应用

1. L-system与硬件补偿技术概述L-system&#xff08;Lindenmayer系统&#xff09;作为一种形式化语法&#xff0c;最初由生物学家Aristid Lindenmayer于1968年提出&#xff0c;用于模拟植物的生长过程。其核心机制是通过字符串重写规则生成具有自相似性的复杂结构。在音乐生成领…...

编程日记 2026/5/9 3:06:42

从零构建团队专属CLI工具：自动化项目脚手架与代码生成实践

1. 项目概述&#xff1a;一个命令行工具的诞生与价值最近在整理自己的工具链&#xff0c;发现一个挺有意思的现象&#xff1a;很多开发者&#xff0c;包括我自己&#xff0c;都习惯性地把一些高频、重复的脚本操作散落在各个项目的根目录下&#xff0c;或者干脆写个简陋的Makef…...

编程日记 2026/5/9 3:06:42

实战入口：Claude 到底在哪用？网页版、桌面端与多端场景全解

最近在 se.zzmax.cn 上直接体验 Claude 各型号&#xff0c;发现很多同学第一次想用 Claude&#xff0c;卡住的往往不是“怎么问”&#xff0c;而是“从哪儿进”。Anthropic 目前提供了多个官方入口&#xff0c;不同入口适配的使用场景、能力和 workflow 集成深度并不一样。下面…...

编程日记 2026/5/9 3:06:42

MCP协议赋能Ollama：本地大模型工具调用的标准化实践

1. 项目概述&#xff1a;当MCP遇上Ollama&#xff0c;本地AI工作流的“最后一公里” 如果你和我一样&#xff0c;是个喜欢折腾本地大模型的开发者&#xff0c;那你肯定对Ollama不陌生。它让在本地运行Llama、Mistral、Qwen这些开源大模型变得像 ollama run llama3.2 一样简单…...

编程日记 2026/5/9 3:06:31

redis 8.6.3 最新版重磅发布：安全修复、核心 Bug 修复与模块优化全面升级

2026年5月5日&#xff0c;Redis 8.6.3 正式发布。 这是一个非常值得关注的版本&#xff0c;因为官方明确标注了 Update urgency: SECURITY&#xff0c;说明本次更新包含安全修复&#xff0c;建议尽快升级。 从发布内容来看&#xff0c;8.6.3 不只是一次常规的小版本迭代&#x…...

编程日记 2026/5/9 3:04:30

2026-05-09：不同元素和至少为 K 的最短子数组长度。用go语言，给定一个整数数组 nums 和一个整数 k。你需要在数组中找一个连续的非空子数组，使得这个子数组里不同元素的种类数对应的取值之

2026-05-09&#xff1a;不同元素和至少为 K 的最短子数组长度。用go语言&#xff0c;给定一个整数数组 nums 和一个整数 k。你需要在数组中找一个连续的非空子数组&#xff0c;使得这个子数组里不同元素的种类数对应的取值之和&#xff08;也就是&#xff1a;每个数只算一次&am…...

编程日记 2026/5/9 3:04:29

【Python实战】告别杂乱脚本！基于SOLID原则与策略模式的 PDF转Word 批量处理系统

&#x1f4dd; 前言&#xff1a;为什么要造这个“轮子”&#xff1f; 在日常的学习和开发中&#xff0c;我们经常遇到需要将大量 PDF 转换为 Word 文档的场景。市面上的在线工具要么满屏广告&#xff0c;要么限制文件大小和数量&#xff1b;而网上的 Python 脚本往往是简单的“…...

编程日记 2026/5/9 3:04:27

告别冗余！Linux软件卸载命令全攻略，让你的系统焕然一新

还在为Linux系统软件残留烦恼吗&#xff1f;本攻略汇集APT、YUM、DNF、RPM等主流包管理器的卸载命令&#xff0c;并提供手动安装软件的清理方法。告别臃肿&#xff0c;轻松卸载&#xff0c;让你的Linux系统告别卡顿&#xff0c;运行如飞。在Linux系统中&#xff0c;卸载软件的方…...

编程日记 2026/5/9 3:04:27

【线性代数笔记】秩、线性相关性与等价向量组的核心逻辑总结

博主简介&#xff1a;05后理工男&#xff0c;CSDN 技术博主。目前正在攻读计算机专业&#xff0c;同步复习 408 及数学基础。 笔记说明&#xff1a;本文为线性代数关于“秩”与“向量组相关性”的学习笔记&#xff0c;重点记录了判定方法与核心定理。一、 线性表示与方程组解的…...

编程日记 2026/5/9 3:04:26

Cursor AI编程效率追踪器：本地化数据采集与可视化分析实践

1. 项目概述&#xff1a;一个为开发者量身定制的效率追踪器最近在GitHub上看到一个挺有意思的项目&#xff0c;叫cursor-usage-tracker。光看名字&#xff0c;你可能觉得这又是一个平平无奇的“使用情况追踪器”。但如果你是一位深度使用Cursor&#xff08;那个集成了AI能力的现…...

编程日记 2026/5/9 3:02:25

BarTender如何取消激活和重新激活

一、取消激活1、多台电脑、服务端取消激活方法A、打开Administration ConsoleB、许可—选中当前许可证—右键选择取消激活许可证C、点击下一步D、取消激活中E、取消激活成功&#xff0c;许可证没有处于激活的状态2、只安装了单台电脑的情况取消激活可以按照上述取消激活方式进行…...

编程日记 2026/5/9 3:02:25

OpenClaw三层记忆系统：为AI助手构建可检索的长期知识库

1. 项目概述如果你和我一样&#xff0c;长期与各种AI助手打交道&#xff0c;无论是编程、写作还是日常任务规划&#xff0c;最头疼的问题之一就是“记忆”。每次对话都像是一次全新的邂逅&#xff0c;助手记不住你昨天提到的项目细节&#xff0c;也忘了上周讨论过的技术方案。这…...

编程日记 2026/5/9 3:02:25

WebMCP：连接Web应用与AI模型的统一协议服务器实践

1. 项目概述&#xff1a;一个连接Web应用与AI模型的“万能适配器”最近在折腾一些AI应用开发时&#xff0c;我遇到了一个挺典型的痛点&#xff1a;手头有各种功能强大的大语言模型&#xff08;LLM&#xff09;&#xff0c;比如OpenAI的GPT、Anthropic的Claude&#xff0c;或者开…...

编程日记 2026/5/9 3:02:25

Aegis-Veil：轻量级可编程应用安全中间件实战指南

1. 项目概述&#xff1a;一个面向开发者的安全防护工具 最近在梳理自己项目的安全配置时&#xff0c;又想起了之前用过的一个挺有意思的工具——Aegis-Veil。这名字听起来就很有“盾与面纱”的意味&#xff0c;直指其核心&#xff1a;为你的应用或服务提供一层坚固的防护&#…...

编程日记 2026/5/9 3:02:23

实测对比：用Python+Azure语音服务做个桌面小工具，通义灵码和Claude3谁更省心？

PythonAzure语音服务实战&#xff1a;通义灵码与Claude3在桌面工具开发中的深度对比 最近在开发者社区里&#xff0c;关于AI编程助手的讨论越来越热烈。作为一个经常需要快速实现原型工具的Python开发者&#xff0c;我决定亲自测试两款热门AI编程助手——通义灵码和Claude3&…...

编程日记 2026/5/9 3:00:22

GPT-5.5代码能力突破：88.7%意味着什么？

GPT-5.5 发布当天&#xff0c;最被引用的一个数字是 88.7%——SWE-bench Verified 的得分。同一模型在更难的 SWE-Bench Pro 上达到 58.6%。两个数字放在一起看&#xff0c;比单独看任何一个都更有意义。拿同一个编程任务丢给 GPT-5.5 和其他模型&#xff0c;对比输出结果&…...

编程日记 2026/5/9 3:00:22

Gemini31Pro接入企业知识库实践

概要Gemini 3.1 Pro 是 Google DeepMind 于 2026 年 2 月发布的旗舰模型&#xff0c;支持开发者通过 Gemini API、Vertex AI 等渠道调用。该模型采用 MoE&#xff08;混合专家&#xff09;架构&#xff0c;上下文窗口扩展至 100 万 token&#xff0c;支持文本、图片、PDF、视频…...

编程日记 2026/5/9 3:00:21

GitHub知识聚合库：如何高效利用开源项目构建个人技术学习体系

1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“khrum-khrum/mega-itmo”。光看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但点进去之后&#xff0c;我发现这其实是一个围绕“信息技术、管理与优化”领域&#xff08;ITMO是常见缩写&a…...

编程日记 2026/5/9 3:00:20

机器人技能实验复现指南：从开源机械爪到可复现研究

1. 项目概述&#xff1a;从开源代码到可复现的机器人技能实验最近在机器人技能学习社区里&#xff0c;一个名为“openclaw-experiment-report-skill”的项目引起了我的注意。这个项目标题直译过来是“开源爪实验报告技能”&#xff0c;听起来像是一个围绕开源机械爪硬件平台进行…...

编程日记 2026/5/9 3:00:17

openKylin项目新增捐赠人

2026年4月&#xff0c;openKylin项目新增捐赠人openKylin社区新增捐赠人龙芯中科技术股份有限公司成为白银捐赠人此芯科技集团有限公司成为白银捐赠人关于openKylinOpenAtom openKylin&#xff08;简称“openKylin”&#xff09;是由开放原子开源基金会孵化及运营的开源项目。社…...

编程日记 2026/5/9 2:58:17

navicat 17 lite 安装教程

搜索了一圈说 navicat比DBeaver好用且自己玩社区版够用 navicat 17 lite 安装教程 1. 下载安装 官网地址 下载地址 找到 Navicat Premium Lite 17 → Windows&#xff0c;下载 64 位 安装包&#xff1a; 应该随便选一个就行&#xff08;选第一个就行&#xff09; 点击了下载…...

编程日记 2026/5/9 2:58:17

从JY901S数据到实际应用：STM32CubeMX HAL实现姿态解算与OLED显示（MPU6050升级指南）

从JY901S到OLED姿态显示&#xff1a;STM32CubeMX HAL实战指南 在嵌入式开发中&#xff0c;将原始传感器数据转化为直观可视信息是产品原型开发的关键环节。JY901S作为一款高集成度的姿态传感器模块&#xff0c;通过串口输出丰富的运动数据&#xff0c;但如何将这些数据有效融合…...

编程日记 2026/5/9 2:58:17

什么是数据接口

数据接口的概念与定义数据接口是不同系统、应用程序或组件之间进行数据交换的标准化通道。它定义了数据如何被请求、传输和解析&#xff0c;确保不同平台能够无缝协作。常见的数据接口类型包括API&#xff08;应用程序编程接口&#xff09;、Web Service、数据库连接接口等。数…...

编程日记 2026/5/9 2:58:17

避坑指南：STM32 TIM DMA Burst功能配置时，DCR寄存器这几个参数千万别设错

STM32 TIM DMA Burst配置实战&#xff1a;从波形异常到精准调试的避坑手册 调试实验室里&#xff0c;示波器屏幕上跳动的PWM波形本该是整齐的方波队列&#xff0c;此刻却呈现出频率飘忽、脉冲缺失的混乱状态——这是许多嵌入式工程师在使用STM32的TIM DMA Burst功能时常见的&qu…...

编程日记 2026/5/9 2:58:15

3D数字孪生项目 LCP 优化指南

LCP&#xff08;Largest Contentful Paint&#xff0c;最大内容绘制时间&#xff09;是衡量页面加载体验的核心指标&#xff0c;在 3D 开发项目中尤为关键。 与传统网页不同&#xff0c;3D 数字孪生系统的 LCP 问题往往是 CPU GPU 网络 资源 主线程 共同阻塞的结果&#xf…...

编程日记 2026/5/9 2:56:15

Godot游戏集成Nakama服务器：开源后端引擎与实时对战开发指南

1. 项目概述&#xff1a;当游戏服务器遇上开源引擎如果你正在用Godot引擎开发一款需要在线功能的游戏&#xff0c;比如多人对战、排行榜、实时聊天或者玩家数据云端存储&#xff0c;那你大概率绕不开一个核心问题&#xff1a;后端服务器怎么搞&#xff1f;自己从头搭建一套&…...

编程日记 2026/5/9 2:56:14

自建Signal服务器：Signal-Bastion部署与私有安全通信实践

1. 项目概述&#xff1a;一个隐秘通信的守护者最近在折腾一些需要安全通信的项目&#xff0c;对市面上各种方案做了不少调研和测试。在这个过程中&#xff0c;我遇到了一个挺有意思的开源项目——smouj/Signal-Bastion。这个名字本身就很有味道&#xff0c;“Signal”指的是那个…...

编程日记 2026/5/9 2:56:14

DVWA靶场通关指南之爆破（Brute Force）篇-中难度（Medium）

一、Brute Force 简介 在 DVWA 中&#xff0c;Brute Force 模块主要用于演示暴力破解的过程。暴力破解是通过尝试所有可能的密码组合来获取正确密码的一种攻击方式。 二、复现过程 1.原理 中难度增加了一定的限制&#xff0c;比如在一定时间内多次尝试错误密码后会进行短暂的封…...

编程日记 2026/5/9 2:56:14