web速览

1. 前端开发

概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端
技术栈：
- HTML（超文本标记语言）：用于创建网页的结构和内容。
- CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。
- JavaScript：用于实现网页的交互性和动态效果。
前端框架：
- React：一个用于构建用户界面的 JavaScript 库，采用组件化设计。
- Vue.js：一个渐进式的 JavaScript 框架，易于上手，适合小到中型项目。
- Angular：一个全面的框架，适合大型应用开发，提供多种功能。

2. 后端开发

概述：后端开发是指构建管理网站服务器、应用程序和数据库的部分，它直接处理数据存储和业务逻辑。又称服务端。
技术栈：
- 编程语言：常用语言包括 Node.js（JavaScript）、Python、Java、PHP、Ruby 等。
- 框架：如 Express.js（Node.js）、Django（Python）、Spring Boot（Java）。
数据库：
- 关系型数据库：如 MySQL、PostgreSQL，使用表格结构。
- 非关系型数据库：如 MongoDB、Cassandra，使用文档或键值对存储数据。

3. API（应用程序接口）

概述：API 是允许不同软件组件之间进行通信和交互的接口。

类型：

RESTful API

特点：

资源导向：REST（Representational State Transfer）围绕资源进行设计，每个 URL 代表一个资源。
HTTP 方法：
- GET：获取资源（读取）。
- POST：创建新资源（添加）。
- PUT：更新现有资源（替换）。
- DELETE：删除资源。
无状态性：每个请求都是独立的，服务器不存储客户端的状态信息。

优点：

易于理解和实现。
广泛支持，几乎所有编程语言都有库来构建 RESTful API。
具有良好的缓存机制。

缺点：

查询复杂时，可能需要多个请求（如，获取资源及相关数据）。
不够灵活，客户端需要确切知道 API 的结构。

GraphQL

特点：

查询语言：允许客户端描述所需数据的结构，仅返回请求的数据。
单个端点：与 REST API 不同，GraphQL 通常通过一个端点提供服务。

优点：

灵活性高，客户端能精确请求所需数据，避免过载和不足。
有助于减少 API 调用次数，提升性能。
强类型系统，提供良好的自我文档功能（如使用 GraphiQL 工具可以交互查询）。

缺点：

学习曲线较陡，需要了解 GraphQL 的语法和最佳实践。
实现上可能更复杂，尤其是在处理缓存和批处理请求时。

4. Web 服务器

概述：Web 服务器是处理来自浏览器请求的程序，并向用户反馈网页内容，主要用于托管网站。
常见的 Web 服务器：
- Apache：一个功能强大的开源服务器，支持多种模块和配置选项。
- Nginx：以高并发和低内存消耗著称，常用作反向代理和负载均衡器。
- Tomcat：专门用于运行 Java web 应用的容器。

5. 安全性

HTTPS

概述：HTTPS（安全超文本传输协议）是通过 SSL/TLS（安全套接层/传输层安全协议）加密的 HTTP。它的主要目的是保护数据在传输过程中的安全性。
工作原理：
- 使用公钥和私钥进行加密，确保数据在传输过程中不会被窃听或篡改。
- 用户与 Web 服务器之间建立安全的连接，通常可以通过浏览器中的小锁图标来验证。
好处：
- 提高用户信任度（尤其是在线购物或敏感信息输入时）。
- SEO 方面有益：搜索引擎（如 Google）更喜欢 HTTPS 网站。

身份验证和授权

身份验证：确认用户的身份，确保访问者是他们所声称的那个人。

常用方式：

OAuth：一种开放标准，允许用户在不分享用户名和密码的情况下进行身份验证，常用于第三方应用授权。

JWT（JSON Web Token）：一种紧凑的，URL 安全的方式，用于表示请求之间传输的信息，支持无状态认证。

  JWT 的工作流程
  
  用户登录：用户通过用户名和密码登录系统。
  生成 JWT：服务器验证用户的凭据，生成 JWT，并将其返回给用户。
  客户端存储 JWT：客户端（如网页应用或移动应用）将 JWT 存储在本地存储或 Cookies 中。
  请求 API：在后续的请求中，用户将 JWT 作为 HTTP 请求头（通常为 Authorization: Bearer <token>）发送到服务器。
  服务器验证 JWT：服务器接收到请求后，解码并验证 JWT的有效性。如果令牌有效且未过期，服务器根据载荷中的信息授权用户访问请求的资源。

授权：确定已验证用户是否具有访问特定资源的权限，确保用户只能查看和操作他们有权限的数据。

防火墙和 DDoS 防护

防火墙：
- 概述：防火墙是网络安全设备，用于控制进入和离开网络的数据流，防止未经授权的访问。
- 工作原理：通过设置规则允许或阻止特定类型的流量，保护内部网络的安全。
DDoS（分布式拒绝服务）攻击防护：
- 概述：DDoS 攻击是通过大量请求使目标服务器过载，导致正常用户无法访问。
- 防护措施：
  - 使用流量清洗服务来识别并过滤恶意流量。
  - 部署负载均衡，通过分散流量来减轻攻击的影响。
  - 设置速率限制，限制单个用户的请求速率，从而减轻攻击到网站的影响。

6. Web 性能优化

资源压缩：减少 CSS、JS 和图片文件的大小，提高加载速度。

缓存机制

1. 浏览器缓存：

浏览器缓存允许将静态资源（如图片、JavaScript 和 CSS 文件）存储在用户的浏览器中。这样，当用户再次访问网站时，浏览器可以直接从缓存中加载资源，而不是重新向服务器请求，从而减少加载时间和服务器负担。
实现方法：
- 使用 HTTP 头部（如 Cache-Control 和 Expires）设置资源的过期时间。
- 确保版本号的管理，例如通过在资源 URL 中添加版本号或哈希值来强制重新加载更新的资源。

2. CDN 缓存：

内容分发网络（CDN）是在多个地理位置部署的服务器网络。当用户请求某个资源时，CDN 会把请求转发给离用户最近的服务器，这样可以显著提高加载速度。
实现方法：
- 将静态资源上传到 CDN，设置相应的缓存策略，使 CDN 节点能缓存这些资源。
- 利用 CDN 提供的缓存失效机制，当资源更新时，可以手动或自动使 Cache 失效。

懒加载

懒加载是一种延迟加载的策略，主要用于提高页面的性能和用户体验。懒加载只有在用户滚动到图像或内容时，才会加载这些资源，从而减少初始页面加载的时间。

实现方法：

图像懒加载：

使用 JavaScript 或数据属性（如 data-src），当元素进入视口时，将实际的图像 URL 设置为 src。

<img data-src="image.jpg" class="lazy" alt="Image"/>

const lazyLoad = () => {
  const images = document.querySelectorAll('img.lazy');
  images.forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.classList.remove('lazy');
    }
  });
};
window.addEventListener('scroll', lazyLoad);