计算机网络笔记(四十一)——6.4万维网WWW

数据流向差异静态文档：服务器→客户端（单向）动态文档：数据库↔服务器↔客户端（双向）活动文档：客户端本地处理（自循环）安全机制区别动态文档需防范SQL注入活动文档需遵循CORS策略现代应用模式SSR（服务端渲染）：动态文档提升SEOCSR（客户端渲染）：活动文档提供更好UX博客是"网络日志（Weblog）"的简称，属于用户生成内容（UGC）平台。低创作门槛：仅需上网与文字输入能力，无需HTML技能

2301_79318558

1953人浏览 · 2025-06-14 08:00:00

2301_79318558 · 2025-06-14 08:00:00 发布

6.4.1万维网概述

1. 基本概念
万维网（World Wide Web，WWW）是一种基于超文本和超媒体的分布式信息系统。它是互联网上最流行的应用之一，允许用户通过超链接访问各种类型的资源（如文本、图像、视频等）。

核心特征：
- 超文本：包含链接到其他文档或资源的文本。
- 分布式：资源可分布在不同的服务器上。
- 跨平台：兼容多种设备和操作系统。

2. 发展历史

1989年：由Tim Berners-Lee在CERN（欧洲核子研究中心） 提出，目的是方便科学家共享研究成果。
1990年：第一个Web浏览器（WorldWideWeb）和服务器诞生。
1993年：以Mosaic浏览器为起点，WWW快速普及。

3. 核心技术要素
万维网的运行依赖于三大核心技术：

技术	作用
URI/URL	统一资源标识符/定位符，用于唯一标识和定位资源（如`http://example.com`）。
HTML	超文本标记语言，定义网页结构和内容（如段落、图片、链接）。
HTTP	超文本传输协议，客户端与服务器之间传输数据的协议。

4. 万维网的架构
采用客户端-服务器模型，包含以下角色：

客户端（Browser）：用户通过浏览器发起请求并渲染内容（如Chrome、Firefox）。
服务器（Web Server）：存储资源并响应客户端请求（如Apache、Nginx）。
通信协议（HTTP/HTTPS）：规范数据传输的格式和流程。

5. 工作流程示例
用户访问网页的典型流程如下：
在这里插入图片描述

6. 动态内容与静态内容

静态内容：预先存储在服务器上的固定文件（如.html、.css）。
动态内容：由服务器端程序实时生成（如PHP、Python脚本处理用户输入并返回结果）。

7. 万维网的核心服务

搜索引擎（如Google、Baidu）通过爬虫索引网页并返回搜索请求。
超链接实现跨文档跳转，形成网状信息结构。

8. 总结
万维网通过URI、HTML、HTTP技术的结合，构建了一个跨平台、分布式、可扩展的信息共享平台。其核心思想是通过超链接将分散的资源整合成一个统一的知识网络。

6.4.2统一资源定位URL

URL（Uniform Resource Locator）是互联网上用于标识和定位资源的标准地址格式。通过URL，用户可以唯一确定访问目标（如网页、图片、API等），并通过协议与服务器交互。

一、URL的基本结构

URL由协议、主机名、端口号（可选）、路径、参数（可选）、片段标识符（可选）组成，标准格式如下：

协议://主机名:端口号/路径?参数=值#片段标识符

1. 协议（Scheme）

指明访问资源使用的协议类型，常见协议包括：

http：超文本传输协议（默认端口80）
https：安全HTTP（默认端口443）
ftp：文件传输协议
mailto：电子邮件地址
file：本地文件协议

2. 主机名（Hostname）

表示资源所在服务器地址，可以是：

域名（如 www.example.com）
IPv4地址（如 192.168.1.1）
IPv6地址（如 [2001:db8::1]）

3. 端口号（Port）

协议默认端口可省略，非默认端口需显式指定（如 :8080）。

4. 路径（Path）

表示资源在服务器上的位置层次，类似文件路径：

/path/to/resource.html
/dir/index.html

5. 参数（Query Parameters）

以 ? 开始，键值对形式传递附加信息：

?key1=value1&key2=value2

6. 片段标识符（Fragment）

以 # 开头，指向资源内部的某个锚点：

#section1

二、URL示例分析

https://www.example.com:8080/path/to/page?user=alice&lang=cn#footer

部分	值
协议	`https`
主机名	`www.example.com`
端口号	`8080`
路径	`/path/to/page`
参数	`user=alice&lang=cn`
片段标识符	`footer`

三、URL编码与特殊字符

URL中非ASCII字符或保留字符（如空格、?、#）需用%加十六进制码转义：

字符	编码
空格	`%20`
`?`	`%3F`
`#`	`%23`

示例：

https://example.com/search?q=hello%20world

四、相对URL与绝对URL

绝对URL：完整资源地址，如 https://example.com/about.html
相对URL：基于当前页面的路径，如 /images/logo.png 表示 https://example.com/images/logo.png

五、URL工作流程

在这里插入图片描述

六、URL与URI的关系

URI（Uniform Resource Identifier）：更广泛的资源标识符概念。
URL是URI的子集，定位资源（如 http://...）。
URN（Uniform Resource Name）：仅标识资源，不提供位置（如 isbn:0451450523）。

七、现代浏览器简化行为

自动补全协议前缀（如输入 example.com 转为 http://example.com）。
自动编码特殊字符。
渲染时展示简化后的URL（隐藏默认端口和片段）。

6.4.3超文本传送协议HTTP

一、HTTP基本概念

1. 定义

HTTP（HyperText Transfer Protocol）是一种无状态的应用层协议，用于实现客户端（如浏览器）与服务器之间的通信。它允许客户端通过请求-响应模型获取或发送数据（如HTML文件、图片、视频等）。

2. 核心特性

无状态：服务器不保存客户端的请求历史，但可通过Cookie/Session管理状态。
基于TCP：HTTP依赖TCP实现可靠传输（三次握手建立连接，四次挥手关闭连接）。
可扩展：通过首部字段（Headers）支持灵活的功能扩展（如缓存、压缩）。

二、HTTP的工作流程

1. 客户端与服务器的交互

以下是HTTP请求-响应的基本流程：

在这里插入图片描述

三、HTTP报文结构

1. 请求报文

GET /index.html HTTP/1.1          ← 请求行（方法、URI、协议版本）
Host: www.example.com             ← 请求首部字段
User-Agent: Chrome/90.0          
Accept: text/html                 
                                  ← 空行分隔
[请求体（若为POST请求则包含）]

2. 响应报文

HTTP/1.1 200 OK                   ← 状态行（协议版本、状态码、原因短语）
Content-Type: text/html           ← 响应首部字段
Content-Length: 1234        
Date: Mon, 23 Oct 2023 00:00:00 GMT
                                  ← 空行分隔
<html>...</html>                  ← 响应体（如HTML文件内容）

四、HTTP核心组件

1. 请求方法

方法	作用	幂等性
GET	获取资源（如网页、图片）	是
POST	提交数据（如表单）	否
PUT	更新资源	是
DELETE	删除资源	是

2. 状态码分类

状态码	含义	常见值
2xx	成功	200 OK
3xx	重定向	301 Moved Permanently
4xx	客户端错误	404 Not Found
5xx	服务器错误	500 Internal Server Error

五、HTTP协议版本演进

1. HTTP/1.0 vs HTTP/1.1

特性	HTTP/1.0	HTTP/1.1
连接管理	非持久连接（每次请求新TCP连接）	默认持久连接（重用TCP连接）
管道化传输	不支持	支持
缓存控制	简单（通过Expires）	增强（Cache-Control首部）

2. HTTP/2优化

多路复用：单个连接支持并行请求，解决队头阻塞问题。
头部压缩：通过HPACK算法减少重复首部字段。
服务端推送：服务器主动发送资源（如CSS/JS文件）。

六、HTTP的无状态性与Cookie机制

1. 无状态问题

假设用户登录后，服务器无法记住其身份。解决方案：

Cookie: 服务器通过Set-Cookie首部下发唯一标识到客户端。
Session: 服务端保存用户会话数据，与客户端的Cookie关联。

2. Cookie流程

在这里插入图片描述

总结

HTTP是Web通信的基石，其核心是请求-响应模型与TCP连接管理。通过状态码、方法、首部字段等组件实现灵活的资源操作。从HTTP/1.1的持久连接到HTTP/2的多路复用，协议不断优化以满足现代Web的高性能需求。

6.4.4万维网的文档

一、万维网文档的类型

万维网中的文档主要分为静态文档、动态文档和活动文档三种类型，关键技术对比如下：

类型	技术实现	交互性	实时性	工作位置	典型技术
静态文档	预先存放的HTML文件	低	无需	服务器	纯HTML、CSS
动态文档	运行时生成内容	中	高	服务器	PHP、Java Servlet、CGI
活动文档	客户端执行程序	高	即时	客户端	JavaScript、Java Applet

二、静态文档（Static Documents）

1. 工作原理

在这里插入图片描述

2. 核心特性

预存储：服务器上的固定文件（.html/.css/.jpg等）
无实时处理：内容不随请求变化
快速响应：无需计算开销

3. 应用场景

公司主页
产品展示页面
文档说明页面

三、动态文档（Dynamic Documents）

1. 工作流程

在这里插入图片描述

2. 关键技术

服务端处理：PHP、Python Django、Java Spring
数据动态组装：模板引擎（Jinja2、Thymeleaf）
交互支持：通过表单提交参数

3. 典型特点

实时生成内容（如：最新股价）
依赖数据库交互
动态参数处理（URL参数/表单提交）

四、活动文档（Active Documents）

1. 核心架构

在这里插入图片描述

2. 实现技术对比

技术	执行环境	安全机制	当前使用现状
Java Applet	JVM插件	沙箱机制	已淘汰（安全限制）
JavaScript	浏览器引擎	同源策略	主流（ES6+标准）
WebAssembly	浏览器虚拟机	内存隔离	新兴技术

3. 核心优势

离线交互：例如网页游戏
即时响应：无需反复请求服务器
复杂交互：可视化图表/富文本编辑器

五、理解要点总结

数据流向差异：
- 静态文档：服务器→客户端（单向）
- 动态文档：数据库↔服务器↔客户端（双向）
- 活动文档：客户端本地处理（自循环）
安全机制区别：
- 动态文档需防范SQL注入
- 活动文档需遵循CORS策略
现代应用模式：
- SSR（服务端渲染）：动态文档提升SEO
- CSR（客户端渲染）：活动文档提供更好UX

6.4.5万维网的信息检索系统

一、搜索引擎的分类

信息检索系统可分为两类：

全文搜索引擎
- 工作原理：通过爬虫程序（Spider/Bot）抓取网页内容，建立索引数据库，实时匹配用户查询词。
- 特点：覆盖范围广，实时性强。示例：Google、Bing、Baidu。
- 流程图：

在这里插入图片描述

目录式搜索引擎
- 工作原理：依赖人工编辑或网站提交形成分类目录，用户按分类查找。
- 特点：准确性高，但更新慢。示例：早期的Yahoo。
- 流程图：

二、搜索引擎的核心组件

网络爬虫（Web Crawler）
- 功能：自动遍历网页，抓取HTML内容。
- 策略：
  - 广度优先（BFS）或深度优先（DFS）遍历。
  - 遵守robots.txt协议，避免抓取禁止页面。
  - 支持增量更新，区分已抓/未抓页面。
索引器（Indexer）
- 流程：
  - 分词：将文本拆分为词元（如中文分词）。
  - 去噪：过滤停用词（如“的”“和”）。
  - 归一化：转为小写、词干提取（如“running”→“run”）。
  - 生成倒排索引（Inverted Index）：
    - 结构：{词项 → (文档ID, 位置列表)}
    - 示例：
```
"网络" → [ (Doc1, 位置3), (Doc3, 位置5) ]
"协议" → [ (Doc2, 位置7), (Doc4, 位置2) ]
```
检索器（Retriever）
- 处理流程：
  - 查询解析：分词后生成词项列表。
  - 布尔模型：合并词项对应的文档集合（如AND/OR操作）。
  - 向量空间模型：计算文档与查询的余弦相似度。
  - 相关性排序：基于PageRank、TF-IDF等算法。
用户接口（UI）
- 功能：
  - 支持关键词提示（Autocomplete）。
  - 结果高亮与摘要生成（Snippet Generation）。
  - 支持高级语法（如site:example.com）。

三、搜索排序算法

PageRank算法
- 核心思想：通过网页链接关系衡量重要性。
- 公式：
  $\sum_{B→A} \frac{PR(B)}{L(B)}$
  （其中： $d$ 为阻尼因子， $L (B)$ 为B的出链数）
TF-IDF
- 词频-逆文档频率：权衡词项在文档中的重要性。
- 公式：
  $TF-IDF(t,d)=TF(t,d)×log⁡(NDF(t))\text{TF-IDF}(t,d) = \text{TF}(t,d) \times \log\left(\frac{N}{\text{DF}(t)}\right)$

四、典型查询处理流程

在这里插入图片描述

关键问题与优化

索引压缩：使用差值编码（Delta Encoding）减少存储开销。
分布式处理：MapReduce框架构建倒排索引（如Hadoop）。
缓存机制：对高频查询结果缓存，提升响应速度。
实时更新：增量索引应对网页新增/删除。

6.4.6博客和微博

一、博客（Blog）

1. 定义与特点

博客是"网络日志（Weblog）"的简称，属于用户生成内容（UGC）平台。核心特点包括：

低创作门槛：仅需上网与文字输入能力，无需HTML技能
交互性：用户可阅读、评论或仅做内容消费者
多样化内容：从个人日记扩展到各类主题内容
媒体转变：实现网民从纯消费者到"生产者+消费者"双重身份转化

2. 技术实现

在这里插入图片描述

3. 历史发展

术语演化：
- 1997年提出"Weblog"
- 1999年缩写为"blog"，开始动词化使用（写博客）
- 衍生词：Blogger（博主/博客用户）
技术对比：

维度	个人网站	博客
开发成本	域名/空间租用	完全免费
技术要求	HTML+网页制作	基础操作能力
内容更新效率	高耗时	实时发布

4. 典型案例

新浪博客通过门户入口访问

二、微博（Microblog）

1. 核心特性

碎片化记录：三言两语的即时动态
真实性要求：呈现真实生活片段
开放传播：成为"个人的通讯社"
技术特点：

2. 关键技术参数

字符限制：初始140英文→支持长微博
多媒体支持：图片/视频/音乐嵌入
消息传播：支持API推送（手机/网页/WAP）

3. 社会影响

政务应用：超过200+地方政府开通政务微博
舆情特性：
- 传播性：超传统媒体时效性
- 实时性：现场直播式传播
- 案例：2010年新浪月活达4.65亿

4. 发展节点

2009年爆发：新浪微博、腾讯微博等平台崛起
名人效应：覆盖文体明星/企业家群体

三、博客 vs 微博

对比维度	博客	微博
内容形式	结构化长文	碎片化短内容
创作深度	需逻辑性与完整性	即时思维片段
传播模式	封闭式受众传播	裂变式开放传播
技术复杂度	传统HTTP长连接	结合长轮询/Websocket
社交属性	弱	强（转发/评论互动）

四、关键技术延伸

HTTP协议应用：
- 博客依赖HTTP/1.1持久连接
- 微博采用混合协议（长短连接结合）
内容分发机制：
- CDN加速图文内容
- 边缘计算处理实时互动
安全控制：
- OAuth2.0认证
- 内容审核API集成

6.4.7社交网站

一、社交网站（SNS）核心架构

1. 基本流程示意图

在这里插入图片描述

2. 核心组件功能表

组件	功能描述	关键技术
负载均衡层	分发海量用户请求	Nginx/HAProxy、DNS轮询
业务逻辑服务器	处理用户认证、动态发布、消息推送	RESTful API、WebSocket
关系型数据库	存储用户资料、社交关系	MySQL分库分表、读写分离
NoSQL数据库	存储动态内容、即时消息	MongoDB、Redis（缓存热点数据）
对象存储/CDN	存储图片/视频文件	阿里云OSS、AWS S3 + 内容分发网络
消息队列	异步处理点赞/评论通知	RabbitMQ/Kafka

二、关键技术解析

1. 实时通信机制

WebSocket协议：突破HTTP短连接限制，实现消息即时推送
保活心跳包：每30秒发送空数据包维持TCP连接（Connection: keep-alive）
消息分流策略：按用户ID哈希分配长连接服务器

2. 社交图谱存储

在这里插入图片描述

采用图数据库（如Neo4j）存储复杂社交关系
三度人脉查询优化：BloomFilter预处理+内存级缓存

3. 内容分发策略

内容类型	存储策略	分发方式
文本动态	数据库分片存储	就近读取主副本
热门图片	CDN边缘节点缓存	客户端动态选择最优节点
直播视频流	海量推流服务器集群	RTMP协议接入 + HLS切片分发

4. 高并发应对方案

水平扩展：无状态服务器可快速扩容
熔断降级：自动屏蔽异常服务节点（如评论功能暂时关闭）
流量削峰：夜间活动提醒通过消息队列延时发送

三、典型协议交互流程

在这里插入图片描述

四、安全防护机制

加密传输层：
- TLS1.3加密通信
- 敏感字段二次加密（如密码SHA-256加盐哈希）

权限控制系统：

# 伪代码示例：动态可见性检验
def check_permission(user, post):
    if post.privacy == 'PUBLIC':
        return True
    elif post.privacy == 'FRIENDS':
        return user in post.owner.friends
    else:
        return user == post.owner

DDOS防御：
- 识别正常用户行为模式
- 自动阻断异常IP流量（阈值：>1000次/秒）

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git