前端知识站

简体中文

English

简体中文

English

外观

2025-11-29
2747
10.2m

Web 基础知识：互联网世界的运作原理与核心概念 ​

什么是 Web？ ​

Web（World Wide Web，万维网）是互联网上一个由无数网页组成的信息系统。它不等同于互联网，而是建立在互联网基础之上的一个服务。

Web vs 互联网 ​

很多人会混淆这两个概念，让我们用一个简单的类比来理解：

  • 互联网（Internet）：就像城市的道路网络，它提供了连接的基础设施
  • Web：就像在这些道路上行驶的快递服务，它是利用道路网络提供的一种服务

互联网还支持许多其他服务：

  • 电子邮件（Email）：使用 SMTP、POP3、IMAP 协议
  • 文件传输（FTP）：用于上传下载文件
  • 即时通信（IM）：如 WhatsApp、Telegram
  • 视频通话：如 Zoom、Skype

而Web特指通过HTTP/HTTPS 协议访问的网页服务。

Web 的诞生 ​

Web 由 Tim Berners-Lee 于 1989 年在瑞士欧洲核子研究组织（CERN）发明。他的初衷是：

  • 问题：科学家们需要一个简单的方式来分享研究文档
  • 解决方案：创建了一个基于超链接的文档系统
  • 核心发明：HTML（超文本标记语言）、HTTP（超文本传输协议）、URL（统一资源定位符）

这三个技术至今仍是 Web 的基石。

浏览器：通往 Web 世界的门户 ​

浏览器是什么？ ​

浏览器（Browser）是一个软件应用程序，它的作用是：

  1. 发送请求：向 Web 服务器请求资源（网页、图片、视频等）
  2. 接收响应：获取服务器返回的数据
  3. 渲染页面：将 HTML、CSS、JavaScript 转换成可视化的网页
  4. 处理交互：响应用户的点击、输入等操作

主流浏览器 ​

现代浏览器生态：

  • Google Chrome：全球市场份额最大，基于 Chromium 引擎
  • Microsoft Edge：微软的现代浏览器，也基于 Chromium
  • Safari：苹果设备的默认浏览器，使用 WebKit 引擎
  • Firefox：Mozilla 开发，注重隐私和开源，使用 Gecko 引擎
  • Opera：功能丰富，基于 Chromium

浏览器如何工作？ ​

当你在地址栏输入网址并按下回车，浏览器会执行以下步骤：

第一步：解析 URL

用户输入：https://www.example.com/products/laptop

浏览器会将 URL 分解为：

  • 协议：https（安全的 HTTP）
  • 域名：www.example.com
  • 路径：/products/laptop

第二步：DNS 查询

浏览器需要找到www.example.com对应的服务器 IP 地址：

www.example.com → DNS服务器查询 → 192.168.1.100（示例IP）

第三步：建立连接

使用 IP 地址连接到服务器，建立 TCP 连接（如果是 HTTPS，还会建立 SSL/TLS 加密连接）

第四步：发送 HTTP 请求

向服务器发送请求，说明想要获取哪个页面

第五步：接收响应

服务器返回 HTML 文档，可能还包括 CSS、JavaScript、图片等资源

第六步：渲染页面

浏览器将收到的 HTML 解析成 DOM 树，CSS 解析成样式规则，JavaScript 执行动态效果，最终呈现出完整的网页

URL：网络资源的地址 ​

URL 的构成 ​

URL（Uniform Resource Locator，统一资源定位符）就像现实世界的地址，它告诉浏览器去哪里找资源。

一个完整的 URL 包含多个部分：

https://www.example.com:443/products/laptop?color=silver&size=15#reviews

让我们逐一分解：

1. 协议（Protocol）

https://
  • 定义了浏览器和服务器如何通信
  • http：未加密的普通 HTTP
  • https：加密的安全 HTTP（推荐使用）
  • 其他协议：ftp、file、ws（WebSocket）等

2. 域名（Domain）

www.example.com
  • 人类易读的网站地址
  • 由多个部分组成：
    • com：顶级域名（TLD）
    • example：二级域名（你注册的域名）
    • www：子域名（可选，也可以是api、blog等）

3. 端口（Port）

:443
  • 服务器上的特定通道
  • HTTP 默认端口：80（通常省略不写）
  • HTTPS 默认端口：443（通常省略不写）
  • 自定义端口：如:8080、:3000

4. 路径（Path）

/products/laptop
  • 指定服务器上的具体资源位置
  • 类似文件系统的路径
  • /products/laptop 可能对应笔记本电脑的产品页面

5. 查询参数（Query String）

?color=silver&size=15
  • 传递给服务器的额外信息
  • 以?开始，多个参数用&连接
  • 格式：key=value
  • 例子：筛选条件、搜索关键词、页码等

6. 片段标识符（Fragment）

#reviews
  • 页面内的具体位置
  • 不会发送到服务器
  • 浏览器会自动滚动到对应的锚点

URL 示例解析 ​

电商网站产品页面：

https://shop.example.com/products/12345?utm_source=google#specifications
  • 使用 HTTPS 安全协议
  • 域名：shop.example.com
  • 产品 ID：12345
  • 来源：Google 广告
  • 定位到商品规格部分

视频网站：

https://video.example.com/watch?v=abc123&t=120
  • 观看视频
  • 视频 ID：abc123
  • 从第 120 秒开始播放

IP 地址与域名 ​

IP 地址：网络中的门牌号 ​

IP 地址（Internet Protocol Address）是设备在网络中的唯一标识，就像现实世界的门牌号码。

IPv4 地址（目前主流）：

192.168.1.1
  • 由 4 个 0-255 的数字组成
  • 用点分隔
  • 总共约 43 亿个地址（已经不够用）

IPv6 地址（未来趋势）：

2001:0db8:85a3:0000:0000:8a2e:0370:7334
  • 128 位地址，数量几乎无限
  • 用冒号分隔的十六进制
  • 解决 IPv4 地址不足的问题

域名：人性化的地址 ​

虽然计算机使用 IP 地址通信，但人类很难记住一串数字。域名就是为了解决这个问题：

从 IP 到域名：

难记：192.168.1.100
易记：www.example.com

DNS：域名系统 ​

DNS（Domain Name System）就像互联网的"通讯录"，它负责将域名转换为 IP 地址。

DNS 查询过程：

  1. 浏览器缓存：先检查本地是否记录过
  2. 操作系统缓存：检查系统 DNS 缓存
  3. 路由器缓存：家用路由器可能有缓存
  4. ISP DNS 服务器：网络服务提供商的 DNS 服务器
  5. 根 DNS 服务器：查询负责.com的服务器
  6. 顶级域 DNS 服务器：找到example.com的服务器
  7. 权威 DNS 服务器：获得最终的 IP 地址

整个过程通常在几毫秒内完成，但涉及多个层级。这种分层设计让 DNS 系统既高效又可靠。

hosts 文件 ​

在 DNS 查询之前，浏览器会先检查hosts 文件，这是一个本地的域名映射文件：

Windows 位置：

C:\Windows\System32\drivers\etc\hosts

macOS/Linux 位置：

/etc/hosts

用途：

  • 本地开发时，将域名指向本地服务器
  • 屏蔽广告网站
  • 测试网站迁移

Web 服务器与客户端 ​

客户端-服务器模型 ​

Web 采用客户端-服务器架构（Client-Server Architecture）：

客户端：

  • 发起请求的一方
  • 通常是浏览器
  • 也可以是移动应用、命令行工具等

服务器：

  • 响应请求的一方
  • 存储网站的文件和数据
  • 处理业务逻辑

交互流程：

客户端：我想要访问首页
   ↓ （发送请求）
服务器：收到，这是首页的HTML
   ↓ （返回响应）
客户端：收到，开始渲染页面

Web 服务器软件 ​

负责提供 Web 服务的软件：

  • Nginx：高性能、轻量级，适合高并发
  • Apache：老牌、功能强大、配置灵活
  • IIS：微软的 Web 服务器，Windows 平台
  • Tomcat：Java 应用服务器
  • Node.js：使用 JavaScript 编写的服务器

网页的组成部分 ​

一个完整的网页由三个核心技术构成：

1. HTML：结构 ​

HTML（HyperText Markup Language）定义了网页的内容和结构：

  • 标题、段落、列表
  • 图片、视频、链接
  • 表单、表格

类比：就像建筑的框架和墙体，定义了房子的结构

2. CSS：样式 ​

CSS（Cascading Style Sheets）定义了网页的视觉呈现：

  • 颜色、字体、大小
  • 布局、间距、对齐
  • 动画、过渡效果

类比：就像房子的装修，决定了房子的外观

3. JavaScript：行为 ​

JavaScript定义了网页的交互和动态行为：

  • 响应用户点击、输入
  • 动态修改内容
  • 与服务器通信
  • 复杂的计算和逻辑

类比：就像房子的智能家居系统，让房子能够响应和执行指令

它们如何协作 ​

HTML提供内容
   ⬇
CSS美化内容
   ⬇
JavaScript让内容动起来
   ⬇
用户看到完整的、可交互的网页

网页加载过程 ​

关键渲染路径 ​

当浏览器加载网页时，会经历以下步骤：

1. 构建 DOM（文档对象模型）

  • 解析 HTML 文档
  • 创建节点树结构
  • 每个 HTML 标签成为一个节点

2. 构建 CSSOM（CSS 对象模型）

  • 解析 CSS 样式
  • 创建样式规则树
  • 计算每个元素的最终样式

3. 创建渲染树

  • 将 DOM 和 CSSOM 结合
  • 只包含可见元素
  • 每个元素都有对应的样式信息

4. 布局（Layout）

  • 计算每个元素的位置和大小
  • 处理响应式布局
  • 考虑窗口大小、字体大小等因素

5. 绘制（Paint）

  • 将渲染树转换为屏幕上的实际像素
  • 按照正确的顺序绘制各层
  • 处理透明度、重叠等效果

6. 执行 JavaScript

  • 执行脚本代码
  • 可能修改 DOM 和 CSS
  • 触发重新布局和绘制

优化加载性能 ​

为了让网页加载更快，现代 Web 开发采用多种优化策略：

资源优化：

  • 压缩 HTML、CSS、JavaScript 文件
  • 优化图片大小和格式
  • 使用 CDN 分发静态资源

加载策略：

  • 懒加载（Lazy Loading）：只在需要时加载资源
  • 预加载（Preloading）：提前加载下一页可能需要的资源
  • 代码分割：将大文件拆分成小块

缓存机制：

  • 浏览器缓存：将资源存储在本地
  • CDN 缓存：使用距离用户更近的服务器
  • 服务器缓存：减少重复计算

总结 ​

Web 的核心概念回顾：

  1. Web 是建立在互联网上的服务：通过 HTTP/HTTPS 协议访问的网页系统

  2. 浏览器是访问 Web 的工具：解析 URL、发送请求、渲染页面、处理交互

  3. URL 是 Web 资源的地址：由协议、域名、路径、参数等组成

  4. DNS 将域名转换为 IP 地址：让人类易记的域名能够定位到具体的服务器

  5. 客户端-服务器模型：浏览器发起请求，服务器返回响应

  6. 网页由 HTML、CSS、JavaScript 构成：结构、样式、行为三位一体

  7. 网页加载是复杂的过程：涉及 DOM 构建、样式计算、布局、绘制等多个步骤

关键要点：

  • Web 不等于互联网，它是互联网上的一种服务
  • 浏览器通过一系列步骤将代码转换成可视化页面
  • URL 的每个部分都有特定的含义和作用
  • DNS 系统是 Web 正常运作的关键基础设施
  • 理解 Web 的工作原理有助于更好地进行前端开发