当前位置：首页 > article >正文

Web 架构之动静分离

article 2025/9/19 17:28:00

文章目录

- 一、引言
- 二、动静分离的原理
- - 2.1 什么是动静分离
  - 2.2 为什么要进行动静分离
- 三、动静分离的实现方式
- - 3.1 基于 Nginx 的动静分离
  - 3.2 基于 CDN 的动静分离
- 四、常见问题及解决方法
- - 4.1 缓存问题
  - 4.2 跨域问题
  - 4.3 性能监控问题
- 五、思维导图
- 六、总结

一、引言

在当今的 Web 应用开发中，随着用户对网站性能和响应速度的要求越来越高，如何优化 Web架构以提高网站的性能成为了开发者们关注的焦点。动静分离作为一种重要的 Web 架构优化策略，能够显著提升网站的性能和可维护性。本文将深入探讨
Web 架构中的动静分离技术，包括其原理、实现方式、常见问题及解决方法，并通过思维导图的形式对相关知识点进行总结。

二、动静分离的原理

2.1 什么是动静分离

动静分离是指将 Web 应用中的动态资源（如 PHP、JSP、ASP 等动态脚本生成的页面）和静态资源（如 HTML、CSS、JavaScript、图片等）分开处理和部署。通过将静态资源和动态资源分别部署在不同的服务器或存储系统上，可以充分发挥各自的优势，提高网站的性能和可扩展性。

2.2 为什么要进行动静分离

提高性能：静态资源的访问速度通常比动态资源快，因为静态资源不需要经过服务器端的脚本处理。将静态资源缓存到 CDN（内容分发网络）或专门的静态资源服务器上，可以减少服务器的负载，提高资源的访问速度。
增强可维护性：将静态资源和动态资源分开管理，使得代码结构更加清晰，便于开发和维护。同时，静态资源的更新和部署也更加方便，不会影响到动态资源的运行。
提高扩展性：随着网站访问量的增加，可以通过增加静态资源服务器或 CDN 节点来扩展静态资源的处理能力，而不会对动态资源服务器造成压力。

三、动静分离的实现方式

3.1 基于 Nginx 的动静分离

Nginx 是一款高性能的 Web 服务器和反向代理服务器，它可以通过配置文件实现动静分离。以下是一个简单的 Nginx 配置示例：

# 定义静态资源服务器
server {listen 80;server_name static.example.com;# 静态资源根目录root /var/www/static;# 处理静态资源请求location / {# 允许缓存expires 30d;add_header Cache-Control "public";}
}# 定义动态资源服务器
server {listen 80;server_name example.com;# 动态资源根目录root /var/www/dynamic;# 处理动态资源请求location / {# 反向代理到后端应用服务器proxy_pass http://backend_server;}# 排除静态资源请求location ~* \.(jpg|jpeg|png|gif|css|js)$ {# 重定向到静态资源服务器rewrite ^/(.*)$ http://static.example.com/$1 permanent;}
}

3.2 基于 CDN 的动静分离

CDN 是一种分布式的内容分发网络，它可以将静态资源缓存到离用户最近的节点上，从而提高资源的访问速度。使用 CDN 进行动静分离的步骤如下：

选择合适的 CDN 服务提供商：如阿里云 CDN、腾讯云 CDN 等。
将静态资源上传到 CDN：可以通过 CDN 服务提供商提供的控制台或 API 将静态资源上传到 CDN 节点。
修改网站代码：将静态资源的引用地址替换为 CDN 的地址。

以下是一个简单的 HTML 代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动静分离示例</title><!-- 引用 CDN 上的 CSS 文件 --><link rel="stylesheet" href="https://cdn.example.com/style.css">
</head>
<body><h1>Hello, World!</h1><!-- 引用 CDN 上的 JavaScript 文件 --><script src="https://cdn.example.com/script.js"></script>
</body>
</html>

四、常见问题及解决方法

4.1 缓存问题

问题描述：静态资源被缓存后，更新不及时，导致用户看到的是旧版本的资源。
解决方法：
- 设置合理的缓存时间：根据资源的更新频率，设置合适的缓存时间。对于不经常更新的资源，可以设置较长的缓存时间；对于经常更新的资源，可以设置较短的缓存时间。
- 使用版本号：在静态资源的文件名中添加版本号，每次更新资源时，修改版本号，从而强制浏览器重新加载资源。

4.2 跨域问题

问题描述：当静态资源和动态资源部署在不同的域名下时，可能会出现跨域问题，导致浏览器无法正常加载资源。
解决方法：
- 设置 CORS（跨域资源共享）：在服务器端设置响应头，允许跨域访问。例如，在 Nginx 中可以通过以下配置实现：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

使用 JSONP（JSON with Padding）：JSONP 是一种跨域数据交互的技术，它通过动态创建 <script> 标签来实现跨域请求。

4.3 性能监控问题

问题描述：无法及时发现动静分离后网站性能的变化，导致性能问题得不到及时解决。
解决方法：
- 使用性能监控工具：如 Google Analytics、New Relic 等，对网站的性能进行实时监控。
- 设置性能指标：定义关键性能指标（如响应时间、吞吐量等），并设置相应的阈值，当指标超过阈值时及时报警。

五、思维导图

六、总结

动静分离是一种有效的 Web 架构优化策略，它可以显著提高网站的性能和可维护性。通过将静态资源和动态资源分开处理和部署，可以充分发挥各自的优势，减少服务器的负载，提高资源的访问速度。在实际应用中，我们可以根据具体的需求选择合适的实现方式，并注意解决常见的问题，如缓存问题、跨域问题和性能监控问题等。希望本文对您理解和应用动静分离技术有所帮助。

Web 架构之动静分离

文章目录一、引言二、动静分离的原理2.1 什么是动静分离2.2 为什么要进行动静分离三、动静分离的实现方式3.1 基于 Nginx 的动静分离3.2 基于 CDN 的动静分离四、常见问题及解决方法4.1 缓存问题4.2 跨域问题4.3 性能监控问题五、思维导图六、总结一、引言在当今的 Web 应…...

编程日记 2025/7/28 23:29:04

20250515配置联想笔记本电脑IdeaPad总是使用独立显卡的步骤

20250515配置联想笔记本电脑IdeaPad总是使用独立显卡的步骤 2025/5/15 19:55 百度：intel 集成显卡 NVIDIA 配置成为总是用独立显卡百度为您找到以下结果 ?要将Intel集成显卡和NVIDIA独立显卡配置为总是使用独立显卡，可以通过以下步骤实现?&#xff…...

编程日记 2025/9/18 8:07:02

sparkSQL读入csv文件写入mysql

思路示例 （年龄>18改成>20) mysql的字符集问题把user改成person “让字符集认识中文”...

编程日记 2025/9/3 17:20:15

大涡模拟实战：从区域尺度到街区尺度的大气环境模拟

前言： 随着低空经济的蓬勃发展，无人机、空中出租车等新型交通工具正在重塑我们的城市空间。这场静默的革命不仅带来了经济机遇，更对城市大气环境提出了全新挑战。在距离地面200米以下的城市冠层中，建筑物与大气的复杂相互作用、人…...

编程日记 2025/9/18 13:40:53

centos安装方式的aarch64架构下的kylinv10安装docker23.0.0

以下通过压缩包方式安装docker 因为yum方式配置各种依赖仓库太麻烦了，如果你不想执行 yum repolist yum clean all yum makecache那可以按照以下压缩包的方式安装任何版本的docker 1.查看glibc版本 ldd --version我这里显示2.28，安装docker23.0.0没问…...

编程日记 2025/6/21 13:51:19

单目测距和双目测距 bev 3D车道线

单目视觉测距原理单目视觉测距有两种方式。第一种，是通过深度神经网络来预测深度，这需要大量的训练数据。训练后的单目视觉摄像头可以认识道路上最典型的参与者——人、汽车、卡车、摩托车，或是其他障碍物（雪糕桶之类&#xf…...

编程日记 2025/9/18 4:29:37

鸿蒙OSUniApp 实现一个精致的日历组件#三方框架 #Uniapp

使用 UniApp 实现一个精致的日历组件前言最近在开发一个约会小程序时，需要实现一个既美观又实用的日历组件。市面上虽然有不少现成的组件库，但都不太符合我们的设计需求。于是，我决定从零开始，基于 UniApp 自己实现一个功能完…...

编程日记 2025/9/18 0:52:20

【爬虫】DrissionPage-3

安装：4.1最新版本 pip install drissionpage --upgrade 官方文档：🛰️ 连接浏览器 | DrissionPage官网 1 Chromium对象 Chromium对象用于连接和管理浏览器。标签页的开关和获取、整体运行参数配置、浏览器信息获取等都由它进行。 1.1 默认…...

编程日记 2025/9/18 14:41:55

Web开发-JavaEE应用SpringBoot栈SnakeYaml反序列化链JARWAR构建打包

知识点： 1、安全开发-JavaEE-WAR&JAR打包&反编译 2、安全开发-JavaEE-SnakeYaml反序列化&链一、演示案例-WEB开发-JavaEE-项目-SnakeYaml序列化常见的创建的序列化和反序列化协议 • （已讲）JAVA内置的writeObject()/readObje…...

编程日记 2025/9/19 14:11:58

项目复习（2）

第四天高并发优化前端每隔15秒就发起一次请求，将播放记录写入数据库。但问题是，提交播放记录的业务太复杂了，其中涉及到大量的数据库操作：在并发较高的情况下，会给数据库带来非常大的压力使用Redis合并写请求一…...

编程日记 2025/9/5 18:33:05

UE 材质基础第一天

课程：虚幻引擎【UE5】材质宝典【初学者材质基础入门系列】-北冥没有鱼啊_-稍后再看-哔哩哔哩视频随便记录一些黑色是0到负无穷，白色是1到无穷各向异性有点类似于高光，可以配合切线来使用，R G B 相当于 X Y Z轴，切…...

编程日记 2025/9/12 10:24:18

短剧小程序系统开发源码上架，短剧项目市场分析

引言随着短视频内容消费的爆发式增长，短剧小程序凭借其碎片化、强互动、低成本的特点，成为内容创业与资本布局的新风口。2024年以来，行业规模突破500亿元，预计2027年将超千亿17。本文将深度解析短剧小程序系统开发的技术优势、市…...

编程日记 2025/7/12 13:33:36

学习FineBI

FineBI 第一章 FineBI 介绍 1.1. FineBI 概述 FineBI 是帆软软件有限公司推出的一款商业智能 （Business Intelligence） 产品。 FineBI 是新一代大数据分析的 BI 工具 ， 旨在帮助企业的业务人员充分了解和利用他们的数据。FineBI 凭借强…...

编程日记 2025/9/5 18:32:46

Oracle日期计算跟Mysql计算日期差距问题-导致两边计算不一致

Oracle数据库对日期做加法时，得到的时间是某天的12:00:00 例： Oracle计算 select (TO_DATE(2025-04-14, YYYY-MM-DD)1.5*365) from dual; 结果：2026/10/13 12:00:00Mysql计算 select DATE_ADD( str_to_date( 2025-04-14, %Y-%m-%d ), INTER…...

编程日记 2025/8/26 17:11:23

深入剖析某App视频详情逆向：聚焦sig3参数攻克

深入剖析某手App视频详情逆向：聚焦sig3参数攻克一、引言在当今互联网信息爆炸的时代，短视频平台如某手，已成为人们获取信息、娱乐消遣的重要渠道。对于技术爱好者和研究人员而言，深入探索其内部机制，特别是视频详情…...

编程日记 2025/9/5 18:32:31

Java求职面试揭秘：从Spring到微服务的技术挑战

文章简述在这篇文章中，我们将通过一个幽默的面试场景，揭秘互联网大厂Java求职者在面试中面对的技术挑战。面试官将从Spring框架、微服务架构到大数据处理等多个维度进行提问，并详细讲解这些技术点的应用场景和解决方案，帮助小白…...

编程日记 2025/9/1 8:30:55

【Linux】Linux安装并配置MongoDB

目录 1.添加仓库 2.安装 MongoDB 包 3.启动 MongoDB 服务 4. 验证安装 5.配置 5.1.进入无认证模式 5.2.1创建用户 5.2.2.开启认证 5.2.3重启 5.2.4.登录 6.端口变更 7.卸载 7.1.停止 MongoDB 服务 7.2.禁用 MongoDB 开机自启动 7.3.卸载 MongoDB 包 7.4.删除数…...

编程日记 2025/9/5 18:32:22

HANA数据库死锁

死锁是两个或多个事务相互交叉锁定的情况，因此任何事务都无法继续进行。通常死锁是由应用程序设计缺陷引起的，但在主键约束的上下文中也可能存在更多的技术死锁（这种情况请参考 SAP note 2429521）。当 HANA 数据库出现死锁时&am…...

编程日记 2025/8/11 18:13:38

STC32G12K128实战：串口通信

STC32G12K128芯片写一个按键通过串口1发送字符串的程序。首先，确认芯片的串口1配置。STC32G系列通常使用UART1，相关的寄存器是P_SW1来选择引脚。默认情况下，UART1的TX是P3.1。接下来是设置定时器作为波特率发生器。通常用定时器2&#xff0c…...

编程日记 2025/8/25 19:40:59

Kotlin Multiplatform与Flutter、Compose共存：构建高效跨平台应用的完整指南

简介在移动开发领域，跨平台技术正在重塑开发范式。Kotlin Multiplatform (KMP) 作为 JetBrains 推出的多平台开发框架，结合了 Kotlin 的简洁性与原生性能优势，使开发者能够高效共享业务逻辑。而 Flutter 凭借其高性能渲染引擎（Skia）和丰富的组件库，成为混合开发的首选方…...

编程日记 2025/7/8 14:33:02

ElasticSearch深入解析（十二）：聚合——分桶聚合、指标聚合、管道子聚合

文章目录一、分桶聚合1. 分桶聚合的核心逻辑与核心类型2. 分桶聚合的高级特性二、指标聚合1. 指标聚合的核心逻辑与基础类型（1）基础统计指标（单值输出）（2）复合统计指标（多值输出） …...

编程日记 2025/9/5 0:18:48

spark小任务

import org.apache.spark.{Partitioner, SparkConf, SparkContext}object PartitionCustom {// 分区器决定哪一个元素进入某一个分区// 目标: 把10个分区器，偶数分在第一个分区，奇数分在第二个分区// 自定义分区器// 1. 创建一个类继承Partitioner// 2. …...

编程日记 2025/9/18 17:26:22

Ubuntu 20.04 报错记录: Matplotlib 无法使用 OpenCV 的 libqxcb.so

网上查了一下这个报错，有很多解决方案，但是都不是针对 OpenCV 触发的这种 qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in " */lib/*/site-packages/cv2/qt/plugins" even though it was found. 本文的方案是牺牲 …...

编程日记 2025/9/18 7:09:57

JS 高级程序设计设计模式

设计模式是提升代码可维护性、可扩展性和可复用的重要工具创建型模式工厂模式封装对象的创建过程，通过函数或类统一生成实例，避免直接使用 new 关键字简单工厂：通过函数返回不同对象实例 function createButton(type) {if (type prim…...

编程日记 2025/6/20 1:56:02

新电脑软件配置二：安装python，git, pycharm

安装python 地址 https://www.python.org/downloads/ 不是很懂为什么这么多版本安装windows64位的这里我是凭自己感觉装的了然后cmd输入命令没有生效，先重启下？ 重启之后再次验证环境是成功的之前是输入的python -version 命令输入错误安装pyc…...

编程日记 2025/9/6 14:09:43