利用 localStorage 储存css js
链接 版本号, 可以后台输出到jsp页面上
- 兼容性好
- 网速慢,LS读取+eval大多数情况下快于304
- webapp不需要seo,css也可以缓存,再通过js加载
- 浏览器缓存经常会被清理,LS被清理的几率低一些
/**
* 插件功能:使用localStorage缓存js和css文件,减少http请求和页面渲染时间,适用于Web移动端H5页面制作。
* 插件作者:zhangqs008@163.com
* 使用方法:
* 1.使用此插件前,需要给插件的pageVersion变量赋值,建议变量值由服务器后端输出,当需要更新客户端资源时,修改版本值即可。
* 2.加载Js:由于js加载有顺序要求,所以需要将后加载的脚本作为前一个脚本的回调参数传入,如:
* whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js",
* function () {
* whir.res.loadJs("turntable", "Script/whir.turntable.js", null);
* });
* 3.加载css,如:whir.res.loadCss("abc", "/Style/abc.css", null);
*/
var whir = window.whir || {};
whir.res = {
pageVersion: "", //页面版本,由页面输出,用于刷新localStorage缓存 //动态加载js文件并缓存 loadJs: function (name, url, callback) {
if (window.localStorage) {
var xhr;
// 存储 获取
var js = localStorage.getItem(name);
// 如果版本有更新, 或者js没读出来, 就用ajax获取最新的
if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {
if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
if (xhr != null) {
xhr.open("GET", url);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
js = xhr.responseText; //储存 更新
localStorage.setItem(name, js);
localStorage.setItem("version", whir.res.pageVersion);
js = js == null ? "" : js;
//创建一个link标签
whir.res.writeJs(js);
if (callback != null) {
callback(); //回调,执行下一个引用
}
}
};
}
} else {
whir.res.writeJs(js);
if (callback != null) {
callback(); //回调,执行下一个引用
}
}
} else {
whir.res.linkJs(url);
}
},
loadCss: function (name, url) {
if (window.localStorage) {
var xhr;
var css = localStorage.getItem(name);
if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) { if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
if (xhr != null) {
xhr.open("GET", url);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
css = xhr.responseText;
localStorage.setItem(name, css);
localStorage.setItem("version", whir.res.pageVersion);
css = css == null ? "" : css;
css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理
whir.res.writeCss(css);
}
};
}
} else {
css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理
whir.res.writeCss(css);
}
} else {
//不支持ls, 只能重新获取
whir.res.linkCss(url);
}
},
//往页面写入js脚本
writeJs: function (text) {
var head = document.getElementsByTagName('HEAD').item(0);
var link = document.createElement("script");
link.type = "text/javascript";
link.innerHTML = text;
head.appendChild(link);
},
//往页面写入css样式
writeCss: function (text) {
var head = document.getElementsByTagName('HEAD').item(0);
var link = document.createElement("style");
link.type = "text/css";
link.innerHTML = text;
head.appendChild(link);
},
//往页面引入js脚本
linkJs: function (url) {
var head = document.getElementsByTagName('HEAD').item(0);
var link = document.createElement("script");
link.type = "text/javascript";
link.src = url;
head.appendChild(link);
},
//往页面引入css样式
linkCss: function (url) {
var head = document.getElementsByTagName('HEAD').item(0);
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.rev = "stylesheet";
link.media = "screen";
link.href = url;
head.appendChild(link);
}
}
<script type="text/javascript">
//入口函数
whir.res.pageVersion = "1002"; //页面版本,用于检测是否需要更新缓存
whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js",
function () {
whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null);
});
whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null);
</script>
利用 localStorage 储存css js的更多相关文章
- 利用IIS部署WEB网站以及解决CSS/JS不能显示问题
利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...
- 利用beautifulsoup下载网页html代码中的css, js, img文件并保存
# -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- Gulp:静态资源(css,js)版本控制
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...
- 认识大前端html+css+js
认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议: 刚刚开 ...
- C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
MiniBlink的作者是 龙泉寺扫地僧 miniblink是什么? (抄了一下 龙泉寺扫地僧 写的简洁) Miniblink是一个全新的.追求极致小巧的浏览器内核项目,其基于chromium最新 ...
- 利用localStorage事件来跨标签页共享sessionStorage
//干货 利用localStorage事件来跨标签页共享sessionStorage //因为cookie保存字节数量有限,很多童鞋考虑用html5 storage来保存临时数据,Sessionsto ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
随机推荐
- Chrome调试模式获取App混合应用H5界面元素
原文章地址http://blog.csdn.net/qq_19636353/article/details/53731254 浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中 ...
- 在w3cschool学完html,css,javascript,jquery以后,还是不会做前端怎么办?
w3cschool是一个非盈利性的在线技术学习网站,提供按W3C标准编写的基础教程.完整的看完w3cschool上面的手册,可以基本掌握编程语法.基础性的东西通常都会比较零散,因此,在学习一段时间后, ...
- mongodb-2.6.0 在win7 64下的安装和服务启动
转自: http://blog.csdn.net/lingchen214/article/details/24537629 1 自定义安装到C:\mongodb目录下. 2 手动在C:\mong ...
- ASP.NET4 与 VS2010 Web 开发页面服务改进
转:http://blog.163.com/kele_lipeng/blog/static/81345278201132754729336/ 作者:朱先忠 本文将接着上一篇 ASP.NET4与VS20 ...
- 使用阿里的maven库
快使用阿里云的maven仓库 自从开源中国的maven仓库挂了之后就一直在用国外的仓库,慢得想要砸电脑的心都有了.如果你和我一样受够了国外maven仓库的龟速下载?快试试阿里云提供的maven仓库,从 ...
- rpm命令,yum命令大全
rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组合 ...
- CF335B
/*CF335B 这个题目的n达到50000,但是串只是有小写字母组成,所以如果字符串的长度大于2600,那么 肯定存在,所开始输入就判断如果长度大于2600,那么直接找当个字母输出100个 否则执行 ...
- 【HTML5校企公益课】第三天
1.上午2D.旋转变色的... 基本思路就是先写静态画面然后添加动画. <!--告诉浏览器该文件为网页格式--> <html> <!--网页的头部标签--> ...
- 构造函数与super
1. 当不定义构造方法,系统会为类隐式的创建一个空的无参构造方法 2. 当类定义了有参的构造方法,系统就不会为类创建无参构造方法 3. 子类中,若不显式调用super(), super()会被隐式调用 ...
- python_初步
官网地址:http://www.python.org/ Python最新源码,二进制文档,新闻资讯 Python文档下载地址:www.python.org/doc/ python教程:http://w ...