脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置:首页网站技巧服务器nginx→ 前端加载访问速度优化

前端加载访问速度优化详细指南(Nginx)

  更新时间:2024年06月27日 11:08:29  作者:呼啦啦呼啦啦啦啦啦啦 
在前端开发中,优化页面加载速度成为了开发者的一项重要任务,下面这篇文章主要给大家介绍了关于前端加载访问速度优化(Nginx)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

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 应用的静态资源以减少传输流量,提高网页的加载速度。

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

2. 优化 keepalive 连接

keepalive_timeout 65;
keepalive_requests 100;

释义如下:

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

  • keepalive_timeout: 这个参数指定了一个已经建立的连接在没有活动(无数据传输)时保持的时间长度。对于每个连接,如果超过 keepalive_timeout 时间没有数据传输,则服务器会关闭该连接。默认值通常为 75 秒。较小的值可以确保连接及时释放,但会增加连接关闭和重新建立的频率;较大的值可以减少连接关闭和重新建立的频率,但可能会导致长时间的闲置连接占用服务器资源。
  • 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;

释义如下:

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

注意事项

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

总结

当然方案不止这三种,以上方案仅供参考,希望能对你优化系统能够有所帮助。

到此这篇关于前端加载访问速度优化的文章就介绍到这了,更多相关前端加载访问速度优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

    • 本文主要介绍了Nginx反向代理转发tomcat的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
      2022-07-07
    • 由于nginx的日志本身只是支持按照server_name或者大小进行划分,对于习惯了apache的按照一个网站每天一个日志的我来说是不可以接受的,所以就实现了按天切割的功能,这篇文章主要介绍了关于Nginx日志按日期切割的相关资料,需要的朋友可以参考下。
      2017-03-03
    • 本文介绍了如何使用Nginx实现负载均衡和前端项目部署,通过配置Nginx的负载均衡功能,可以有效地分发客户端请求,提高服务器的处理能力,感兴趣的可以了解一下
      2023-11-11
    • 这篇文章主要介绍了Nginx Rewrite模块应用的几种场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
      2019-11-11
    • 这篇文章主要给大家介绍了关于Nginx如何获取自定义请求header头和URL参数的相关资料,本文适用于需要在nginx里获取http请求头信息或者传递的参数进行一些计算和处理的情况,需要的朋友可以参考下
      2022-07-07
    • 这篇文章主要介绍了centos服务器中配置nginx的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
      2019-06-06
    • 程序在处理大量数据,接口超过1分钟(默认的)未返回数据,导致等待超时,出现这种情况,我们可以先优化程序,缩短执行时间,可以调大nginx超时限制的参数,使程序可以正常执行,本文介绍nginx设置超时时间及504 Gateway Time-out的问题解决方案,一起看看吧
      2024-02-02
    • 这篇文章主要给大家介绍了关于nginx https反向代理tomcat的2种实现方法,第一种方法是nginx配置https,tomcat也配置https,第二种方法是nginx采用https,tomcat采用http,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
      2017-12-12
    • 这篇文章主要介绍了windows10 系统配置nginx文件服务器的图文教程,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
      2019-12-12
    • 本篇文章主要介绍了nginx过滤url实现前台js的配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-01-01

    最新评论