网站速度优化技巧:Nginx设置js、css过期时间

原文:http://www.webkaka.com/blog/archives/Nginx-set-the-expiration-time-for-js-and-css.html

配置Nginx expires缓存实现性能优化

原文:https://blog.webfsd.com/post_pei-zhinginx-expires-huan-cun-shi-xian-xing-neng-you-hua.html

网站设置Js、css等文件的过期时间,是提升网站速度的基本技巧方法之一,之前写过如何在IIS设置网页内容过期时间一文,满足了部分网友的需要,最近有网友在群里提到,他们使用的是Nginx服务器,但还不知如何设置Js、css文件过期时间,故写下此教程,以便查看。

Nginx如何设置Js、css等文件的过期时间

首先打开配置文件/etc/nginx/nginx.conf,然后找到下面这句话:

location~ .*\.(gif|jpg|png|htm|html|css|js|flv|ico|swf)(.*) {
                   expires 30d;
             }

设置expires这个参数即可,30d表示30天,注意后面有个分号“;”。

如果过期时间为小时,则用“h”,如“expires 1h;”表示文件缓存在1小时后过期。看看下面的范例:

#图片缓存30天
      location ~.*\.(jpg|png|jpeg)$  
      {  
        expires 30d;  
      }
 
      #js css缓存一小时
      location ~.*\.(js|css)?$  
      {  
        expires 1h;  
      }

语法解释

nginx作为web服务器,有时需要让浏览器缓存(Browser Caching) 是为了加速浏览并节约网络资源,浏览器在用户磁盘上对最近请求过的文档进行存储。
 
      nginx通过expires指令来设置浏览器的Header

语法: expires [time|epoch|max|off]
      默认值: expires off
      作用域: http, server, location

使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标,(起到控制页面缓存的作用)。

可以在time值中使用正数或负数。“Expires”头标的值将通过当前系统时间加上您设定的 time 值来获得。

epoch 指定“Expires”的值为 1 January, 1970, 00:00:01 GMT。

max 指定“Expires”的值为 31 December 2037 23:59:59 GMT,“Cache-Control”的值为10年。

-1 指定“Expires”的值为服务器当前时间;-1s,表示永远过期,即不缓存文件。

如何检测网页过期设置是否生效?

打开webkaka的网站速度诊断工具(http://pagespeed.webkaka.com/),输入你的网页地址,检测后,立即可以看到设置是否生效了。

检测网页缓存是否生效

上图看到,被检测网页的js、css文件过期时间为1天。

(转)网站速度优化技巧:Nginx设置js、css过期时间的更多相关文章

  1. DEDE网站地图优化技巧

    DEDE网站地图优化技巧-把网站地图生成在系统根目录,利于搜索引擎收录相信恨多用DEDECMS做站的朋友,为避免将data目录内的东西随便外泄,在robots中将data目录屏蔽了,但是DEDE默认的 ...

  2. Redis五种数据类型-设置key的过期时间

    1.redis命令客户端 [root@localhost bin]# ./redis-cli 127.0.0.1:6379> #是否运行着 127.0.0.1:6379> ping PON ...

  3. RabbitMQ 设置队列的过期时间

    设置队列的过期时间非常简单,在声明队列时,设置x-expires参数即可.当队列的生存周期超时后,RabbitMQ server会自动将该队列删除. 代码如下: channel.QueueDeclar ...

  4. netty系列之:一个价值上亿的网站速度优化方案

    目录 简介 本文的目标 支持多个图片服务 http2处理器 处理页面和图像 价值上亿的速度优化方案 总结 简介 其实软件界最赚钱的不是写代码的,写代码的只能叫马龙,高级点的叫做程序员,都是苦力活.那么 ...

  5. Nginx设置Js、Css等静态文件的缓存过期时间

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

  6. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  7. 详解 nginx location ~ .*\.(js|css)?$ 什么意思?

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...

  8. nginx配置静态文件过期时间

    1. 编辑虚拟主机配置文件/usr/local/nginx/conf/vhosts/huangzhenping.conf 说明:采用location方式 1 2 3 4 5 6 7 8 9 10  l ...

  9. thinkphp3.2设置session的过期时间

    thinkPHP3.2中session的过期时间配置是不能使用的,我们需要修改一下它的配置文件thinkPHP>common>functions.php,找到这一行: if(isset($ ...

随机推荐

  1. shell 字符串中定位字符位置 获取字符位置

    linux shell 字符串操作(长度,查找,替换)详解 该博文中描述的如下两个字符串操作, ${string:position} #在$string中, 从位置$position开始提取子串 ${ ...

  2. MongoDB整理笔记の安装及配置

    1.官网下载 地址:http://www.mongodb.org/downloads mongodb-linux-x86_64-2.4.9.tgz (目前为止,64位最新版本) 2.解压 切换到下载目 ...

  3. React学习笔记4

    遇到的问题 目前模板是自己任意定义的,样式不好控制 在组件设计时,可以把页面数据显示的地方,分割父子组件嵌套的结构,比如,商品数据显示列表,把组外层容器看成是父组件,里面是数据显示的渲染模板,看成是子 ...

  4. asp.net 类,接口

    ASP.NET抽象类和接口的比较 相同点 ●都不能被直接实例化,都可以通过继承实现其抽象方法. ●都是面向抽象编程的技术基础,实现了诸多的设计模式. 不同点 ●接口支持多继承:抽象类不能实现多继承.  ...

  5. c#帮助类:发送邮件

    private static string IsOpenSendMail = ConfigurationManager.AppSettings["IsOpenSendMail"]; ...

  6. js Array操作

    JS中数组的操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...

  7. C# LINQ(6)

    目前说了 select group...by where from join on equal 这几个关键字,如果经过练习,熟练使用这几个关键字,大部分的LINQ查询基本都是可以完成的. 今天说一下l ...

  8. MooseFS分布式文件系统介绍

    一.简介 MooseFS是一个具备冗余容错功能的分布式网络文件系统,它将数据分别存放在多个物理服务器或单独磁盘或分区上,确保一份数据有多个备份副本.对于访问的客户端或者用户来说,整个分布式网络文件系统 ...

  9. [Algorithm]排序

    一.排序算法 1.插入排序 1) 直接插入排序:(插入类) 1 void InsertSort( ElemType R[], int n ) 2 { 3 for ( int i = 2; i < ...

  10. 201621123012 《java程序设计》第2周学习总结

    1. 本章学习总结 1.学习了java许多了基本语法,string函数,arraylist函数的各种功能方法和调用. 2.了解了除for循环之外的foreach循环 3.学习了各种数值类的包装 4.熟 ...