smartload跨瀏覽器極速快取外掛用法

味道還不錯哦發表於2019-02-16
瀏覽器快取

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

相關文章