html 自动为js 文件加版本号

2024-11-07

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

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

前端设计中关于外部js文件加载的速度优化

在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就像许多网站用Google的CDN库,而我们在墙内访问一样.页面不会出来,一直加载这个js文件,直到浏览器放弃加载为止! <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.a

js文件加载优化

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

JS文件加载：比较async和DOM Script

async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { return +(new Date()); } var t_s = now(); while(now() - t_s < 2000) { } 用sleep.php作为请求文件操作.代码: <?php sleep(3); echo 'var bb'; ?> 1. 一般script标签加载 <

【转】html、css、js文件加载顺序及执行情况

原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CS

html、css、js文件加载顺序及执行情况

HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了. 5. 浏览器在代码中发现一个<img>标签引用了一

js后加版本号

页面引入两个js文件 <script charset="utf-8" src="mjs/randomimage.js?v=01291"></script><script charset="utf-8" src="mjs/login.js?v=01291"></script> 之前没见过.js文件后带?v=之类的字符,百度后才知道,浏览器会缓存css,js等文件,在重新刷新页面时相

gulp给文件加版本号

版本号用文件MD5生成默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变所以当没有改变文件的时候,我们就不能用gulp来改变版本号了需要安装的插件 npm install --save-dev gulp npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector npm install --save-dev gulp-asset-rev npm install --save-dev run-s

js文件加载太慢，JavaScript文件加载加速

原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: <script type="text/javascript" src="/js/lib/util/BaseUtil.js"></script> 测试结果1:正常范围:85ms~90ms加载最低耗时:80ms 高速加载js文件: <scri

js文件加载执行顺序

转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/javascript" src="http://blog.163.com/water_down/blog/a.js"></script> <script type="text/javascript" src="http://bl

前端js文件添加版本号

客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件 ,刷性缓存的作用.大家可能有时候发现修改了样式或者js,刷新的时候不变,就是客户端缓存了css或者js文件,因此加上参数还是有好处的 <link rel="stylesheet" href="assets/css/style.css?v=1367936144322" type="text/css" />

vue cli3.0 build 打包的 js 文件添加版本号解决 js 缓存问题

在 vue.config.js 的文件中加入下面这段话 // vue.config.jsconst Timestamp = new Date().getTime();module.exports = { configureWebpack: { // webpack 配置 output: { // 输出重构打包编译后的文件名称 [模块名称.版本号.时间戳] filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`, ch

ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

写在前面在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服务器下载新的资源文件. 如果某个 css 文件被多个页面引用,那么我们就需要去每个页面一个一个的去修改,这样做的方式属于重复性的动作,而且有的时候还会漏掉需要修改的页面,所以我们就需要一个自动管理资源文件版本号的功能先看效果如何实现通过扩展HemHelper 类,添加为 js 和 css 文

typescript 自动编译生成js文件

项目文件 <?xml version="1.0" encoding="utf-8"?><Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <Import Project="$(MSBuildExt

浏览器输入一个url的过程，以及加载完html文件和js文件的标志

简单理解: 当在浏览器地址栏输入一url时,浏览器会做以下几个步骤: 1.将url转化为ip地址,也就是DNS解析,(先找本地host文件中是否有对应的ip地址,如果有就直接用,没有的话,就按域名的二级,一级的顺序进行查找). 2.找到请求的的服务器后,就开始建立tcp连接,此处有三次握手. 3.tcp建立连接后,开始向服务器发送请求,服务器首先响应并返回的是一个html文档. 4.此处就是浏览器解析html文档了, 解析html文档,就是按照html文档标签的顺序,从上往下进行解析,并在这个过

关于更新发布CSS和JS文件的缓存问题

现如今,浏览器大战下,各个浏览器也是拼了命的提高性能,升级JS解析引擎,更好的处理浏览器的页面缓存,让用户的浏览体验更快,占用更小的PC资源.那么,问题就出现在JS和CSS缓存,甚至页面缓存上.至于浏览器对页面的缓存,我们一般通过在服务端发送页面的时候设置页面的生存期,一般几个小时就能缓解很大的服务器压力,并且,对浏览者来讲,本地页面晚更新几个小时可能问题也不大.但,问题是,如果页面发生了更新,但是该页面链接的JS和CSS文件却被浏览器缓存下来,只有待浏览器重启后才能被删除,甚至有些浏览器重启后

使用grunt完成requirejs的合并压缩和js文件的版本控制

最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr

js文件的版本控制

使用grunt完成requirejs的合并压缩和js文件的版本控制最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自

js文件被浏览器缓存

如果修改了js文件中的js代码,发布代码到线上后.用户的浏览器使用的还是原来js缓存.所以并不会马上生效. 如何才能让浏览器使用最新的js文件呢? 我去看了一下淘宝,发现也是这样一种方式额,不知道对不对? 如下:

Cordova从服务器更新客户端的JS文件

思路: 1.主要使用 Cordova的File插件 2.获取需要替换的js文件安装后的路径 3.软件使用js发起ajax请求,后台返回版本号跟客户端版本号对比 4.如果发现需要更新js文件,则用js调用cordova的File插件下载服务器的js文件,替换本地js文件. 5.然后载入本地js文件. 伪代码实现 index.html <html> <head> <title>示例</title> </head> <body> <!

解决修改css或js文件后，浏览器缓存未更新问题

问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之前已经访问过系统,那么浏览器中会缓存该系统的CSS.JS,这些CSS.JS缓存未过期之前,浏览器只会从缓存中读取CSS和JS,如果在服务器上修改了css和js,那么这些修改在用户的浏览器中是不会有变化的. 解决方式一: 用户按Ctrl + F5强制刷新页面或者手动清空了浏览器的缓存.此时浏览器会重新

html 自动为js 文件加版本号

热门专题