nginx缓存静态资源,只需几个配置提升10倍页面加载速度

摘要:
nginx缓存静态资源,只需几个配置提升10倍页面加载速度首先我们看图说话这是在没有缓存的情况下,这个页面发送了很多静态资源的请求:1.png可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小,如果没有对这些静态资源压缩的话,那么静态资源加载应该会占用这个页面展示99%以上的时间。
nginx缓存静态资源,只需几个配置提升10倍页面加载速度

首先我们看图说话

这是在没有缓存的情况下,这个页面发送了很多静态资源的请求:

nginx缓存静态资源,只需几个配置提升10倍页面加载速度第1张
1.png

可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小,如果没有对这些静态资源压缩的话,那么静态资源加载应该会占用这个页面展示99%以上的时间。听起来是不是已经被吓到了,但是数据已经摆在这里了,这可不是危言耸听。

然后再看看使用了nginx缓存之后的效果图:

nginx缓存静态资源,只需几个配置提升10倍页面加载速度第2张
2.png

看到没有,朋友们,整个页面只有请求接口的时间和从本地磁盘加载css的时间。页面加载速度直接提升10倍以上!并且由于我这个页面没有采用前后端分离的方式,所以html没有缓存下来,如果采用了前后端分离架构的话,就连html都可以直接缓存,那提升的速度可想而知。当然由于浏览器或者手机端对页面加载的优化我们并不能很直观的感受到10倍的提升,实际上以肉眼观察的话,差不多减少了一半的时间,并且由于并没有向后端服务器请求这些静态资源,也相当于对后端服务器做了一层保护措施。

首先在http模块加配置:

# 开启gzip
gzipon;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间。一般设置1和2
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
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;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6].";
# 设置缓存路径并且使用一块最大100M的共享内存,用于硬盘上的文件索引,包括文件名和请求次数,每个文件在1天内若不活跃(无请求)则从硬盘上淘汰,硬盘缓存最大10G,满了则根据LRU算法自动清除缓存。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

关于模块以及nginx配置信息在上一篇文章有说明。

可以看到在http模块中主要是使用gzip压缩,最后一个配置才是和缓存有关的配置。

然后是server中加上location配置

location ~* ^.+.(css|js|ico|gif|jpg|jpeg|png)$ {
 log_not_found off;
 # 关闭日志
 access_log off;
 # 缓存时间7天
 expires 7d;
 # 源服务器
 proxy_pass http://localhost:8888;
# 指定上面设置的缓存区域
 proxy_cache imgcache;
 # 缓存过期管理
 proxy_cache_valid 200 3021d;
 proxy_cache_valid 40410m;
 proxy_cache_valid any 1h;
 proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
 }

加上这两块配置之后,就能享受到缓存给你带来的快乐了。当然系统优化之路还是相当漫长的,nginx缓存只是其中的一块而已,想要把系统达到完美还需要在很多地方下功夫,比如这些静态资源完全可以直接在客户端缓存,这样连请求都不会往服务端发了,更大的减轻服务器的压力。

免责声明:文章转载自《nginx缓存静态资源,只需几个配置提升10倍页面加载速度》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇echart渐变色adb命令——基础系统类命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

nginx + ffmpeg

第一种方案:ffmpeg+nginx 新的ffmpeg已经支持HLS。(本人也参与了代码供献,给自己做个广告:)) 点播: 生成hls分片: ffmpeg -i <媒体文件> -c:v libx264 -c:a aac -f hls /usr/local/nginx/html/test.m3u8 直播: ffmpeg -i udp://@:12...

Linux下查看Nginx的并发连接数和连接状态-乾颐堂

Linux下查看Nginx等的并发连接数和连接状态。 1、查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:  netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 或者: netstat -n | awk '/^tcp/ {++state[$NF...

Nginx安装与配置(Nginx服务器和Tomcat服务器是不同的服务器)

1.【nginx-server】将nginx的源代码上传到nginx服务器之中,同时还需要上传一些其他的辅助组件 2.【nginx-server】如果当前的主机上没有特定的编译环境,那么一定要在系统下载如下的环境包: •apt-get update •apt-get -y install make g++ gcc libpcre3 libpcrecpp*...

订单系统中并发问题和锁机制的探讨

订单系统中并发问题和锁机制的探讨 问题由来 假设在一个订单系统中(以火车票订单系统为例),用户A,用户B都要预定从成都到北京的火车票,A、B在不同的售票窗口均同时查询到了某车厢卧铺中、下铺位有空位,中铺设为1、下铺设为2。用户A正在犹豫订中铺还是下铺,这时用户B果断订购了下铺。当用户A决定订下铺时,系统提示下铺已经被预订,请重新选择铺位。在这个系统场景中,...

nginx 引号 x22

这个好像是nginx故意这样做的。 因为Nginx默认的log_format使用双引号作为间隔符,为了避免日志分析时候出现混乱,所以将双引号解析为x22了。 只能每天日志切割的时候,自己替换日志中的x22字符为双引号了 我的解决方法: sed 's#\x22#"#g' test.txt 可以把x22userIdx22:x22tommyels_hu...

kali系统网站部署笔记

网站放在 其他位置----计算机------var-----www----html 首先启动nginx service nginx start   然后访问127.0.0.1 就会看到Apache正在工作 启动mysql数据库 service mysql start 接着用 mysql -u root -p 连接mysql 用户名:root 密码:1234...