LeoHsiao's Notes

# Web 技术

# Web 服务

  • Web 服务是一种被人们经常使用的计算机服务，又称为万维网（World Wide Web）。

  • 简单来说，Web 服务是一种文件传输服务，像 FTP 服务：

    • 在一个主机上运行 Web 服务器软件，用于提供文件。每个文件用 URL 来定位。
    • 在其它主机上运行 Web 浏览器软件，用于从 Web 服务器下载文件。
    • Tim Berners-Lee 发明了 HTTP 网络协议，作为 Web 服务器与 Web 浏览器之间的通信协议。

  • 但是，Web 服务不止是传输文件，还擅长展示文件的内容：

    • FTP 服务主要用于上传、下载文件，显示的 UI 界面通常只有一堆文件、文件夹。而 Web 服务除了上传、下载文件，还擅长展示文件的内容，显示功能丰富的 UI 界面。
    • txt 格式的文件只能包含文字内容。而 Tim Berners-Lee 发明了超文本格式 HTML ，可包含文字、图片、音频、视频等多媒体内容，并进行排版。Web 浏览器通常会从 Web 服务器下载 HTML 文件，展示在计算机显示器上。
    • Web 浏览器通常内置了多媒体播放器。当用户下载图片、音频、视频类型的文件时，能显示图片、播放音频、播放视频。

  • 如何使用 Web 客户端？

    • 用户不必亲自开发 Web 客户端软件，可在个人电脑上运行 Chrome 等 Web 浏览器软件，输入 URL 地址，就能访问互联网上的 Web 服务器。
    • Web 浏览器（Browser）是最常见的一种 HTTP 客户端软件，能展示 UI 界面，提供了丰富的功能。而 curl 命令是另一种 HTTP 客户端软件，属于命令行工具，没有 UI 界面。

  • 如何使用 Web 服务器？

    • 用户不必亲自开发 Web 服务器软件，可在主机上运行 Nginx 等 HTTP 服务器软件，监听 80、443 等端口，即可被 HTTP 客户端访问。
    • Web 服务器俗称为网站（website），展示的每个页面称为网页（webpage）。
    • Web 服务器需要保持运行，以备 Web 客户端随时访问。

  • Web 服务器、Web 客户端在技术上属于 HTTP 服务器、HTTP 客户端。HTTP 协议最初是为了实现 Web 服务而发明的，不过后来 HTTP 协议增加了其它用途，例如：

    • 供程序访问的 API 服务器。HTTP 服务器与 HTTP 客户端之间只传输纯文本数据（比如 JSON 文本），不传输 HTML、音频等类型的文件，不展示网页。
    • 基于 HTTP 协议实现的 WebSocket 协议。
    • HTTP 代理协议。

# 相关历史

  • 1969 年，在冷战的阴影下，美国为了避免计算机系统被集中打击而开始建立一个分布式计算机系统，以 4 所大学的计算机作为网络节点构成一个广域网。
    • 这个网络被称为阿帕网（ARPAnet），它是最早的计算机网络，也是互联网（即 Internet ）的早期骨干网。
  • 1991 年，欧洲粒子物理研究所（CERN）的 Tim Berners Lee 公布了一种在网络上分享文件的系统，称为 Web 。
  • 1994 年，Tim Berners Lee 成立了万维网联盟（World Wide Web Consortium ，简称为 W3C ），负责管理 Web 标准。
  • 1994 年，网景（Netscape）公司发布网景浏览器，很快占据了大部分浏览器市场。
  • 1995 年，网景浏览器的 Brendan Eich 为浏览器设计了一种脚本语言。
    • Netscape 公司与发明 Java 语言的 Sun 公司合作，将这种网页脚本语言取名为 JavaScript ，以求借助 Java 的名头来推广。但 JavaScript 与 Java 的语法只有少部分相似。
  • 1998 年，网景浏览器逐渐衰落，市场份额被与 Windows 系统捆绑销售的 IE 浏览器抢占。
    • Netscape 公司将浏览器转变为开源的 Mozilla 项目。
  • 2004 年，Mozilla 社区发布 Firefox 浏览器。
    • Firefox 支持创建网页选项卡、安装插件，功能又多又灵活。而此时的 IE 浏览器生态封闭，功能老旧。
  • 2008 年，Google 公司发布 Chrome 浏览器，并将其源代码作为 Chromium 项目开放。
  • 2020 年的统计显示，Chrome 占据了 70% 的浏览器市场，Apple 公司的 Safari 占据了 10% 的浏览器市场，Firefox 占据了 8% 的浏览器市场。

# Web 浏览器

# 工作流程

例：用户在浏览器中访问 baidu.com 的流程

  1. 用户在 Web 浏览器的地址栏中输入域名 baidu.com ，按下回车键，开始访问。
  2. 浏览器访问 DNS 服务器，查询到 baidu.com 这个域名对应的 IP 地址。
  3. 浏览器与 baidu.com 的服务器建立 TCP 连接，然后发送 HTTP Request 报文。
  4. baidu.com 的服务器收到 HTTP 请求，然后返回 HTTP Response 报文。
  5. 浏览器从 HTTP Response 报文的 body 中取出 HTML 文本，展示网页的内容，供用户查看。
    • 如果 HTML 文本包含其它 URL 链接，则浏览器可访问这些链接，发出其它 HTTP Request 报文。因此用户访问一个网页时，可能发送多个 HTTP Request 报文。

Web 浏览器按从上到下的顺序逐行解析 HTML 文件，一边解析一边显示给用户看。

  • 解析到 href 时，会在后台下载链接的资源，不影响前台进程。
  • 解析到 src 时，会等该资源加载完毕再继续解析。
  • 解析到 script 时，会加载并执行该脚本，然后再继续解析。
    • 因此应该将 script 标签放在 body 的最后部分，避免阻塞前台进程。
      • 或者使用 async 属性，等加载了该脚本之后再执行。
      • 或者使用 defer 属性，等加载了该脚本、解析了整个 HTML 之后再执行。
  • 不同 Web 浏览器支持的 HTML 语法有所差异，因此需要考虑 HTML 文件的兼容性问题。

# Web 开发

Web 软件开发主要分为两个方向：

  • 前端开发：主要研究 Web 客户端，比如在 Web 浏览器上显示网页、与用户交互。
  • 后端开发：主要研究 Web 服务器，比如开发服务器软件、与 Web 客户端交互。
    • Web 网站可以只做前端开发，不做后端开发。只要提供 HTML 等前端文件给浏览器显示即可，不过这样做出来的是静态网站。
    • Web 网站也可以只做后端开发，不做前端开发。这样通常只提供一些 HTTP API ，供程序访问，缺乏 HTML 等前端文件，不适合浏览器访问。