Web 开发相关概念

Web 开发相关概念

前端 后端 全栈

  • 前端 Front-end：网站中用户看到的部分
    • HTML CSS JavaScript
    • 库和框架
    • 设计工具
  • 后端 Back-end：网站中用户看不到的部分
    • 编程语言
    • 框架
    • 数据库
    • API
  • 全栈 Full-stack：具备前端和后端的能力
    • 计划
    • 架构
    • 设计
    • 开发
    • 测试
    • 部署
    • 维护

Web 相关概念

网络和互联网

网络(network)是指不少于 2 台以上的设备通过有线或无线的方式互相连接。

当网络中的设备数量增多时，需要使用网络交换器（switch）来作为中介。交换器可以连接其他交换器，也可以连接终端设备，否则网络中的终端设备需要两两连接，提高了网络的复杂性。

互联网则是全球的网络互相连接，也被称为“内部连接网络（interconnected network）”。

互联网采用 B/S 或者 C/S 架构，由浏览器或客户端访问互联网，互联网访问服务器并返回请求。

Web 服务器

服务器(server)是指运行应用程序或服务的电脑，它提供给客户端某种服务。

数据中心(data center)通常包含大量连接到互联网的，运行不同服务的服务器。数据中心中有不同的系统保证其运行，连接和冷却。

许多网站使用离用户最近的数据中心来保证用户可以快速访问网站内容。

根据服务器的功能不同，其硬件也有所不同，例如存储大量图片的服务器需要大量的硬盘，而执行大量运算的服务器需要更快的处理器。

Web 服务器（Web Server）存储和分发（deliver）用户请求的网站内容，例如文本，图片，视频和应用数据。

Web 服务器和浏览器（客户端）之间通过 HTTP 通讯，大多数网页由 HTML 编码，内容可以是静态的或者动态的。大多数 Web 服务器支持服务端脚本语言来编码业务逻辑进行通讯。Web 服务器处理请求和响应。

Web 服务器是服务器的一种，有以下功能：

  • 网站托管（Web hosting）
  • 内容管理系统（CMS）
  • 数据库（Databases）
  • 控制面板（Control Panel）
  • 电子邮件（Email）

Web 服务器使用相同的软硬件托管一个或多个网站，这被称为虚拟托管（virtual hosting）。Web 服务器会限制不同用户的响应速度，防止某一用户占有资源

网站,网页和网络应用程序

网站（website）是由一系列网页（web pages）组成的，网页之间互相连接。

网页是一种可编辑的文本文档，使用 HTML，CSS，JavaScript 三种技术完成对网页的编写。

网站和网络应用程序（web application）之间的界限并不清晰，两个概念经常混用。它们之间的差别是：交互性的强弱。网站更多时候展示内容，Web App 的交互性更强。

当 Web 服务器发送完整的网页到设备时，该设备会根据代码从上到下一行一行解释为构件块，也就是用户看到的内容，这个过程称为“页面渲染（page rendering）”。

浏览器

浏览器是一种使用户浏览万维网（world wide web）的软件，它发送请求给 Web 服务器并接受响应，然后渲染网页给用户。

浏览器的地址栏通过输入 URL 地址来定位网页和网站，URL 地址通常包含协议（protocol），域名（domain name）和文件地址（file path）。

浏览器和服务器之间的通信协议是 HTTP（Hyper Transfer Text Protocol / 超文本传输协议），发送时使用 HTTP request，返回时使用 HTTP response。

浏览器使用 cookies 保存用户信息，其可以在用户下次访问时识别身份（记住用户名和密码）。还有其他 cookies 用于记录用户喜好、浏览模式（pattern）等。还有些被称为第三方（third-party） cookies，其可以跨站追踪并收集用户信息并把信息卖给其他公司。

浏览器引擎

浏览器引擎（browser engine）也被称为排版（layout）引擎、渲染（rendering）引擎，是所有浏览器的核心软件组件。其主要任务是把 HTML 和其他文件转化为用户设备上的可交互和可视化内容。

云计算

云计算（cloud-computing）是指通过付费在互联网上获得所需的 IT 资源。用户可以从云服务商获得计算资源、存储资源和数据库资源等，而不用自行建造和维护实体的数据中心。

网站托管

网站托管指的是租用某公司或服务商提供的服务器来托管用户的网站，因此用户不用自己去构建服务器或数据中心。

几种不同的托管服务：

  • Shared hosting 共享托管

    • 与其他的帐号 / 网站共同分享一个 Web 服务器，包括处理器，存储和带宽资源，这可能使得你的应用速度变慢。 这种方式适合小网站，低成本的沙盒环境以及有限制的免费内容（广告等）。

  • Virtual private hosting 虚拟专用托管

    • 这种方式也被称为 VPS hosting，VPS 是一个运行在物理服务器上的虚拟服务器，带有特定的 CPU，存储和带宽。每个物理服务器下有多个 VPS，每个 VPS 的资源是固定的，因此 VPS 之间互不干扰。这种托管方式比共享托管更贵，网站的规模也更大。

  • Dedicated hosting 专用托管

    • 这种方式是指所有的硬件资源服务于一个网站。比 VPS 更贵。

  • Cloud hosting 云托管

    • 在云托管中，网站运行在由物理服务器和虚拟服务器组成的云环境中，如果某一种服务器瘫痪，那么其他服务器可以保证网站正常运行。这种方式的好处是可以使用任意多的资源不受硬件的限制，费用也更贵，但是网站的规模更大。

动态和静态内容

静态内容指的是返回给客户端的内容是其存储在服务端的形式，例如：图片和视频。

动态内容是客户端发出 HTTP 请求到 Web 服务器再到应用程序服务器后生成的内容。通常 Web 服务器会调用应用程序服务器，也就是后端，然后返回给客户端。

应用程序服务器 Application Server 的处理比 Web 服务器更加复杂，一般包括：

  • 运行应用程序逻辑
  • 和数据库进行交互
  • 检查权限

如果每次请求都要应用服务器做出响应，网站的性能就会比较差。Web 服务器中通常有缓存（cache）来解决这一问题。当客户端发出请求后，Web 服务器会首先检查请求内容是否在缓存中，如果在就直接返回，如果不在就去应用程序服务器生成，返回给客户端并保存一份拷贝到 Web 服务器。经过一段时间的请求后，Web 服务器就会保存和更新一定的缓存。这个功能也被称为“web 加速（acceleration）”。

单页应用程序

在 JavaScript 框架出现之前，网站几乎都是多页应用程序。但是 Web 服务器一次性响应返回整个页面会降低网站的性能。如果应用很复杂，网络连接又慢，用户的体验会非常差。

单页应用程序（Single Page Application / SPA）并不是只有一个网页，而是服务器仅发送给浏览器一个 HTML 页面，其他的内容会根据用户的使用来动态更新。

SPA 使得用户无需下载新的网页，而是根据用户操作重写当前网页。

SPA 有两种提供代码和资源的服务：

1. bundling 打包：服务器把所有需要的 HTML，CSS 和 JS 文件发送到浏览器。也就是把所有视图都发送给浏览器
2. lazy-loading 懒加载 / code splitting 代码分割：服务器仅发送刚好满足需要的 HTML，CSS 和 JS 资源，其他资源当需要时再下载。也就是发送必要的视图给浏览器

传统的 Web APP 会返回整个页面，然后浏览器渲染；SPA 会把页面视为视图 View 和模板 Template，然后发送 JSON 到浏览器，浏览器动态加载 JSON 的内容。

Internet 的核心技术

协议

IP

当在互联网上传输数据时，需要 IP 地址作为传输的目的地。

IP （Internet Protocol）也叫网际协议，有 IPv4 和 IPv6 两个常用的版本。其中 IPv4 使用 "." 来分割数字，总共有 4 个组成部分，例如：192.0.2.235；IPv6 使用 ":" 来分割数字，总共有 8 个组成部分，例如：4527:0a00:1567:0200:ff00:0042:8329。

互联网上传输的数据是被称为 IP 数据包（packet / data gram 数据报）的一系列信息。IP 数据包由以下组成：

  • IP Header 报头：由目的地址和源地址以及一些附加信息组成
  • IP Data 数据：具体要传输的数据

IP 数据包在传送时可能出现以下情况：

  • 数据包不按预定顺序到达
  • 数据包传输过程中受损
  • 数据包传输过程中丢失

为解决上述问题，IP 数据包中还包含其他协议的信息，例如：TCP（Transmission Control Protocol / 传输控制协议）和 UDP（User Datagram Protocol /用户数据报协议）。

TCP 可以解决上述三种问题，但是会导致一定的传输延迟，并且必须用于按顺序到达的数据，例如文本，图片。

UDP 只能解决数据包传输受损问题，并且数据报可能不按顺序到达或者根本不能到达，用于可以承受一定损失的数据，例如流媒体（视频）和录音。

HTTP

HTTPS 是比 HTTP 更安全的协议，会使用密码（secret code）对数据进行加密。

HTTP 是用于浏览器和服务器传输之间的协议，用于传输 HTML 文档，CSS 样式，图片，文件等。

HTTP 是基于请求-响应的。

HTTP 请求

请求行

所有的 HTTP 请求以请求行（request line）开始。请求行由 HTTP 方法，请求资源和 HTTP 协议版本组成。

```http
GET / HTTP/1.1
```

HTTP 请求由请求行，请求头，请求体组成。

```http
GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Lanuage: en
```
  • 方法描述了客户端想要访问资源的方式，常用的有 4 种：
    • GET：获取 Web Server 的数据
    • POST：发送数据给 Web Server
    • PUT：更新 Web Server 数据
    • DELETE：删除 Web Server 数据
  • 路径描述了资源被存放在服务器的位置
  • 最常用的版本是 1.1 和 2.0
  • 请求头包含了请求的附加信息。
请求头

请求头是大小写敏感的，以 `:` 结尾，并带有一个值.

```http
Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en​
Content-type: text/json
```
  • Host 头：表示服务器的主机和请求的来源
  • User-Agent 头：告知 Web 服务器请求发出方所在的应用程序，通常包括操作系统，版本和浏览器
  • Accept 头：告知 Web 服务器，客户端接受资源的内容类型
  • Accept-Language 头：表示客户端偏好的语言
  • Content-type 头：表示发送的 request body (请求体)中的内容类型
请求体

HTTP 请求选择性地包含一个请求体，请求体通常使用 POST 或 PUT 方法传送数据。

```http
POST /users HTTP/1.1
Host: example.com
{"key1": "value1"
    "key2": "value2"
    "array1": ["value3", "value4"]
}
```

```http
PUT /users/1 HTTP/1.1
Host: example.com
Content-type: text/json

{"key1": "value1"}
```

HTTP 响应

当 Web 服务器完成 HTTP 请求的处理后，会发送 HTTP 响应。

状态行

HTTP 响应以状态行（status line）开始，指示处理成功与否。状态行以 HTTP 版本，状态码和原因短语（reason phrase）组成。原因短语是状态码的文本表示。

```http
HTTP/1.1 200 OK
Date: sat, 01 Jan 2022 22:04:01 GMT
Server: Apache/2.4.52(CentOS) mod_ssl/2.8.31 OpenSSL/1.1.1m
Last-Modified: Mon, 01 Nov 2021 09:01:13 GMT
Content-Length: 50
Content-Type: text/html

<html>
<body>
</body>
</html>
```

响应头下有信息体（message body），其包含了要返回的内容。

状态码

状态码（Status codes）和状态信息（Status message）在响应头中，表示了对请求的响应状态，状态码取值 100 - 599。状态码的首位显示其所属的类别。

状态码共有 5 类：

1. Informational 消息 100-199：通常包含来自服务器的暂时（Provisonal / Interim）响应，常见的是 

   1. 100 CONTINUE，表示服务器已经接收了请求头，并且应该继续发送请求体。
   2. 101 Switching Protocols：客户端请求服务端更换协议，服务端也同意了。

2. Successful 成功 200-299：表示请求已经成功被服务器处理，常见的是 

   1. 200 OK：
      1. GET 对应找到目标
      2. POST 对应成功发送到服务器
      3. PUT 对应成功发送到服务器
      4. DELETE 对应成功删除
   2. 201 Created：服务器成功处理请求并且资源已经被创建
   3. 202 Accepted：服务器接收了请求处理，但是处理还没有完成
   4. 204 No Content：服务器成功处理请求，但是没有返回任何内容

3. Redirection 重定向 300-399：表示客户端请求的资源被移动，常见的是

   1. 301 MOVED PERMANENTLY 永久移动：当前和未来的请求应该转发到返回的地址
   2. 302 FOUND 找到：当前请求应该转发到返回的地址

   这类状态码的响应头中会包含资源的地址。

4. Client error 客户端错误 400-499：表示请求的语法有错或者内容不能被服务器处理，常见的有：

   1. 400 Bad Request：客户端或者浏览器提交了错误的数据或者数据太大，服务器不能处理请求
   2. 401 Unauthorized：用户必须登录帐号
   3. 403 Forbidden：请求有效，但是服务器拒绝处理。这通常是因为用户的权限不够
   4. 404 Not Found：在 Web 服务器上找不到请求资源
   5. 405 Method Not Allowed：Web 服务器不支持使用的 HTTP 方法

5. Server error 服务端错误 500-599：表示服务器处理请求的过程中出错，常见的是

   1. 500 Internal Server Error 内部服务错误：一种常见的服务器错误，处理请求的过程中出错或者出现未预料到的错误
   2. 502 Bad Gateway：Web 服务器收到来自应用程序服务器的无效（invalid）请求
   3. 503 Service Unavailable：Web 服务器不能处理请求

响应头

和请求头类似，响应头的选择也很多，常见的：

```http
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​
```

* Date 头：表示 HTTP 响应生成的时间和日期
* Server 头：描述生成响应使用的 Web 服务器软件
* Content-Length 头：描述响应的长度
* Content-Type 头：描述了返回资源的媒体类型

响应体

位于响应头之下，是响应的主体内容。可能包含 HTML，图片，视频和其他媒体。

```http
HTTP/1.1 200 OK​
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​

<html>
  <head><title>Test</title></head>
  <body>Test HTML page.</body>
</html>
```

DHCP

当计算机连接到一个网络时，动态主机配置协议（Dynamic Host Configuration Protocol）分配给计算机一个 IP 地址。你的计算机通过用户数据报协议(UDP)使用协议与一种称为 DHCP 服务器的服务器进行通信。这个服务器追踪网络上的计算机和它们的 IP 地址。它将为你的计算机分配一个 IP 地址并通过协议做出响应，让它知道要使用哪个 IP 地址。当你的计算机有了 IP 地址后就可以和其他计算机通信了。

DNS

当你通过浏览器访问网站时，计算机需要知道该网站的 IP 地址。域名系统协议（Domain Name System Protocol）提供该功能。计算机随后检查与该域名相联系的 DNS 服务器然后返回正确的 IP 地址。

IMAP

你的设备需要下载邮件或者管理服务器邮箱中存储的邮件，因特网消息访问协议（Internet Message Access Protocol）提供该功能。

SMTP

简单邮件传输协议（Simple Mail Transfer Protocol）用于发送邮件。该协议使得邮件客户端通过一个 SMTP 服务器发送提交的邮件。SMTP 也可以用于接收邮件，但是 IMAP 用得更多。

POP

邮局协议（Post Office Protocol）是下载邮件到邮件客户端的旧版本协议。POP 和 IMAP 的不同在于：一旦邮件在本地设备下载成功，POP 会立刻删除服务器上的邮件。尽管该协议不再常用，但开发者会用 POP 实现自动化的邮件服务，因为比 IMAP 更直接。

FTP

如何实现本地计算机和服务器的文件传输？文件传输协议（File Transfer Protocol）可以列出，发送，接收和删除服务器上的文件。这需要在服务器上运行 FTP 服务器并在本机使用 FTP 客户端。

SSH

如何远程登录并和服务器交互？使用安全外壳协议（Secure Shell Protocol）可以做到这一点。使用 SSH 客户端连接到服务器上的 SSH 服务器来对远程的计算机进行操作。所有通过 SSH 发送的数据都是加密的，第三方不能理解传输的数据。

SFTP

SSH 文件传输协议 / 安全外壳的文件传输协议用于通过 SSH 协议传输文件，这保证了传输的安全性。大多数 FTP 客户端都支持 SFTP 协议。

HTML CSS JavaScript

  • HTML: 网页的架构
  • CSS: 网页的样式
  • JavaScript: 网页的动态交互

文档对象模型

文档对象模型（Document Object Model / DOM）是针对 HTML 和 XML 的编程 API，它定义了文档的逻辑结构和访问修改文档的方式，使得 JavaScript 可以操纵 HTML 元素。

DOM 是一种树形结构模型，其作为 JS 对象保存在浏览器的内存中。浏览器会为每个已下载的网页生成 DOM。

编辑本地网页的 DOM 并不会影响保存在服务器的文档。

开发者工具

每个浏览器都内置了开发者工具（developer tools），常用的几个功能：

  • Console 控制台：可以运行 JavaScript 代码，可以给出日志和错误信息
  • Sources 资源：显示当前网页的所有内容
  • Network 网络：显示 HTTP 请求和响应的时间线
  • Performance 性能：测试网页的性能
  • Memory 存储：显示使用存储资源最多的代码段
  • Elements 元素：可以看到 HTML 和 CSS 代码

框架和库

框架（framework）和库（libraries）对关键问题完成封装，使得开发速度变得更快。

框架和库可以是开源的（open-source）也可以是专有的（proprietary）。

这两个词有时也是混用的，其区别是：库是可重用（re-usable）的代码，用于解决某个特定问题。而框架则给了开发者一种构建的结构。

一个应用程序通常使用一个框架，一个框架通常使用多个库。一个应用程序使用了一个框架的同时还可以使用其他库。

框架比库要更加 opinionated，自由度更小。

框架-应用-库流：框架调用应用程序，应用程序调用库，框架包含库。

框架和库在使用前需要引入，否则应用会报错，所以它们也被称为“依赖（dependency）”。

框架的优点：

  • 节省时间
  • 结构化
  • 最佳实践

框架的缺点：

  • 结构限制
  • 兼容性

库的优点：

  • 可以替换为更好的库

库的缺点：

  • 需要挑选一系列库
  • 兼容性

API 和服务

API（Application programming interface / 应用程序接口）是一种服务，应用程序，接口，它以简单的语法提供了高级功能。

API 是一系列函数和序列用于访问操作系统，应用程序或服务的特征或者数据。API 经常作为组建和应用之间的桥梁。所以 API 也被称为网关（Gateway）或者中间件（Middleware）。

对于 Web 开发，常见的 API：

1. 浏览器 API 或 Web API：内置于浏览器，拓展了浏览器的功能，常见的有：
  • DOM API：把 HTML 文档流转化为树形的 JavaScript 对象。
  • Geolocation API 地理位置 API：获得浏览器当前所在的地理位置坐标
  • Fetch API：获取数据
  • Canvas API：做 Canvas 图像
  • History API：保存历史数据
  • Web Storage API：客户端存储
2. REST API 或 Restful API：给 Web 和移动应用提供数据。

REST 是用于构建高效 API 的一系列原则。这类 API 经常用于发送和取得数据库的数据。

3. 基于传感器的 API：IOT 应用，传感器之间使用 API 通讯，并且可以追踪和响应物理数据。

API web servers 提供了取得数据库数据的能力，包括 GET，POST，PUT 和 DELETE 几种方法。这些 API 使用断点（endpoints）表示不同的资源如何被访问。断点包含在 URL 中，一旦断点被激活，API 就会产生响应。常见的两种响应是：

1. 完整的网页 2. JavaScript Object Notation（JSON）

IDE

IDE（Integrated Development Environment / 集成开发环境）类似文本编辑器，可以编写代码。IDE 通常支持多种编程语言。

IDE 通常有扩展，语法高亮，自动补全，错误提示，协作，重构等功能。

依赖和包管理器

框架和库有时被称为依赖。

依赖可能会形成树形结构，被称为依赖树。

包管理器（package manager）用来自动下载和安装依赖，也可以发布自己的包。包管理器可以保证你的依赖版本和团队中其他人所使用的是同一版本。

最常用的包管理器是 NPM（Node Package Manager）。

打包工具

打包工具（bundler）把所有的依赖包装为单一的文件，也可以把过大的依赖分割为多个包。

常用的打包工具是 Gulp 和 Webpack。

posted @ 2022-09-17 08:54  Mitchell_C  阅读(192)  评论(0)  编辑  收藏  举报