身无彩凤双飞翼，心有灵犀一点通。
前情回顾
上篇文章大致讲了nginx的启停及防盗链的实现，今天聊一下前端性能优化的web缓存方案。
影响网络访问速度的因素
一般来说，有以下几点：
网络带宽访问距离服务器处理能力资源大小或内容本身大小
优化方案
将不需要实时更新的动态页转为静态页形成缓存，按照静态内容进行访问。
具体操作
优化资源本身
/**
传统的雪碧图，代码压缩，包括现在基于node,webpack配置的
一些东西都是在优化资源本身
**/
客户端缓存
/**
按照--[[将不需要实时更新的动态页转为静态页形成缓存，
按照静态内容进行访问]]--这个说法，前端开发人员很容易联想
到客户端缓存，localStorage,sessionStorage等。
这个思路本身没有什么问题，但是我们需要注意到一些细节，
比如资源的过期时间，这个东西放在客户端控制起来非常麻烦。
有可能需要自己去实现一个能够处理过期时间的缓存类。
但是，假如说某些静态资源是长时间不会更新的，完全可以
放到客户端处理的。
**/
基于nginx的Web缓存
/**
基本思想是将客户访问过的内容建立一个副本，存放在本地，
当数据下次被访问时，不必链接到服务器，而是由本地保存
的副本数据响。
具体来说，web服务器根据客户端请求从后端服务器获取响应
数据，并传回客户端，同时，web服务器将响应数据在本地建立
副本保存，这里说的本地是指web服务器，而不是客户端。当下次
有相同的请求进来时，web服务器直接使用本地副本响应访问请求。
**/
nginx 缓存配置实例
404错误驱动Web缓存
location {
root /myweb/server/; # 根目录
error_page 404 =200 /errpage$request_url; # 404 定向到errpage目录下
}
location /errpage/ {
internal; # 该目录不能通过外部链接访问;
alias /home/html/;
proxy_pass http://backend/; # 后端upstream 地址 或 源地址
proxy_set_header Accept-Encoding '' ; # 后端不返回压缩;
proxy_store on; # 设置nginx 将代理返回的文件保存;
proxy_store_access user:rw group:rw all:r; # 配置数据访问权限
proxy_temp_path /myweb/server/tmp; # 临时目录
}
Proxy_Cache机制缓存
该机制使用md5将请求链接hash后生成文件系统目录保存响应数据。nginx会 内存中建立缓存索引，提高访问效率。该机制支持对任意链接响应数据的缓存，不仅限于200状态时的数据。但是它没有实现自动清理磁盘缓存数据源的功能，如果缓存数量太多，会对服务器存储造成一定影响。
# Proxy_Cache 配置示例
http {
... # 其他配置
# 配置缓存数据存放路径 及 内存空间
proxy_cache_path /test/proxycache levels=1:2 max_size=20m inactive=5m loader_sleep=1m;
keys_zone-MYPROXYCACHE:10M
# 配置响应数据临时存放目录
proxy_tem_path /test/tmp;
s
server {
location / {
proxy_pass http:/mingyuejiangnan.club;
proxy_cache MYPROXYCACHE; # 使用MYPROXYCACHE 这个keys_zone
proxy_cache_valid 200 302 1h; # 配置200 302状态响应缓存1小时；
proxy_cache_valid 301 1d; # 配置 301状态响应缓存1天；
proxy_cache_valid 1m; # 配置其他态响应缓存1分钟；
}
}
}
# 配置解读
# 缓存数据存放在磁盘`/test/proxycache`目录下，包含两级hash目录，
# 缓存数据总量不超过20m，缓存数据5分钟内没被访问，则强制更新。
# 缓存空间名字为MYPROXYCACHE，不能超过10m;
# 每隔1分钟遍历一次缓存，更新缓存索引；
今日总结
- 影响性能的因素
- 优化方案
最后说两句
- 动一动您发财的小手，
「点个赞吧」 - 动一动您发财的小手，
「点个在看」 - 都看到这里了，不妨
「加个关注」
