移动端使用localStorage缓存Js和css文的方法(web开发)


Posted in Javascript onSeptember 20, 2016

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能:

<script type="text/javascript"> 
//入口函数 
if (window.localStorage) { 
initJs(); 
initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); 
} else { 
addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js"); 
addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js"); 
addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css"); 
} 
//第一步:加载页面js:先加载jQuery后加载用户脚本 
function initJs() { 
var name = "jquery"; 
var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js"; 
var xhr; 
var js = window.localStorage ? localStorage.getItem(name) : ""; 
if (js == null || js.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
js = xhr.responseText; 
localStorage.setItem(name, js); 
js = js == null ? "" : js; 
addTxt(js, "js"); 
initTurntable(); //确保先引用Jquery 
} 
}; 
} else { 
addTxt(js, "js"); 
initTurntable(); 
} 
} 
//加载自定义脚本 
function initTurntable() { 
var name = "turntable"; 
var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js"; 
var xhr; 
var js = window.localStorage ? localStorage.getItem(name) : ""; 
if (js == null || js.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
js = xhr.responseText; 
localStorage.setItem(name, js); 
js = js == null ? "" : js; 
addTxt(js, "js"); 
} 
}; 
} else { 
addTxt(js, "js"); 
} 
} 
//第二步:初始化Css 
function initCss(name, url) { 
var xhr; 
var css = window.localStorage ? localStorage.getItem(name) : ""; 
if (css == null || css.length == 0) { 
if (window.ActiveXObject) { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
xhr.open("GET", url); 
xhr.send(null); 
xhr.onreadystatechange = function () { 
if (xhr.readyState == 4 && xhr.status == 200) { 
css = xhr.responseText; 
localStorage.setItem(name, css); 
css = css == null ? "" : css; 
css = css.replace(/images\//g, "style/images/"); 
addTxt(css, "css"); 
} 
}; 
} else { 
css = css.replace(/images\//g, "style/images/"); 
addTxt(css, "css"); 
} 
} 
//辅助方法1:动态添加js,css文件引用 
function addFile(url, fileType) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link; 
if (fileType == "js") { 
link = document.createElement("script"); 
link.type = "text/javascript"; 
link.src = url; 
} else { 
link = document.createElement("link"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.rev = "stylesheet"; 
link.media = "screen"; 
link.href = url; 
} 
head.appendChild(link); 
} 
//辅助方法2:动态添加js,css文件内容 
function addTxt(text, fileType) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link; 
if (fileType == "js") { 
link = document.createElement("script"); 
link.type = "text/javascript"; 
link.innerHTML = text; 
} else { 
link = document.createElement("style"); 
link.type = "text/css"; 
link.innerHTML = text; 
} 
head.appendChild(link); 
} 
</script>

查看写入记录:

移动端使用localStorage缓存Js和css文的方法(web开发)

封装成JS插件:

/** 
* 插件功能:使用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("css", "/Style/css_whir.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); 
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; 
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 { 
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缓存Js和css文的方法(web开发),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript Promise启示录
Aug 12 Javascript
JS表的模拟方法
Feb 05 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 #Javascript
You might like
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python五子棋游戏的设计与实现
2019/06/18 Python
Python中的类与类型示例详解
2019/07/10 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
公司市场部岗位职责
2013/12/02 职场文书
科研先进个人典型材料
2014/01/31 职场文书
学习雷锋活动总结
2014/04/29 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript