smartload39smart团队原创,主要实现前端css/js一次加载请求,永久缓存的加速效果,在移动端效果非常明显.

插件特点:


  • 支持平台: PC和移动端所有版本浏览器,ie6+,firefox,chrome,uc,safari等等...
  • 核心功能: 全站css/js版本统一管理,同步或异步加载,老中新三代浏览器的css/js分离
  • 存储支持: indexDB > Web SQL > localStorage > 无缓存.
  • 实现原理:自动载入适合的版本,v1适合无localStorage版本浏览器(如ie8以下)直接加载,v2适合支持不支持async/await等ES7特性的版本使用Promise异步加载(ie8+,ff52-,chrome55-),v3则适合手机端及PC端各个支持ES7的浏览器.
  • 使用要求:css/js等资源必须与插件使用站点可跨域 (ajax正文进行存储需要)

使用方法:

1.上传插件包至服务器中
2.页面引入:<script type="text/javascript" src="youpath/entrance.js" async=""></script>
3.注意,页面中除以上无需任何其它<style>或<script>,以便实现版本和内容统一调度和管理.
4.按下方配置方法在entrance.js中进行配置.
5.除了配置中的预加载项,可在其余js中使用smartload.load()独立加载.

独立引入方法:

smartload.load(_preload);//如由entrance.js中引入的test.js中使用.
_preload方法参照配置中的示例:(String,Array)
String:
'jquery'//单独加载
'jquery.ui,jquery.form,jq'//批量异步
['jquery','jquery.ui'...]//批量同步加载
['jquery',['jquery.ui','jquery.form']...]//同异步并行,本示例先载入jquery,再异步载入ui和form
[['youscript','yourcss'...],['jquery.ui','jquery.form'...]...]//css或js均可混合同异步

注意与解释:

1.所有域名(如domain.css)均不要以'/'结尾.资源必须可跨域.
2.命令行:
格式:[plugin_name][类型.版本信息][回调方法]路径或url
其中:
[plugin_name]:唯一键,切勿重复,选填
//若已有对象的键名,则可不填如:'plugin_name':'[css].....';
[类型.版本信息]:类型必填.如css或js,版本信息选填
//例如[css]或[css.v5.0],5.0这样的版本如果改动了,会引起该文件的增量更新.
[回调方法名]:选填,载入url后的回调
//例如[callback]
路径或url:必填,路径则不包括后缀名,url则完整地址
//例如[test]=地址为/test.js
//[http:127.0.0.1/abc.js]
//[test,http:127.0.0.1/abc.js]//逗号之后为后备地址,可多个
3.命令包:
参见smartloadConfig.list;
_preload预加载项

配置信息:

var smartloadConfig={//js中务必var,let等均不被低版本支持.
entrance: {//入口地址:
base_css:'your css code',//该css为网站基本css内容用于最初的css渲染,如loading效果
file:'[js.v0.8.1]smartload/{$}',//命令行,{$}会被自动替换为自适应版本.
debug:'true'//是否打开调试,默认false;
},
config:{//配置信息:更新时将清理客户端缓存,进行全量更新.
name:'yourname',//必填,自定义的本地缓存库名称,
version:'v1.0',//必填,改动则全量更新
domain:{//域名,必填,格式如下,domain.css和domain.js必填.其余任意
//例如加了'test:'http://abc.com'之后.如被缓存的文件中存在`_domain.test_`则会被替换.
css:'http://127.0.0.1',//或http://www.test.com/css等
js:'http://127.0.0.1',//如果文件中存在_domain.css_,_domain.js_,_domain.img_将被替换为该值
img:'https://css.test.com'
}
},
list:{//命令包,选填:格式如下,_preload是系统内置值
_preload:[//预加载项,true=全部异步加载,false=按顺序加载.数组
//数组示范:
//['abc','hello']=依次加载abc和hello
//['abc',['ni','hao']]//依次加载abc后并行加载ni,hao
//示范['jquery',['jquery.form','jquery.cookie'],'myformcode','mycookiecode']
'_promise',
['_promise2'],
['_localforage','_localforage2'],
['_smartload','_smartload2']
],
//命令行
_promise:'[js.v0.8.1]promise,https://abc.com/0.8.1/test.js'
}
};

测试结论:

除v1使用了系统默认load外,其余均一次请求,永久缓存.除非用户手动或代码删除,否则将永久存储.极大的减少服务器流量,提升用户访问体验.
区别于304等与页面阻塞,插件速度更快,版本管理更容易,异步无阻塞.
v1=浏览器默认方式,性能无差.
v2=性能较浏览器提升4-6倍
v3=由于async/await的支持,性能是v2的6-8倍,v1版的24-32倍.


本插件39smart团队原创,原创版权所有!

smartload跨浏览器极速缓存插件用法的更多相关文章

  1. jQuery插件:跨浏览器复制jQuery-zclip

    jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...

  2. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  3. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  4. Microsoft SilverLightt是一个跨浏览器的、跨平台的插件,为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。

    Microsoft Silverlight是一个跨浏览器的.跨平台的插件,为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序.Silverlight提供灵活的编程模型,并可 ...

  5. 能跨域和跨浏览器的flashcookie for jquery插件

    对于写网站时需要跨域和跨浏览器的可以看看这个. 引入jquery  和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯. mySwfStore.set('myKey ...

  6. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  7. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

    在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作.DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口.它能够同时运行测试一组流 ...

  8. Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用

     Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多种平台,多种传输模式,还可以集合 Exppress 框架构建各种功能复杂 ...

  9. 缓存插件 EHCache

    EHCache是来自sourceforge(http://ehcache.sourceforge.net/)的开源项目,也是纯Java实现的简单.快速的Cache组件. 下载jar包 Ehcache ...

随机推荐

  1. js对时间戳的处理 获取时间,昨天,今天,明天,时间不同格式

    1.获取昨天,今天,明天的时间 //昨天的时间 var day1 = new Date(); day1.setTime(day1.getTime()-24*60*60*1000); var s1 = ...

  2. ArrayList实现原理分析

    ArrayList使用的存储的数据结构 ArrayList的初始化 ArrayList是如何动态增长 ArrayList如何实现元素的移除 ArrayList小结 ArrayList是我们经常使用的一 ...

  3. 新霸哥带你轻松玩转Oracle数据库

    接触过软件开发的朋友可能都会知道oracle,在开发的过程中,数据存储都可能会用到oracle的,因为oracle具有处理速度快,安全级别特别的高.但是有一个缺点就是比较的贵,只有一个大型的公司才有可 ...

  4. 基于SOA的图书商城系统分析

    1.1什么是SOA架构? SOA( Service Oriented Architecture)是一种面向服务的分布式架构,将每个实现特定功能的工程拆分为服务层和表现层.服务层负责处理业务逻辑,对外提 ...

  5. Fiddler抓包的简单使用

    Fiddler抓包的简单使用 参考的博客文章:玲虫师的<Fiddler抓包[5]_Fiddler过滤>. (1)使用fiddler进行过滤,只抓取需要的网络请求. 点击右侧菜单中的[Fil ...

  6. Web service基础

    Web service是Web应用程序 平台是XML+http XML是不同平台和不同编程语言之间的语言,用于编解码数据. http是因特网协议 XML是web service的基础 Web serv ...

  7. C#基础知识之理解HTTP协议

    在互联网时代HTTP协议的重要性无需多言,对于技术岗位的同学们来说理解掌握HTTP协议是必须的.本篇博客就从HTTP协议的演进.特性.重要知识点和工作中常见问题的总结等方面进行简单的介绍.理解掌握了这 ...

  8. [project X] tiny210(s5pv210)上电启动流程(BL0-BL2)(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...

  9. uboot dcc

    arch\arm\lib crt0.S 1.设置sp为CONFIG_SYS_INIT_SP_ADDR include/configs/xxx.h #define CONFIG_SYS_INIT_SP_ ...

  10. SOA,Webservice,SOAP,REST,RPC,RMI,JMS的区别与联系(转载)

    原文地址:http://blog.csdn.net/pcceo1/article/details/51245249 SOA面向服务的软件架构(Service Oriented Architecture ...