博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html防替换资源,html前端进行资源重载及刷新资源
阅读量:6280 次
发布时间:2019-06-22

本文共 2491 字,大约阅读时间需要 8 分钟。

最近开发webview嵌套开发,遇到资源重载的问题,具体表现在:css缓存强硬,js缓存强硬,无法事实更新静态资源,但若是禁止页面使用缓存策略的话,对服务器的占用比就会提高,访问少的时候,还好,访问量几何上升时,服务器就GG了。

经过多方查找发现除去glup,webpack,node,以及服务器做资源版本之外,并没有一个简单省事的方法,但项目时单纯的html页面,并没有什么框架使用,如若使用打包方式增加版本号更新缓存的话,相比较会麻烦一些,所以自己扣置了个小玩意。

由于script标签更新src之后并不会资源重载,所以使用了标签重新插入,link标签在更新href之后,资源会重新进行加载,所以直接替换路径

废话不多说,直接上代码:

function EditionFn (edition){

if(edition.notUrl){

edition.notUrl = edition.notUrl.split(",")

}else{

edition.notUrl = ["///"]

}

edition.notHtml = edition.notHtml || "///";

edition.isHtml = edition.isHtml || location.pathname;

if(location.pathname.indexOf(edition.notHtml) > -1 && location.pathname.indexOf(edition.isHtml) < 0){

return false

}

var cookie = document.cookie

cookie = cookie.split(";")

cookie.forEach(function(item){

item = item.replace(/\s*/g, "")

var thistime = item.split("=");

cookie[thistime[0]]= thistime[1]

})

function loadJS(script){

var src = script;

var script_dom = document.createElement('script');

script_dom.src = src;

script_dom.language = 'javascript';

script_dom.type = 'text/javascript';

var head = document.getElementsByTagName('head').item(0);

head.appendChild(script_dom);

}

var scrUrl = [];

$('script').each(function(){

if($(this).attr("charset") == "utf-8" && $(this).attr("src") && cookie.edition && cookie.edition != edition.edition){

var src = $(this).attr("src")+ '?v=' + edition.edition;

scrUrl.push(src)

$(this).attr("src","");

}

})

if(scrUrl.length > 0){

scrUrl.forEach(function(item){

var thisType = true;

edition.notUrl.forEach(function(items){

if(item.indexOf(items) > -1){

thisType = false;

}

})

if(thisType){

loadJS(item)

}

})

}

$('link').each(function(){

if($(this).attr("type") == "text/css" && $(this).attr("href") && cookie.edition && cookie.edition != edition.edition){

var src = $(this).attr("href")+ '?v=' + edition.edition;

var thisType = true;

edition.notUrl.forEach(function(items){

if(src.indexOf(items) > -1){

thisType = false;

}

})

if(thisType){

$(this).attr("href",src)

}

}

})

var times = new Date().getTime() + 7*24*60*60*1000;

if(cookie.edition && cookie.edition != edition.edition){

document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";" ;

}else{

document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";";

}

}

调用如下:

EditionFn({

edition:edition,

notUrl:"base64.js",

notHtml: '///',

isHtml: "cssAndjsSession"

})

代表参数如下:

edition: 版本号

notUrl:不重载更新资源,默认为空

notHtml:不重载更新路径,默认为空

isHtml:重载更新指定页面(目前只能指定单个页面,要想多个页面自己去改代码吧),默认所有页面都会更新

第一次请求时,不会资源重载,只有版本号不符时,会进行资源重载

欢迎各位指教一二

转载地址:http://iunva.baihongyu.com/

你可能感兴趣的文章
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>
Sphinx 配置文件说明
查看>>
数据结构实践——顺序表应用
查看>>
python2.7 之centos7 安装 pip, Scrapy
查看>>
机智云开源框架初始化顺序
查看>>
Spark修炼之道(进阶篇)——Spark入门到精通:第五节 Spark编程模型(二)
查看>>
一线架构师实践指南:云时代下双活零切换的七大关键点
查看>>
ART世界探险(19) - 优化编译器的编译流程
查看>>
玩转Edas应用部署
查看>>
music-音符与常用记号
查看>>
sql操作命令
查看>>
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>