smartload跨瀏覽器極速緩存插件用法

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團隊原創,原創版權全部!