HTML中CSS和JS链接中的版本号

  在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。

  现在问题来了,.htaccess设置的css、js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css、js,在这些css、js缓存未过期之前,浏览器只会从缓存中读取css和js,如果你在服务器上修改了css和js,那么这些更改在回头客的浏览器中是不会有变化的,除非回头客按了Ctrl + F5刷新了你的网站页面或者手动清空了浏览器的缓存。一个网站的访客成千上万,回头客也会有不少,你不可能在更新css后让每个访客都刷新一下缓存吧,那么这个问题你会怎么处理呢?

  方法一

  更改css文件名:其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后,在更换一下css的文件名就可以了。如原先html中的css调用语句如下:

<link rel="stylesheet" href="style.css" />

  改一下css文件名就可以了:

<link rel="stylesheet" href="index.css" />

  另外一种更改css文件名的方法是将版本号写到文件名中,如:

<link rel="stylesheet" href="index.v2011.css" />

  css文件更新后,改一下文件名中的版本号即可:

<link rel="stylesheet" href="index.v2012.css" />

  方法二

  给css文件加个版本号:其实每次修改css文件后还要修改css的文件名有点麻烦,那么我们可以在加载css语句中加入个版本号(即css链接中?后面的内容)就可以了。如原先html中的css调用语句如下:

<link rel="stylesheet" href="style.css?v=2011" />

  改一下css文件的版本号改成2012就可以了:

<link rel="stylesheet" href="style.css?v=2012" />

  需要注意的是,部分代理缓存服务器不会缓存网址中包含 "?" 的资源,所以方法二可能会导致你原先的缓存功能失效,可以改用第一种方法。

  总结

  其实css文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。

原文出处:露兜即刻 https://www.ludou.org/css-version.html

本站原创内容,如需转载请注明来源:https://www.liutonghui.com/25.html

上一篇 2013-10-10
下一篇 2013-10-21

评论列表(0条)

  • 暂时没有评论!

发表评论

captcha

相关推荐

  • 吊炸天的 PHP 7 ,你值得拥有

      2015年的夏天,虽然来得不算火热,但是在互联网技术的夏天,比任何一年都更为火热。   刚刚才结束了 5 月底的网易、支付宝、携程以及多家云存储厂商的接连故障的坏消息,6月上旬则迎来了编程语言界两大好消息,第一件是 Swift 2.0 发布以及开源,另一件是PHP 7 alpha版正式发布。这两件大事,都是可以载入相应的编程语言的史册级的事件。   Swift 2.0 的事,咱先不说了,本文的重点是带着大家见识一下鸟哥等众位大神......

    2015-06-25
    20392
  • CSS创建竖排文字的简单方法

      在制作网页的时候我们经常需要创建一些竖排的文字,或许这对你来说是一件很简单的事情,但是你是否想过用CSS可有N种创建竖排文字的方法?下面是由我翻译自Nettuts+的文章,希望这几种方法能够给你带来一些提示。   方法一:&lt;br /&gt;标签   一种可能的方法(但不推荐)是在每个字母后面添加&lt;br /&gt;标签来实现竖排文字: &lt;h1&gt; N &lt;br /&gt;E &lt;br /&gt;T ......

    2013-11-27
    13630
  • HTML5中article元素与section元素有什么区别

      在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。   在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素......

    2014-10-27
    18530
  • HTML5新手入门指南

      HTML5是HTML的最新版本,引入了一系列新的元素、属性和API,使得开发者可以创建更强大、更交互性的Web页面。以下是HTML5新手入门指南的一些建议:   1. 基础结构 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="......

    2015-02-18
    18340
  • 一个经典的PHP加密解密算法

      项目中有时我们需要使用PHP将特定的信息进行加密,也就是通过加密算法生成一个加密字符串,这个加密后的字符串可以通过解密算法进行解密,便于程序对解密后的信息进行处理。   最常见的应用在用户登录以及一些API数据交换的场景。   最常见的应用在用户登录以及一些API数据交换的场景。   笔者收录了一些比较经典的PHP加密解密函数代码,分享给大家。加密解密原理一般都是通过一定的加密解密算法,将密钥加入到算法中,最终得到加密解密结果......

    2016-06-07
    10760
  • 织梦DedeCMS收费5800元,大批建站公司将受影响

      9月26日,一则消息在网站建站行业炸开锅:国内知名开源建站程序织梦内容管理系统(DedeCMS)官方宣布,使用其旗下产品DedeCMS的除个人非盈利用户外,全部需要购买商业授权。也就是说织梦要强制收费了。   作为国内最早也是使用率最高的CMS之一,DedeCMS是许多站长入行之初的启蒙者,在那个个人站长的红利期,很多站长最初都是选择了织梦作为自己网站的程序。这是因为DedeCMS简单易用,功能强大,并且开源免费,一度占有非常......

    2021-09-27
    16464
  • PHP封装数据库操作Model类示例

      数据库操作是产品开发中最常见的需求,封装一个PHP数据库操作Model类可以减少反复的写大量SQL语句,下面就为大家分享一个数据库操作Model类。 &lt;?php //引入配置文件 include "./config.php"; class Model { public $link;//存储连接对象 public $tableName = "";//存储表名 public $field =......

    2019-06-12
    15454
  • ThinkPHP5使用laypage分页插件实现列表分页功能

      在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页。thinkPHP框架中自带了分页功能,但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS、CSS等资源。如果页面包含的JS过多、过大,会增加流量压力。因此,我们使用laypage插件。每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面。   分页流程   流程说明:   1) 调研App.php中的函数,该函数调用fetch函......

    2018-05-11
    20880