关于前端: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 协定版本组成。

GET / HTTP/1.1

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
• 申请头蕴含了申请的附加信息。

申请头

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

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 办法传送数据。

POST /users HTTP/1.1
Host: example.com

{
    "key1": "value1"
    "key2": "value2"
    "array1": ["value3", "value4"]
}

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/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 服务器不能解决申请

响应头

和申请头相似，响应头的抉择也很多，常见的：

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/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：内置于浏览器，拓展了浏览器的性能，常见的有：

   1. DOM API：把 HTML 文档流转化为树形的 JavaScript 对象。
   2. Geolocation API 地理位置 API：取得浏览器以后所在的地理位置坐标
   3. Fetch API：获取数据
   4. Canvas API：做 Canvas 图像
   5. History API：保留历史数据
   6. 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。