移动端使用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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
React学习笔记之高阶组件应用
Jun 02 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
PHP中数组的分组排序实例
2014/06/01 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
详解动画插件wow.js的使用方法
2017/09/13 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python入门教程之识别验证码
2017/03/04 Python
Python书单 不将就
2017/07/11 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python3内置模块random随机方法小结
2019/07/13 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
大学生创业计划书的范文
2014/01/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
教代会闭幕词
2015/01/28 职场文书
基石观后感
2015/06/12 职场文书
病房管理制度范本
2015/08/06 职场文书
商务信函英语问候语
2015/11/10 职场文书