css 版本号怎么加

2024-08-08

为js和css文件自动添加版本号

web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和

常用js，css文件统一加载方法，并在加载之后调用回调函数

原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceController.js”文件内. /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = [];

nginx设置反向代理后，页面上的js css文件无法加载

问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下找不到文件,需要单独指定js css文件的访问路径.

css 实现页面加载中等待效果

<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my pa

nginx反向代理转发后页面上的js css文件无法加载【原创】

故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源解决js css文件无法加载无法访问的问题解决办法: 修改配置文件nginx.conf,在server字段中添加黄色标注部分 server { listen ; server_name test.com; #charset koi8-r; access_log logs/opc.access.log main; location / { proxy_pass http://opcse

nginx设置反向代理后端jenklins，页面上的js css文件无法加载

转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css|jpg)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下

js文件与 css文件异步加载

使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是使用方法与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾会按照数组中的地址顺序进行加载文件加载成功后有 console.log().进行日志打印不需要的话,可以删除. 有兴趣的可以看看注释, 研究一下LazyLoad.js 的实现方式. 完整例子 <!DOCTYPE html> <html> <head> <m

css 跑马灯加载特效

css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

添加js,css 版本号?v= hash

node_modules设置 a.打开 node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 在node_modules\rev-path\index.js 目录中第10行:改成如下: b.打开 nodemodules\gulp-rev\nodemodules\r

史无前例的Firefox奇怪问题：host中的common名称造成css文件无法加载

今天遭遇了一个非常非常奇怪的问题,一个css文件(common.cnblogs.com/Skins/marvin3/green.css),Firefox怎么也无法打开,一直在转圈. 而换成其它浏览器都能正常打开.换一个css文件名(common.cnblogs.com/Skins/marvin3/blue.css),Firefox也能打开.百思不得其解. 后来,将host换了一个名称,由 common.cnblogs.com 改为 cdn.cnblogs.com (cdn.cnblogs.com

ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?

当创建一个默认的mvc模板后,项目如下: 运行项目后,鼠标右键查看源码,在源码里看到头部和尾部都有js和css文件被引用,他们是怎么被添加进来的呢? 首先我们先看对应的view文件index.cshtml,发现并没有任何加载js和css文件的标识. 这个时候我们就想到了,会不会是布局模板里加载了呢,因为index.cshtml页面是引用了模板的,这里的模板引用机制是,通过_ViewStart.cshtml文件来设置的.当index.cshtml没有任何设置模板页的时候,就默认把_ViewStar

[HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } p { border: 1px solid gray; } </style> 给多个元素同一个css,加, h1,h2{ } 继承与覆盖继承 link加载css文件 <link rel="stylesheet" type="text/css" href

嗅探js css 文件是否加载成功示例

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="pragram" content="no-cache"/> <meta http-equi

利用css实现页面加载时旋转动画

有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, html如下 <div id="page-loader" class="fade in"><span class="spinner"></span></div> css样式如下 @-webkit-keyf

CSS标签的加载

CSS加载不会阻塞DOM树解析 CSS加载会阻塞DOM树的渲染 CSS加载会阻塞后面JS语句的执行

link标签链接CSS和@import加载的区别

link:基本语法 <link rel="stylesheet" href="路径"> @import 基本语法 <style> @import url(地址): @import url("地址"): @import “地址”: 三种写法都可以 </style> 两种的区别 1.种类,link时HTML的标签,@import时CSS提供的方式 2.加载顺序,link在页面加载时被加载,@import在页面全下载

apache模块合并多个js/css 提高网页加载速度

win : http://blog.csdn.net/mycwq/article/details/9361117 linux :http://blog.csdn.net/mycwq/article/details/46426261 模块配置: 打开apache配置文件httpd.conf 高级配置: <IfModule concatx_module> ConcatxDisable Off ConcatxCheckModified On ConcatxSeparator On ConcatxM

判断css文件是否加载完成

function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules', s = t ? 'styleSheet' : 'sheet', l = d.getElementsByTagName('link'); // passed link or last link node link || (link = l[l.length - 1]); function chec

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理修改js和css文件通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名方案现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件.但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案.

[前端随笔][CSS] 制作一个加载动画即帖即用

说在前面描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则用于设定动画规则 <文档传送门> animation 属性用于设定动画 <文档传送门> transform 属性用于设定旋转角度 <文档传送门> 正文效果1的实现 </>部分:(只有一个div) <div class='dash-ring'>&l

用CSS给表格加边框

很久之前,给表格加边框用的方法是给表格加上背景色,然后把cellspacing="1",再给td设置成另一种颜色,这样间接的加边框颜色. 一直没去细研究,今天发现了一种很简单的加边框的方法,关键代码如下: .a{border-collapse:collapse; border:1px solid #339999;}.a tr td{border:1px solid #339999;} 我和同事想要实现的方法是两个表格落在一起,下边表格的边框去掉,也就是表格没有上边框,css样式如下:

css 版本号怎么加

热门专题