前端加载访问速度优化(Nginx)

news2024/12/23 1:10:06

当前端部署文件过大时很容易造成网页加载慢的现象,为了提升加载速度,提供nginx的三种解决方案。

文章目录

  • 1. gzip压缩
  • 2. 优化 keepalive 连接
  • 3.配置缓存
  • 注意事项
  • 总结


1. gzip压缩

往nginx.conf 的 http内容段落中加入

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

释义如下:
这是用来配置 gzip 压缩的。gzip 是一种用于压缩文件的压缩程序,在 Web 开发中被广泛应用,主要用于压缩 Web 应用的静态资源以减少传输流量,提高网页的加载速度。

  1. gzip on;:启用 gzip 压缩。
  2. gzip_min_length 1k;:指定压缩文件的最小长度,只有文件大小超过 1KB 时才启用压缩。
  3. gzip_comp_level 9;:指定压缩级别。级别越高,压缩效率越高,但会占用更多的 CPU 资源和时间。一般建议将级别设置为 6-9 之间。(这里根据你的服务器来定)
  4. gzip_types:指定需要压缩的文件类型。在这里,配置文件将 text、application 和 image 类型的文件压缩。一般来说,压缩的文件类型应该是纯文本格式或可压缩的二进制文件。
  5. gzip_vary on;:使用 Vary 头来指示代理服务器或浏览器缓存已压缩的版本。这样,更高效的压缩格式可以分别缓存,并在请求时正确地使用。
  6. gzip_disable "MSIE [1-6]\.";:禁用 gzip 压缩的浏览器,例如早期版本的 Internet Explorer。这些浏览器对于压缩格式的支持很差,因此禁用压缩可以避免出现问题。(这一步避免版本低浏览器访问网页出现问题)

2. 优化 keepalive 连接

keepalive_timeout 65;
keepalive_requests 100;

释义如下:

这两个配置参数是用来设置服务器的 keepalive 功能的。

  1. keepalive_timeout: 这个参数指定了一个已经建立的连接在没有活动(无数据传输)时保持的时间长度。对于每个连接,如果超过 keepalive_timeout 时间没有数据传输,则服务器会关闭该连接。默认值通常为 75 秒。较小的值可以确保连接及时释放,但会增加连接关闭和重新建立的频率;较大的值可以减少连接关闭和重新建立的频率,但可能会导致长时间的闲置连接占用服务器资源。
  2. keepalive_requests: 这个参数定义了一个 keepalive 连接上最多能够处理的请求次数。当一个 keepalive 连接处理了 keepalive_requests 次请求之后,服务器会关闭该连接。默认值通常为 100。较大的值可以减少连接的关闭和重新建立,但在某些情况下可能会占用过多的服务器资源。

3.配置缓存

往nginx.conf 的 http内容段落中加入

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

释义如下:

  1. /path/to/cache 是指定的缓存存储路径。
  2. levels=1:2 指定了文件系统中缓存目录的层级结构,这里是一级目录和两级子目录。
  3. keys_zone=my_cache:10m 定义了一个名为 my_cache 的缓存区域,大小为 10 兆字节。
  4. max_size=10g 指定了缓存最大可使用的空间大小为 10 GB。
  5. inactive=60m 表示缓存文件在60m时间内没有被访问时,会被视为不活动,并有可能被清理掉。

注意事项

对 Nginx 的配置更改可能需要 root 权限,请确保你有足够的权限来修改相关配置文件。此外,再次强调,修改配置文件前请备份文件以防止意外情况发生,还有就是nginx需要重启生效需要注意。

总结

当然方案不止这三种,以上方案仅供参考,希望能对你优化系统能够有所帮助。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1322744.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot之分层解耦以及 IOCDI的详细解析

### 3.2 分层解耦 刚才我们学习过程序分层思想了,接下来呢,我们来学习下程序的解耦思想。 解耦:解除耦合。 #### 3.2.1 耦合问题 首先需要了解软件开发涉及到的两个概念:内聚和耦合。 - 内聚:软件中各个功能模块内…

【算法系列篇】递归、搜索和回溯(四)

文章目录 前言什么是决策树1. 全排列1.1 题目要求1.2 做题思路1.3 代码实现 2. 子集2.1 题目要求2.2 做题思路2.3 代码实现 3. 找出所有子集的异或总和再求和3.1 题目要求3.2 做题思路3.3 代码实现 4. 全排列II4.1 题目要求4.2 做题思路4.3 代码实现 前言 前面我们通过几个题目…

(8)Linux Makefile | 依赖关系,依赖方法

💭前言: 本篇文章会着重讲解Linux中的自动化构建代码工具: make/makefile的介绍与使用。 在Linux下编译代码时,每次都会输入 gcc code.c -o code.exe在删除可执行程序时,每次都会输入 rm -rf code.exe这样非常的不方便,很麻烦,于是乎学习自动化构建代…

Netty Review - ByteBuf 读写索引 详解

文章目录 概念Pre概述ByteBuf简介ByteBuf的主要特性结构APIByteBuf的创建读写操作示例引用计数操作其他常用操作 Code 演示 概念 Pre Netty Review - 探索ByteBuf的内部机制 概述 Netty的ByteBuf是一个强大的字节容器,用于处理字节数据。它提供了比Java标准库中的…

for命令语句

命令说明: 在批处理中,for是最为强大的命令语句,它的出现,使得解析文本内容、遍历文件路径、数值递增和递减等操作更加简单,配合if、call、goto等流程控制语句,更是可以实现脚本复杂的自动化、智能化操作。…

js基础入门

先来一点js基础&#xff0c;其实js大部分的时候都在处理对象或者数组。 对象四个基本操作&#xff1a;增删改查 掌握元素的增删改查&#xff0c;了解如何拷贝&#xff0c;深拷贝和浅拷贝的区别。详情见代码 <script>//创建对象一共有三种赋值声明的语法let obj{} //赋值…

Relocations for this machine are not implemented,IDA版本过低导致生成汇编代码失败

目录 1、问题描述 2、安卓app发生崩溃&#xff0c;需要查看汇编代码上下文去辅助分析 3、使用IDA打开.so动态库文件&#xff0c;提示Relocations for this machine are not implemented 4、IDA版本较老&#xff0c;不支持ARM64的指令集&#xff0c;使用7.0版本就可以了 5、…

【数据结构】二叉树的模拟实现

前言:前面我们学习了堆的模拟实现&#xff0c;今天我们来进一步学习二叉树&#xff0c;当然了内容肯定是越来越难的&#xff0c;各位我们一起努力&#xff01; &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &…

创建个人网站(二)前端主页设计和编写一(太阳移动)

前言 以下内容纯纯当乐子来看就行&#xff0c;知识分享一下这样设计的原因&#xff0c;想看正文直接见下一节 为什么创建个人网站一之后几天没有动静了呢&#xff0c;一个是家里有事实在比较忙&#xff0c;第二个原因是没想到主页要设计成什么样&#xff0c;知道前两天问我姐什…

0基础学java-day22(多用户即时通信系统)

一、QQ 聊天项目演示 聊天通讯系统 在运运行过程出现的异常&#xff0c;应该是类的序列化不一致导致的 1 项目 QQ 演示 2 为什么选择这个项目 只做核心部分&#xff0c;界面相对弱化 3 项目开发流程 3.1 需求分析 3.2 界面设计 3.2.1 用户登录 3.2.2 拉取在线用户列表 …

对偶问题笔记(1)

目录 1 从 Lagrange 函数引入对偶问题2. 强对偶性与 KKT 条件3. 对偶性的鞍点特征 1 从 Lagrange 函数引入对偶问题 考虑如下优化问题 { min ⁡ f 0 ( x ) s . t f i ( x ) ≤ 0 , i 1 , ⋯ , p , h j ( x ) 0 , j 1 , ⋯ , q , x ∈ Ω , \begin{align} \begin{cases}\min…

Mimikatz 的使用(黄金票据的制作)

#江南的江 #每日鸡汤&#xff1a;孤独没有什么反义词&#xff0c;但他的近义词是自由&#xff0c;人生成功的道路上充满了孤独&#xff0c;那么也同样告诉你&#xff0c;你离成功后的自由不远了。 #初心和目标&#xff1a;在网络安全里高出名堂。。。 Mimikatz 本文分为两种…

kafka启动报错“输入行太长。 命令语法不正确“

下午想试一下本地安装启动一下 kafak&#xff0c;参考网上的安装文档&#xff0c;结果一直报错&#xff0c;最开始报的是这个错误&#xff1a; Classpath is empty. Please build the project first e.g. by running gradlew jarAll参考了很多网上的解决办法&#xff0c;最后…

科创金融的向善力量:浙商银行多措并举赋能科创企业,打造科技金融服务生态圈

近日&#xff0c;浙商银行科技金融服务发布会在杭州举行。 发布会以“智汇科创&#xff0c;善行未来”为主题&#xff0c;围绕科技金融服务“向善”新生态&#xff0c;浙商银行重磅推出科创企业全图景服务方案&#xff0c;正式发布科创积分贷&#xff0c;与浙江大学联合发布人…

【开源软件】最好的开源软件-2023-第五名 JHipster

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

翻译: LLMs大语言模型影响到高工资的的白领知识工作者 加速各行各业的自动化潜力 Automation potential across sectors

我们已经探讨了生成人工智能可能对您的工作有用&#xff0c;也讨论了分析其对企业的影响。现在&#xff0c;让我们拉远镜头&#xff0c;看看它对不同公司的工作角色以及对不同行业部门的影响。这个视频的结果对特定企业可能不那么直接可行&#xff0c;但也许这会帮助您思考并尝…

IDEA tomcat内存不足

-Xms256m -Xmx256m -XX:MaxNewSize256m -XX:MaxPermSize256m

LLMs推理框架总结

总结一下这些框架的特点&#xff0c;如下表所示&#xff1a; LLM推理有很多框架&#xff0c;各有其特点&#xff0c;下面分别介绍一下表中七个框架的关键点&#xff1a; vLLM&#xff1a;适用于大批量Prompt输入&#xff0c;并对推理速度要求高的场景&#xff1b;Text generat…

14、Kafka 请求是怎么被处理的

Kafka 请求是怎么被处理的 1、处理请求的 2 种常见方案1.1、顺序处理请求1.2、每个请求使用单独线程处理 2、Kafka 是如何处理请求的&#xff1f;3、控制类请求和数据类请求分离 无论是 Kafka 客户端还是 Broker 端&#xff0c;它们之间的交互都是通过 “请求 / 响应” 的方式完…

二叉搜索树第大K节点,剑指offer,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题方法&#xff1a; 难度分析&#xff1a; 审题目事例提示&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 代码补充&#xff1a; 代码实现&#xff08;非递归&…