热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jshtml图片缓存问题,如何防止浏览器缓存CACHE?将CSS、JS、图片加上参数

什么是浏览器缓存浏览器缓存功能是网页性能优化的项目之一使用浏览器缓存功能如果用户再次来到您的网站,缓存css、js、jpg、png图档等静态资源将能使网页打开速度加快

ec9d636b4087ac1821379c915fcf9b2c.png

cache.jpg?resize=559%2C559

什么是浏览器缓存

浏览器缓存功能是网页性能优化的项目之一

使用浏览器缓存功能如果用户再次来到您的网站,缓存css、js、jpg、png图档等静态资源将能使网页打开速度加快,同时也能减少服务器负担。

更多关于浏览器缓存功能可参考google说明文档

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

用了浏览器缓存会遇到的问题

用了缓存之后总有些后遗症,例如调整了css或Javascript、更新了图片

但缓存时间还没到期,即便css、js与图档已经更新了,用户可能看见的仍是旧的内容

若要立即看到最新内容,就必须清除缓存或是使用Ctrl+F5强制重新加载页面

并不是所有的用户都懂得使用Ctrl+F5这类方式来看到最新的网页内容

解决浏览器缓存的方法

浏览器缓存这个问题虽然很烦人,但其实只要在扩展名后方加上参数

如此一来浏览器会认定URL变得不相同,向服务器请求新的下载

方式如下:

在style.css后方加上”?”以及”自订字符串”

可以是乱数、日期时间、版本编号

例如

乱数 > style.css?f5V3Ra (随机乱打就对了)

日期 > style.css?20140627

版本 > style.css?v2.10.1

累加 > style.css?0001 (每改一次+1)

依照自己的更新频率、习惯或喜好决定使用哪种方式即可

前提是不要与旧版本重复哦

原代码像这样:

css

js

同样方式也适用于图档喔

像是这样:

course1.png?v2%E2%80%B3

css的用到的图片也可以:

.logo{background:url(../images/logo.png?justin_edit);}

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。



推荐阅读
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 探索新一代API文档工具,告别Swagger的繁琐
    对于后端开发者而言,编写和维护API文档既繁琐又不可或缺。本文将介绍一款全新的API文档工具,帮助团队更高效地协作,简化API文档生成流程。 ... [详细]
  • 鼠标悬停出现提示信息怎么做
    概述–提示:指启示,提起注意或给予提醒和解释。在excel中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等。设置方式也有多种,简单的,仅为单元格插入批注就可 ... [详细]
  • 本文详细介绍如何使用 HTML5 和 JavaScript 实现一个交互式的画板功能。通过具体代码示例,帮助读者理解 Canvas API 的基本用法及其在绘图应用中的实际应用。 ... [详细]
  • 探讨 HDU 1536 题目,即 S-Nim 游戏的博弈策略。通过 SG 函数分析游戏胜负的关键,并介绍如何编程实现解决方案。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 在尝试使用C# Windows Forms客户端通过SignalR连接到ASP.NET服务器时,遇到了内部服务器错误(500)。本文将详细探讨问题的原因及解决方案。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • 本文探讨了在构建应用程序时,如何对不同类型的数据进行结构化设计。主要分为三类:全局配置、用户个人设置和用户关系链。每种类型的数据都有其独特的用途和应用场景,合理规划这些数据结构有助于提升用户体验和系统的可维护性。 ... [详细]
  • 本文回顾了2017年的转型和2018年的收获,分享了几家知名互联网公司提供的工作机会及面试体验。 ... [详细]
author-avatar
天河体育场里的执波仔_287
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有