nginx实现对css,js文件缓存
网页访问缓慢,响应时间长,想要优化网页访问速度,可以了解一下nginx缓存
首先我们先看一下,没设置之前的效果
总计5s才加载出全部页面。下面是优化后的效果,快了3s,这速度差的有点多。
我们在nginx实现对静态文件的缓存可以使我们服务在访问这些文件时,不需要请求服务器响应,直接访问缓存文件,达到提速的效果。
这张图是nginx的工作原理
实现方式:修改nginx.conf
user www www;
worker_processes 2; #设置值和CPU核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
#access_log /usr/local/webserver/nginx/logs/access.log crit;
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
use epoll;
worker_connections 65535;
}
http
{
include mime.types;
default_type application/octet-stream;
log_format main
'$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" $http_x_forwarded_for'
;
#charset gb2312;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 8m;
sendfile
on
;
tcp_nopush
on
;
keepalive_timeout 60;
tcp_nodelay
on
;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;
gzip
on
;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary
on
;
##cache##
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_temp_path /usr/local/webserver/nginx/temp;
proxy_cache_path /usr/local/webserver/nginx/cache levels=1:2 keys_zone=cache_one:200m inactive=1d max_size=30g;
##end##
#limit_zone crawler $binary_remote_addr 10m;
#下面是server虚拟主机的配置
upstream web_back{
server 127.0.0.1:8080; #并且可以分配权重weight,这样来配置集群服务器的访问优先权
}
server
{
listen 8060;#监听端口
#缓存相应的文件(静态文件)
location ~ .*\.(gif|jpg|jpeg|png|css|js|ico)$ {
proxy_pass http:
//web_back; #如果没有缓存则通过proxy_pass转向请求
proxy_redirect off;
access_log off;# 关闭日志
proxy_set_header Host $host;
proxy_cache cache_one;
proxy_cache_valid 200 302 24h; #对不同的HTTP状态码设置不同的缓存时间,h小时,d天数
proxy_cache_valid 301 1d;
proxy_cache_valid any 1m;
expires 30d;
add_header wall
"cache-file"
;
}
#web 使用
location /cpeducloud {
proxy_pass http:
//localhost:8080/cpeducloud;
proxy_redirect http:
// https://;
sendfile off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection
"Upgrade"
;
proxy_max_temp_file_size 0;
#this is the maximum upload size
client_max_body_size 0;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 180;
proxy_read_timeout 180;
proxy_temp_file_write_size 64k;
# Required for new HTTP-based CLI
proxy_http_version 1.1;
}
location /download {
proxy_pass http://localhost:8080/cpeducloud;
proxy_redirect http:// https://;
#下载速度限制
#limit_rate_after 10m;
limit_rate 5k;
}
access_log logs/cpeducloud.log main;
}
}
修改http和server两个模块,红色标注的是需要修改的地方,蓝色标注的可以不需要,修改之后重启nginx
看一下修改之后的效果,看页面响应头可以看出来
修改之前
修改之后
可以看到响应头的区别,看代码状态也可以看出,资源来自内存缓存
其中max-ages=2592000的意思是,缓存保存2592000秒,也就是30天(参见下表),30天后回重新向服务器请求资源,并重新保存缓存文件。
Cache-directive |
说明 |
---|---|
public |
所有内容都将被缓存(客户端和代理服务器都可缓存) |
private |
内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存) |
no-cache |
必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。 |
no-store |
所有内容都不会被缓存到缓存或 Internet 临时文件中 |
must-revalidation/proxy-revalidation |
如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证 |
max-age=xxx (xxx is numeric) |
缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高 |
参考文献:Nginx 静态资源缓存配置 - 手撕高达的村长 - 博客园 (cnblogs.com)
Cache-control_百度百科 (baidu.com)
nginx实现对css,js文件缓存相关推荐
- Flask-Assets 使用autoprefixer并压缩css/JS文件提高访问速度
扩展阅读 http://flask-assets.readthedocs.io/en/latest/ Flask-Assets实例学习 Flask-Assets中文参考 Flask-Assets ...
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- 利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩
利用html-minifier和uglify-js对前端HTML/CSS/JS文件进行压缩 前言:最近项目组项目接近完工,因为是个网站改造项目,大多数页面都是静态页面,前端开发并没有使用框架或工程化的 ...
- 在线压缩html/css/js文件成一行
在线压缩html/css/js文件成一行: 压缩网站为:http://tool.oschina.net/jscompress/ 将源码压缩成一行,去掉文中的一些注释和空格以及空行,好处是: 1.减小文 ...
- JAVA ftps设置_Java使用JSCH实现对FTPS服务器文件操作
SFTP是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.SFTP 为 SSH的一部份,是一种传输文件到服务器的安全方式.SF ...
- html,js文件缓存解决,html是如何实现自动清理js、css文件缓存的
html是如何实现自动清理js.css文件缓存的 发布时间:2020-04-09 10:08:05 来源:亿速云 阅读:106 作者:小新 html是如何实现自动清理js.css文件缓存的?很多人都不 ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来. #use ...
- java实现对properties类型文件的读写
在java项目中,我们通常会有一些配置属性的数据,采用properties文件对数据进行管理是很有必要的,尤其是在属性值改变和项目环境发生变化时,所以特地总结一下对properties文件的最常见的操 ...
- WebStorm学习笔记002---grunt-watch插件的使用-修改html,css,js文件实现自动编译更新
配置css和js文件发生变化就重新合并压缩css和js文件 package.json { "name": "AngularAndRequire", &q ...
最新文章
- 使用Python,OpenCV生成Aruco标记
- 10大类、142条数据源,中文NLP数据集线上搜索开放
- 新人新气象,给自己加油!
- html中基本选择器的优先级,CSS_CSS中的各种选择器与样式优先级小结,优先级:由高到低(从上到下)- phpStudy...
- android手机编译可运行的linux程序
- linux shell之把文本里面的;替换成\n格式输出
- Hadoop 开源调度系统zeus(二)
- 大容量导入和导出数据 -- 格式化文件生成
- Java的static关键字用法及原理
- python中什么是序列_在Python中,什么是字符串序列?(或者是油嘴滑舌的虫子?)...
- php 完整redis类,PHP Redis类
- oracle数据库三大日志,Oracle 数据库日志和用户日志位置
- Ubuntu学习NO5.高效工作方式
- Android app反编译
- 高效工作的一个绝招:一心二用(听歌,听知识等)
- Spring 02
- linux的全盘加密与文件系统加密在android中的应用
- SLAM导航机器人零基础实战系列:(四)差分底盘设计——2.stm32主控软件设计
- 技术揭秘12306改造(二):探讨12306两地三中心混合云架构
- 黄色-图片识别引擎的一些心得