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

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

文章目录

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


1. gzip压缩

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

    # gzip configgzip 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.hqwc.cn/news/286067.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloudAliBaba篇之Seata:分布式事务组件理论与实践

1、事务简介 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit)。在关系数据库中,一个事务由一组SQL语句组成,事务具有4个属性:原子性、一致性、隔离性、持久性。这四个属性通常称为ACID原则。 原子性(atomici…

wsl minikube的简单应用

minikube minikube官网:https://minikube.sigs.k8s.io/docs/minikube是容器编排与管理的工具,本机事先已经安装了docker进入minikube官网,点Get Started!长这熊样 看一硬件要求 CPU 核心数 > 2内存 2GB磁盘 20GB网络连接容器…

微信小程序长按图片识别二维码

设置show-menu-by-longpress"true"即可&#xff0c;长按图片后会弹出一个菜单&#xff0c;若图片中包含二维码或小程序码&#xff0c;菜单中会有响应入口 <image src"图片地址" show-menu-by-longpress"true"></image>官方说明

智能优化算法应用:基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蛾群算法4.实验参数设定5.算法结果6.参考文献7.MA…

格密码与线性代数

目录 一. 幺模矩阵 二. Gram-Schmidt 正交化 三. 矩阵分解 四. 格基本区 五. 对偶格基 六. 矩阵伪逆 七. 正定矩阵 八. 矩阵转置 九. 奇异值分解&#xff08;SVD分解&#xff09; 格密码中格基是矩阵&#xff0c;格点是向量。本文章梳理一些格密码常用到的一些线性代数…

bisect_left,bisect_right,bisect的用法,区别以源码分析

bisect_left(*args, **kwargs) 向一个数组插入一个数字&#xff0c;返回应该插入的位置。 如果这个数字不存在于这个数组中&#xff0c;则返回第一个比这个数大的数的索引 如果这个数字存在&#xff0c;则返回数组中这个数的位置的最小值&#xff08;即最左边那个索引&#xf…

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

文章目录 前言什么是决策树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 代码实现 前言 前面我们通过几个题目…

Vue中父子Props传值不能修改的原因分析以及解决办法

Vue 官方文档中对于 Prop 的定义&#xff1a; Prop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 props 属性的时候&#xff0c;它就变成了那个组件实例的一个属性。为了给子组件传递数据&#xff0c;我们需要在该组件上使用 v-bind 指令绑定需要传递的数据。 由…

生物识别应用指纹的算法是什么样的?有什么性能?

方案特点 • 采用金融级安全芯片 ACH512 的指纹模组&#xff0c;指纹和密码安全存储&#xff0c;云端数据安全传输 • 采用高性能指纹专用安全MCU芯片ACM32FP4&#xff0c;支持小点阵图像算法处理 • 支持80*64、88*112、96*96、160*160、192*192等像素传感器 • 已适配传…

亚马逊,速卖通,shein卖家如何准确有效的测评补单

一、合理规划测评时间和数量 卖家需要合理规划测评的时间和数量。如果卖家过于频繁地进行测评&#xff0c;或者在短时间内进行大量的测评&#xff0c;这可能会被视为恶意行为&#xff0c;从而触犯风控机制。因此&#xff0c;卖家需要根据自己的销售情况和市场需求&#xff0c;…

二进制转十六进制字符串的C语言高效率实现(如“10100011“转为字符串“A3“)

对于一串二进制01比特,有时为了显示或者编辑方便高效,我们需要将二进制比特流转换成十六进制,众所周知,二进制转十六进制是每4比特进行转换,例如将以下二进制流: 1010 0011 1100 1101 转换为十六进制应为: A3CD 有时候,还可以每字节中间添加一个空格 A3 CD 下面直接…

Android 应用基准分析

先推荐一个作者的开源项目 最快的Json解析方式 参考 benchmark数据参考 benchmark的例子 可以参考json-benchmark 应用基准分析 是衡量时间维度的框架,是App界的鲁大师跑分,常用于耗时判断,冷启动,热启动,框架对比 预热对比等方面 开局一张图 下面再编 今天要做的是Microbe…