编程语言研究书库
HTML/CSS/JavaScript Web 开发

网页与浏览器 — 你看到的页面背后发生了什么

网页与浏览器 — 你看到的页面背后发生了什么

这一章讲三件事: 「Web 开发」这个词到底指什么;你在浏览器里看到一个页面时, 背后发生了哪几步;HTML、CSS、JavaScript 三样工具各自管这一段流水线的哪一段。 读完你会拿到全书的地基——后面十二章,每一步都是这一章那张流水线的展开。 不需要任何基础,遇到的生词都在当场解释。

1. 先看现象:一个网址背后是一次接力

你在浏览器地址栏敲下一个网址,按下回车,一个页面出现了。 这件事看起来像「打开了一个文件」,但它不是——页面上每一个字、每张图、每个按钮, 都是你的浏览器当场问服务器要来的、当场算出来的。

书里把 Web 开发定义为:为万维网(World Wide Web,就是「整个网页组成的那张网」)构建网站或 Web 应用的 全过程,包括设计、搭布局、写代码、做内容1。 注意「全过程」这三个字:这门手艺的第一课不是写代码,而是先看清你写的东西最终由谁、按什么顺序执行。

这一章的主线例子,就是「敲下回车之后的那几秒钟」。下面每一节,都是这例子里的一步。

2. 顶层全景:一段接力,四种角色

  你输入网址
      │ ① 浏览器把网址发给服务器,要这个页面(HTTP 请求)
      ▼
  服务器把三类文件发回来:HTML(结构)、CSS(样式)、JavaScript(行为)
      │ ② 浏览器从上到下读 HTML,一边读一边搭一棵「结构树」——DOM 树
      │ ③ 把 CSS 的规则套到树上的每个节点
      │ ④ 执行 JavaScript,它随时可以回头改这棵树
      │ ⑤ 算出每个元素的位置和大小,画到屏幕上
      ▼
  你看到了页面;之后每一次点击,都可能让 ②–⑤ 重来一遍

  图说:页面不是被「打开」的,是被「要回来、搭出来、算出来、画出来」的。

全书的目录就藏在这张图里: 第 3–6 章讲 HTML 那一路,第 7–10 章讲 CSS 那一路, 第 11–12 章讲 JavaScript 那一路——三路的接缝,就是这张图里的 ②③④ 三步。

3. 这段接力分两段:前端和后端

服务器那半边,和浏览器这半边,是两种完全不同的工作,这一行把它们叫作后端和前端。

后端(back end)跑在服务器上:处理浏览器发来的请求、读写数据库、装着网站的业务逻辑。 常用语言书里点了名:PHP、Python、Node.js2——注意 Node.js 其实是让 JavaScript 也能跑在服务器上, 这个细节第 11 章还会回来。

前端(front end)跑在浏览器里:用户看得见、摸得着的全部——内容怎么排、颜色什么样、点了有什么反应。 前端的工具就三样:HTML、CSS、JavaScript,合称「三件套」3。

两样都做的,叫全栈(full stack)——「栈」指的是从服务器一路到屏幕这一整摞4。

书里还列了一个快要消失的角色 webmaster(网站管理员):不开发,只负责维护一个已存在的网站—— 盯性能、更新内容、修故障5。这个角色在今天的分工里大多并进了前端或运维,知道这个词是干什么用的就行。

为什么这本书几乎只讲前端

因为三件套里,只有前端的代码是确定跑在访问者自己的设备上的。 后端用什么语言、什么数据库,是每家公司自己的选型;而 HTML/CSS/JS 是全世界的浏览器都认的通用语。 学 Web 开发,前端是唯一没有分叉的起点——这就是这本书 13 章里有 10 章在前端的原因。

4. 浏览器不是「显示窗口」,是一台翻译机

你可能以为浏览器的工作是「把网页显示出来」。书里给的准确说法是: 任何浏览器的核心都是一个浏览器引擎(browser engine)——它负责渲染从服务器收到的页面代码6。 「渲染」(rendering)这个词的意思是:把代码变成画面。

为什么值得专门立一个概念?因为引擎是独立的:同一个引擎可以被不同的浏览器采用, 引擎之间的差异,就是同一个页面在不同浏览器里长得不一样的根源。

书里点了三个最常见的引擎7:

引擎谁在用
BlinkChrome、Edge
GeckoFirefox
WebKitSafari

这张表不用背,它解释的是一种现象:「我这个页面在 Chrome 里好好的,Safari 里破了」, 破的根源常常在这层。这一行管这种事叫「跨浏览器兼容性」,第 13 章的测试清单会专门收拾它。

5. 主线例子走一遍:从回车到画面

现在把第 1 节那个主线例子走完。书里给的渲染流程,一步步看8:

第 ① 步:发请求。 你输入网址,浏览器向服务器发出一个 HTTP 请求——HTTP 就是浏览器和服务器之间说话用的协议,规定「怎么要、怎么给」。9

第 ② 步:收到三份文件。 服务器把这一页需要的 HTML、CSS、JavaScript 文件发回来。

第 ③ 步:搭树。 浏览器从上到下读 HTML,边读边搭一棵 DOM 树——DOM(Document Object Model,文档对象模型)是把 HTML 的嵌套结构原样变成树形的数据结构:html 是树根,head 和 body 是两个大枝,每个标签是一节小枝10。 为什么非是「树」不可?因为 HTML 本身就是一层套一层的,树是唯一不丢信息的表示法。 第 12 章会整章讲这棵树怎么被 JavaScript 摆弄。

第 ④ 步:套样式。 读 HTML 的同时,浏览器把 CSS 规则应用到树上每个节点,定字号、颜色、间距11。

第 ⑤ 步:执行 JavaScript。 如果页面带 JavaScript,浏览器执行它——执行的结果可能又回头改了这棵树。

第 ⑥ 步:算布局、画出来。 浏览器综合树、样式、脚本改动的最终结果,算出每个元素的宽、高、内边距、外边距、位置,把它们摆好,画上屏幕12。

  网址 → 要文件 → 搭 DOM 树 → 套 CSS → 跑 JS(可能改树)→ 算布局 → 画面

  图说:⑥ 步里「算布局」用的是盒模型,第 07 章讲;「跑 JS 改树」是第 12 章的全部内容。

判断(我们的,不是书里的): 这一章六步里,最容易被初学者跳过、却最决定日后水平的是第 ③ 步。 「页面是一棵可以被程序改写的树」这一个观念,把网页从「文档」变成了「数据结构」—— 今天所有前端框架(React、Vue)本质上都是在更高效地改这棵树。 书在这里只用了一段话带过,我们特意停下来把它钉死。 如果错,会错在: 如果未来的浏览器渲染架构换掉 DOM 树这个中间表示(历史上确实有过实验性的替代方案), 这条结论就要跟着修正——但截至 2026 年,DOM 仍是所有主流浏览器的中心数据结构。

6. 三件套的分工:一个句子的三个成分

流水线看清了,三样工具的角色一句话就能说清——这是原书给的、也是这一行最通行的一张分工表13:

工具管什么不是什么
HTML内容是什么、结构怎样(标题、段落、链接、图片)不是编程语言,不会算不会判
CSS长什么样:颜色、字体、间距、布局也不是编程语言,没有「执行顺序」
JavaScript动起来:响应点击、改内容、改样式,不用刷新页面才是编程语言

HTML 由一堆标签组成:<h1> 到 <h6> 是六级标题,<p> 是段落,<a> 是链接,<img> 是图片,列表有 <ul>、<ol>14。每个标签通常成对出现——<p> 开头、</p> 收尾,中间是要显示的文字。 浏览器不显示标签本身,它拿标签当指令,决定这段文字按什么身份排版15。

书里还点了两件容易忽略的事:

其一,JavaScript 有「外挂生态」。 直接操作页面很繁琐,于是有了 框架(React、Angular、Vue.js)和库(jQuery)替你把繁琐包起来16。这本书完全不教它们——但对零基础来说这是对的顺序:先懂 DOM,框架才是工具而不是魔法。

其二,JavaScript 能跑在服务器上。 靠 Node.js,同一门语言前后端通吃,这是「全栈只用学一门语言」说法的来历17。

判断(我们的,不是书里的): 三件套分工表里藏着一条学习路线的推论: HTML 和 CSS 是「声明你要什么」,JavaScript 才是「描述怎么做」——前两者没有流程控制, 初学者用惯了 HTML/CSS 之后,第一次写 if 会真正意识到「哦,这才是编程」。 书把 JavaScript 放在第 11 章(倒数第 3 章),我们认可这个顺序:先让三件套的分工长进手里,再学语言。 如果错,会错在: 对已经会一门别的编程语言的人,这个顺序就是折磨——他需要的恰好反过来, 所以本拆解在总纲的章节地图里给了「跳过方案」。

7. 作者的判断与证据

这一章是定义性的,几乎不涉及争议,但有两处作者的取舍值得标出来:

有书内证据的说法:

  • 渲染流程的六步——书是当事实陈述的,每一步都有浏览器实际行为支撑,与 MDN 等权威文档的描述一致(这是 ④ 类通用知识,不在书里的部分我们标为补充)。
  • 三个引擎的归属表7——这是 2026 年时点的现状,书是对的。

属于行业经验、书当常识带过的说法:

  • 「webmaster 负责维护网站」——这个说法本身带着 2000 年代的网站管理痕迹,书里提到但未点明这个角色正在消失(这是我们的补充判断,书里没有这么说)。
  • 「Node.js 让 JavaScript 跑在服务器上」一句带过——实际上后端选型远不止这一句话,书把后端整体压成了两段的篇幅,这是入门的取舍,不是后端的全部。

8. 边界与局限

  • 渲染流程被简化了。 书里六步是教学版;真实的浏览器还有下载优先级、增量渲染、合成层等机制。对入门够用,但别拿它去解释「为什么大图闪烁」这类细节问题。
  • 引擎表会过时。 引擎归属是随时可能变的行业格局(历史上 WebKit 和 Blink 就分过家),引用时要意识到它的时间戳。
  • 后端几乎没讲。 「PHP、Python、Node.js」三个名字只是告诉你存在这么一路,每一个都够单独一本书。
  • 三件套之外的世界(构建工具、框架、类型系统)一个字没提——这本书的世界止于「保存文件、刷新浏览器」。

9. 可带走的

全章的主线例子,一行写完: 输入网址 → HTTP 请求 → 服务器发回 HTML/CSS/JS → 浏览器搭 DOM 树 → 套 CSS → 跑 JS(可能改树)→ 算布局画出来。

  1. 网页不是一个文件,是一段接力的产物;接力分两段——服务器上的后端、浏览器里的前端;
  2. 前端的通用语只有三件套:HTML 管结构、CSS 管样子、JavaScript 管行为——前两者不是编程语言;
  3. 浏览器的核心是引擎(Blink/Gecko/WebKit),跨浏览器不一致的根源在这一层;
  4. DOM 树是页面的真身——你在屏幕上看到的是它的投影,JavaScript 改的是树本身(第 12 章展开);
  5. 渲染是「解析 → 套样式 → 执行脚本 → 布局 → 绘制」的流水线,任何一步的改动都可能触发后面全部重跑;
  6. 框架和库(React/Vue/jQuery)是对 DOM 操作的封装,先懂 DOM 再碰框架;
  7. webmaster 是维护角色、全栈是前后端都做的角色——招聘启事里这两个词就是这么用的。

10. 原文地图

主题原书章原文位置
Web 开发的定义Introduction to Web Developmenttext/07-fm-introduction.txt:29(搜「overall process of building websites」)
前端/后端/全栈分工Introduction to Web Developmenttext/07-fm-introduction.txt:37(搜「Front end development uses」) · text/07-fm-introduction.txt:39(搜「Back end development focuses」) · text/07-fm-introduction.txt:41(搜「combination of both front and back end」)
浏览器引擎与三家归属Introduction to Web Developmenttext/07-fm-introduction.txt:53(搜「heart of any web browser」) · text/07-fm-introduction.txt:59(搜「Blink, which is used」) · text/07-fm-introduction.txt:61(搜「Gecko, which is used」) · text/07-fm-introduction.txt:63(搜「WebKit, which is used」)
渲染流程六步Introduction to Web Developmenttext/07-fm-introduction.txt:69(搜「sends an HTTP request」) · text/07-fm-introduction.txt:75(搜「builds a Document Object Model」) · text/07-fm-introduction.txt:83(搜「calculates the text style」)
三件套分工Introduction to Web Developmenttext/07-fm-introduction.txt:91(搜「HTML defines the content and structure」) · text/07-fm-introduction.txt:93(搜「responsible for visual styling」) · text/07-fm-introduction.txt:95(搜「adds interactivity and dynamic」)
HTML 标签与浏览器不显示标签Introduction to Web Developmenttext/07-fm-introduction.txt:101(搜「consists of various tags」) · text/10-fm-introduction.txt:69(搜「do not display the HTML elements」)
框架、库与 Node.jsIntroduction to Web Developmenttext/07-fm-introduction.txt:151(搜「frameworks, such as React」)

Footnotes

  1. 出处:「Introduction to Web Development」第 29 段(text/07-fm-introduction.txt:29,搜「overall process of building websites」)。原文:「Web development is the overall process of building websites or web applications for the World Wide Web.」 ↩

  2. 出处:「Introduction to Web Development」第 39 段(text/07-fm-introduction.txt:39,搜「Back end development focuses」)。原文点名 PHP、Python、Node.js,以及管理数据库连接。 ↩

  3. 出处:「Introduction to Web Development」第 37 段(text/07-fm-introduction.txt:37,搜「Front end development uses」)。原文:「Front end development uses HTML, CSS, and JavaScript to create the portions of a website that the user can view and interact with in a web browser.」 ↩

  4. 出处:「Introduction to Web Development」第 41 段(text/07-fm-introduction.txt:41,搜「combination of both front and back end」)。 ↩

  5. 出处:「Introduction to Web Development」第 43 段(text/07-fm-introduction.txt:43,搜「web masters」)。原文列了 webmaster 的职责:监督网站性能、保证内容更新、排查技术问题、落实设计变更。 ↩

  6. 出处:「Introduction to Web Development」第 53 段(text/07-fm-introduction.txt:53,搜「heart of any web browser」)。原文:「At the heart of any web browser is a browser engine. This is a core component that is responsible for rendering the web page code it receives from the web server.」 ↩

  7. 出处:「Introduction to Web Development」第 59、61、63 段(text/07-fm-introduction.txt:59,搜「Blink, which is used」;:61,搜「Gecko, which is used」;:63,搜「WebKit, which is used」)。 ↩ ↩2

  8. 出处:「Introduction to Web Development」第 67–83 段(text/07-fm-introduction.txt:69,搜「sends an HTTP request」;:75,搜「builds a Document Object Model」;:83,搜「calculates the text style」)。补充(不在书里,来自通用知识):「解析 HTML」在真实浏览器里与「下载子资源」是交叠进行的,书中为教学起见写成顺序的六步。 ↩

  9. 出处:「Introduction to Web Development」第 69 段(text/07-fm-introduction.txt:69,搜「sends an HTTP request」)。 ↩

  10. 出处:「Introduction to Web Development」第 75 段(text/07-fm-introduction.txt:75,搜「builds a Document Object Model」)。原文:「The browser begins parsing the HTML document from top to bottom and builds a Document Object Model (DOM) tree that represents the structure and content of the page.」 ↩

  11. 出处:「Introduction to Web Development」第 79 段(text/07-fm-introduction.txt:79,搜「simultaneously processes the CSS」)。 ↩

  12. 出处:「Introduction to Web Development」第 83 段(text/07-fm-introduction.txt:83,搜「calculates the text style」)。原文列出浏览器要算的东西:文字样式、大小、内容位置、宽、高、内边距(padding)和外边距(margin)——这六个词每一个都会在第 07 章的盒模型里正式登场。 ↩

  13. 出处:「Introduction to Web Development」第 91、93、95 段(text/07-fm-introduction.txt:91,搜「HTML defines the content and structure」;:93,搜「responsible for visual styling」;:95,搜「adds interactivity and dynamic」)。 ↩

  14. 出处:「Introduction to Web Development」第 101 段(text/07-fm-introduction.txt:101,搜「consists of various tags」)。 ↩

  15. 出处:「HTML Elements and Attributes」第 69 段(text/10-fm-introduction.txt:69,搜「do not display the HTML elements」)。原文:「Browsers do not display the HTML elements, but use them to format the content of the page according to their function.」——「浏览器不显示元素,而是按元素的功能给内容排版」。 ↩

  16. 出处:「Introduction to Web Development」第 151 段(text/07-fm-introduction.txt:151,搜「frameworks, such as React」)。原文点名 React、Angular、Vue.js 与 jQuery,并说明它们让 DOM 操作更容易。 ↩

  17. 出处:「Introduction to Web Development」第 151 段(text/07-fm-introduction.txt:151,搜「Node.js」)。原文:「JavaScript can also be utilized on the server side thanks to Node.js, which enables developers to write full-stack apps using only one language.」 ↩

Web Development with HTML, CSS, and JavaScript — 全书拆解

Previous Page

开发环境 — 写代码之前,先把「写→看」的回路接上

Next Page

On this page

网页与浏览器 — 你看到的页面背后发生了什么1. 先看现象:一个网址背后是一次接力2. 顶层全景:一段接力,四种角色3. 这段接力分两段:前端和后端为什么这本书几乎只讲前端4. 浏览器不是「显示窗口」,是一台翻译机5. 主线例子走一遍:从回车到画面6. 三件套的分工:一个句子的三个成分7. 作者的判断与证据8. 边界与局限9. 可带走的10. 原文地图Footnotes