【大白话前端 01】从输入网址到页面显示:网页加载的 6 个物理步骤

简介: 网页加载看似瞬间,实则历经6道精密协作:拆解URL、DNS查IP、TCP三次握手建连、HTTP发请求、服务器分包传输、客户端拼装还原。每步都依赖协议、缓存与容错机制,最终将纯文本HTML渲染为可视页面。(239字)

你在浏览器输入网址并回车,几秒后就看到了页面。但这短短几秒内,发生了极其密集的物理协作。

网页加载的本质,就是你的设备(客户端)跨越千山万水,找别人的电脑(服务器)要一份文本文件。

这不是随口一要就能拿到,机器必须经过以下 6 道关卡。

第 1 关:切碎 URL (拆解目标)

你输入的 https://baidu.com/en-US/ 叫 URL。机器首先会把它分成三个切片:

  • https:// (协议):规定了客户端跟服务器对话必须遵守的语言格式。
  • baidu.com (域名):帮服务器取的网名,方便人脑记忆,但机器读不懂。
  • /en-US/ (路径):指明你要拿的是服务器那台机器上,哪个文件夹下面的具体文件。

第 2 关:DNS 查询 (翻地址本)

底层网络通信全靠认 IP 地址(如 151.101.129.217),它根本不认识 baidu.com 这种方便人类记忆的拼音缩写。

所以浏览器必须停下来,去查一个名为 DNS 服务器 的巨型互联网通讯录,找到这个域名对应的服务器真实 IP 地址。

核心定律:就近查找原则 (多级缓存)
跨网络查 DNS 极慢。为了加快速度,机器会按离自己远近优先翻缓存:先看浏览器自己存了没 ➔ 再看你电脑系统存了没 ➔ 再问你家路由器 ➔ 全没有,最后才去远端查询 DNS 主服务器。一旦找到就立刻停手。

这些缓存咋来的?只要你以前访问过一次这个网站,或者这台路由器上别人访问过,机器就会默默把“域名和 IP 的对应关系”抄在小本上存一阵子。下次再来,直接翻本子,省去跨网提问的时间。

第 3 关:建立 TCP 连接 (修通物理公路)

拿到真实 IP 后,客户端和服务器依然不能直接传文件。因为互联网的底层物理线路极其不可靠,经常丢包掉线。

所以它们必须先建立一条带有确认与重传机制的虚拟管道这就叫 TCP 连接。机器通过经典的三次握手(来回对发寥寥几次试探包),确保双方收发通道都没瘫痪,这条路才算获批通车。

第 4 关:发 HTTP 请求 (递交订单单据)

路终于修通了。浏览器顺着管子,向远端的服务器递交一份极其严格的提货单HTTP 请求

这份订单是一段纯文本,里面核心只写着一条指令:GET /en-US/ HTTP/1.1(即:我要拿你硬盘上 /en-US 里的文件,咱们用 1.1 版本的 HTTP 标准格式对话)。

第 5 关:服务器拆包回传 (切碎发货)

服务器查验订单后,找出了你要的 HTML 文本。但它绝对不会一次性将这 2MB 的大文件整个发回去。

如果一次性全发,只要发到 99% 时由于你进了电梯丢了 1 秒钟的信号,整个 2MB 就只能重头再发。频繁重传巨大的文件,会迅速耗尽服务器带宽,导致极其恐怖的网络堵塞。

为了对抗丢包,服务器必须把完整的文本文件,切碎成几百上千个碎片(数据包)。每个碎片贴上一个编号标签(如 3/1000),像漫天撒网一样扔向互联网公路。中途哪个包不幸丢了,你的手机就只通知服务器单独重传那几 KB 的碎片即可,极大的解决了网络拥堵问题。

常见的发货暗号 (状态码)
在正式发送包裹之前,服务器会先快速回甩一个三位数的包裹单状态码,含义如下:

  • 200:文件找到了,订单通过,开始朝你丢包裹。
  • 404:对不起,你的路径给错了,这台服务器里查无此文件。
  • 500 / 503:这台主服务器内部代码崩溃了,或者被挤爆断电了。

第 6 关:拼装

那几百个切碎的文本包裹碎片,陆续接收到你的设备里。

一旦包裹被全部收齐,浏览器的底层收发器会立刻根据标签编号,把它们原封不动地重新拼合成那份完整的带有尖括号的纯文本(HTML 等)。

至此,长途跋涉向别人要一份文件的网络加载任务彻底完结。

紧接着,机器便会立刻开始 5 道引擎渲染流水线(解析 DOM 树 ➔ CSSOM 树 ➔ 最终绘制),把这份纯文本,画成精美的可交互网页。

至于浏览器具体是如何把代码一步步渲染成画面的?下一章我们接着拆解。

相关文章
|
JavaScript
js 使用fetch来上传文件 formdata()
js 使用fetch来上传文件 formdata()
|
5月前
|
前端开发 搜索推荐 定位技术
【大白话前端 08】HTML 文本语义化:6 类非 div 标签的速查指南
日常开发中,滥用`<span>`+CSS实现排版会损害SEO与无障碍访问。HTML提供6类语义化文本标签:`<blockquote>`/`<q>`(引用)、`<abbr>`(缩写)、`<address>`(联系人)、`<sup>`/`<sub>`(上下标)、代码专用标签(`<code>`/`<pre>`等)及`<time>`(时间)。它们自带样式、保障机器可读、复制不乱码,真正实现降本增效与可访问性双赢。(239字)
|
5月前
|
数据采集 前端开发 JavaScript
【大白话前端 04】HTML 头部的底层逻辑:决定网页解析与检索的隐形配置单
HTML文档的`<head>`是网页“幕后配置区”,虽不显示内容,却至关重要:它定义字符编码防乱码、设置`<title>`影响SEO与用户体验、通过`<meta>`提供搜索摘要和Open Graph社交卡片信息、添加favicon图标、引入CSS/JS资源,并声明网页语言。配置不当将导致白屏、乱码、搜不到、转发难看等问题。(239字)
|
5月前
|
Web App开发 前端开发 JavaScript
【大白话前端 03】Web 标准与最佳实践
同一套网页代码在Chrome和Safari中显示不一致?根源在于浏览器渲染引擎差异。Web标准正是为统一解析行为而设的底层规范——它约束浏览器,而非教导开发者。本文详解HTML(结构)、CSS(样式)、JS(交互)的职责边界,并强调三大工业级实践:语义化标签、三层分离、响应式设计,助你写出跨浏览器稳定、可维护的高质量前端代码。(239字)
|
4月前
|
JavaScript 前端开发 API
前端组件库——Element Plus知识点大全(一)
教程来源 https://tmywi.cn/category/lvxing.html Element Plus是饿了么团队打造的Vue 3官方UI库,深度集成TypeScript与Composition API,提供70+企业级组件、完善设计规范及主题定制能力。GitHub星标超2.5万,国内Vue 3中后台开发首选方案。
|
5月前
|
前端开发 搜索推荐
【大白话前端 07】`<ul>、<ol> 和 <dl>` 怎么选:前端页面的 3 种基础结构
HTML仅3种语义化列表标签:`&lt;ul&gt;`表并列项(如导航)、`&lt;ol&gt;`表有序步骤(如教程)、`&lt;dl&gt;`表术语解释(如FAQ)。嵌套时子列表须完整包裹于`&lt;li&gt;`内。标签重在表达数据关系,样式交由CSS处理。(239字)
|
5月前
|
数据采集 移动开发 前端开发
【白话前端 09】HTML网页结构搭建:从语义化标签到整站规划
本文以博客为例,详解HTML5语义化标签的实战应用:用`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`构建网页五大固定结构;厘清`&lt;article&gt;`(独立内容)与`&lt;section&gt;`(主题分组)的本质区别;纠正常见误用,并强调语义化核心价值——让机器(爬虫/读屏器)精准理解内容主次。
|
5月前
|
数据采集 前端开发 搜索推荐
【大白话前端 05】HTML标题与段落
HTML标签本质是“语义定义”,非视觉修饰。h1–h6构建逻辑标题骨架,须唯一且逐级;p划分段落,br仅限行内换行。语义化让搜索引擎精准索引、屏幕阅读器生成导航目录。结构与样式必须分离——CSS管外观,HTML管含义。(239字)
|
5月前
|
Web App开发 JavaScript 前端开发
【大白话前端 02】网页从解析到绘制的全流程
本章详解浏览器渲染五步流水线:DOM树构建、CSSOM树生成、渲染树合成、布局(重排)与绘制(重绘)。重点剖析JS阻塞机制及async/defer优化方案,并揭示transform为何比margin更高效——因其触发GPU合成而非重排。助你写出高性能网页。
|
5月前
|
移动开发 前端开发 搜索推荐
【大白话前端 06】HTML文本强调标签
本文详解HTML文本强调标签的语义化用法:`&lt;strong&gt;`表重要警告,`&lt;em&gt;`表语气重音,`&lt;i&gt;/&lt;b&gt;/&lt;u&gt;`各有特定语境含义。强调HTML只负责语义、样式交由CSS,禁用纯样式标签,助新手写出规范、可访问、利于SEO的网页。(239字)