smartload由39smart团队原创,主要实现前端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团队原创,原创版权所有!