第六章 浏览器与网站协作

1. 浏览器、网站和网页分别是什么

浏览器是运行在本地设备上的软件，用来请求、读取并显示网页内容。Chrome、Edge、Safari 和 Firefox 都属于浏览器。

网站是一组放在服务器上、能够通过网络访问的内容和服务。它可以只是展示信息，也可以处理登录、提交表单、发布文章和保存数据。

网页则是用户在浏览器里看到的一张具体页面。例如首页、文章页、搜索页和个人设置页，都是同一个网站中的不同网页。

可以先用一个简单关系把它们分开：浏览器负责呈现，网站负责提供，网页是最终呈现出来的一个具体界面。

2. URL：网页的完整地址

URL 就是浏览器访问资源时使用的地址。https://wyaihub.com/articles/browser-and-web-collaboration?from=home#summary 这一串看起来很长，但每一段都有位置：

部分	示例	它说明什么
协议	https	浏览器用什么规则与网站通信
域名	wyaihub.com	想访问哪一个网站
路径	/articles/browser-and-web-collaboration	网站中的哪一项内容
参数	?from=home	随请求附带的补充信息
锚点	#summary	页面加载后跳到哪个位置

域名如何找到服务器、请求如何穿过网络，第五章已经讲过。这里先记住：URL 不只是网站名字，它也是浏览器定位具体资源的地址。

3. 浏览器打开网页时，发生了什么

在地址栏输入 URL 后，浏览器会通过网络请求服务器。服务器返回的通常不只是一段文字，还包括页面需要的结构、样式、交互代码、图片和字体等资源。浏览器拿到这些资源，再把它们组织成可阅读、可点击的页面。

页面显示得慢，不一定只是“网慢”。可能是资源还在下载，服务器处理得慢，图片太大，也可能是浏览器正在执行较多脚本。浏览器负责最后一步呈现，但等待可能发生在整条链路上的任何位置。

4. 一个网站背后有哪些部分

网页被打开时，浏览器看到的是前端；但一个需要登录、搜索、发布内容或保存数据的网站，后面通常还有更多部分。

部分	主要负责什么
前端	把内容和操作界面呈现在浏览器中
后端	接收请求、处理规则、组织结果并返回给前端
数据库	保存用户、文章、评论、订单等结构化信息
文件存储	保存图片、附件、视频等较大的文件

它们不是绝对固定的四个独立盒子：小网站可能把多项能力放在一起，复杂系统则会继续拆出搜索、缓存、消息队列和更多服务。但先分清这四种职责，已经足够理解大多数网站的基本协作。

5. HTML、CSS、JavaScript 分别负责什么

浏览器收到网页资源后，最常见的三类内容是 HTML、CSS 和 JavaScript。它们不是三种互相替代的网页，而是从不同方向共同组成一个页面。

• HTML 描述页面有什么：标题、段落、图片、按钮、表单等结构。
• CSS 描述页面怎样看起来：颜色、大小、间距、排版和不同屏幕上的布局。
• JavaScript 描述页面如何响应操作：点击后切换内容、提交表单、请求新数据、更新界面。

把它们放在一起理解会更自然：HTML 像页面的骨架，CSS 让它具备视觉秩序，JavaScript 让它能根据人和数据的变化作出反应。

6. Cookie、缓存与登录状态

访问网站时，浏览器会在本地保存一部分信息。它们都和“浏览器记住了什么”有关，但用途不同。

内容	常见作用	需要知道的区别
Cookie	让网站识别一次访问或维持登录状态	通常是较小的、会随请求一起携带的信息
缓存	暂存图片、脚本、样式等可复用资源	重点是减少重复下载、加快页面打开
本地数据	保存偏好、草稿或应用状态	形式更多，不一定都会自动发送给网站

所以，清理缓存有时能解决页面一直显示旧内容；清理 Cookie 或网站数据，则可能让你退出登录。它们都在本地，但并不保存同一种东西。

7. HTTPS 保护什么，不保护什么

地址栏里出现锁形标记，通常表示浏览器与网站正在使用 HTTPS。它会让传输过程经过加密，并帮助浏览器确认正在连接的站点身份，减少数据在路上被偷看或篡改的风险。

但 HTTPS 不代表这个网站的内容一定可靠，也不代表账号一定不会被钓鱼页面骗走。它保护的是浏览器和目标网站之间的传输过程，不能替你判断你打开的是否是一个值得信任的站点。

本章小结

• 浏览器是本地的软件，网站是远程提供内容和服务的系统，网页是浏览器中呈现的具体页面。
• URL 由协议、域名、路径、参数和锚点等部分组成，用来定位一个具体资源。
• 网站通常由前端、后端、数据库和文件存储协作；它们负责呈现、处理、保存结构化数据和保存文件。
• HTML 负责结构，CSS 负责样式，JavaScript 负责交互；三者一起组成现代网页的基础。
• Cookie、缓存和本地数据用途不同；HTTPS 保护传输过程，不替代对网站本身的判断。