手機百度localstorage細粒度緩存介紹
從14年開始，手機百度就開始支持localstorage的細粒度緩存，配合inline渲染模式使用，在2G慢速網站將頁面的js和css嵌入 到script和style標簽，然后將源碼存到localstorage，第二次訪問的時候從localstorage讀取，提高頁面訪問速度。
細粒度localstorage方案
傳統的localstorage緩存，流程圖如下：
最大的缺點是：需要頁面渲染之后，讀取localstorage緩存內容，然后二次拉取沒有緩存或需要更新的資源。
還有一個方案，就是利用cookie保存一個版本號信息，server端拿到cookie就可以判斷出來需要下發和更新的資源。這個方案雖然可以避 免二次拉取，但是畢竟cookie的存儲量有限，cookie太大就影響http上行請求速度。所以之前百度移動搜索結果頁的方法就是整個頁面存儲一個 md5的版本號，如果有一個資源更新，那么就需要整個頁面的資源代碼重新下發，所以往往每周上線的時候會引起頁面性能數據抖動。
所以結合上面的兩種方式，手百這邊做的是如下的方案：
第一步：代碼按照更新頻度進行分組
上面提到的cookie方案最大的問題就是：業務代碼和通用代碼都“一視同仁”，這樣經常頻繁變化的業務代碼只要發生變化，通用代碼也需要更新，所以每周固定上線時間就會全部重新下發一遍代碼。
為了解決這個方案的缺點，首先將需要緩存的代碼進行分層：通用 和 業務。通過區分通用和業務代碼，每段代碼都有自己的獨立版本號，業務層代碼的修改就不會引起通用代碼的更新，只會更新自己的版本號，下發自己的新版本。
第二步：利用cookie的多維度
大家都知道cookie是可以按照域名來緩存的，二級子域名可以讀取主域名的cookie，這個我們稱之為：cookie的doman維度。
cookie除了域名之外，還有一個容易被忽略的維度，就是不同的pathcookie也可以不同，下一級path是可以讀取上一級path的cookie。這個是cookie的第二個維度：cookie的path維度
下面例子是同一個cookiepo_lsv在不同domain和path的情況。
| key |
value |
domain |
path |
</tr>
</tbody>
| po_lsv |
jZ-1_jA-1_cF-1_cM-1_jB-2 |
po.m.baidu.com |
/tiny |
</tr>
| po_lsv |
jZ-1_jA-1_cF-1_cM-1_jB-1 |
po.m.baidu.com |
/ |
</tr>
| po_lsv |
jZ-1_jA-1_cF-1 |
m.baidu.com |
/ |
</tr>
</tbody>
</table>
保證cookie保存足夠多的信息
之前使用md5，cookie value的長度是32個長度，如果利用value足夠短的長度保存足夠多的cookie信息。我們的方法是使用如下約定：
- css和js分別使用c和j來打頭
- localstorage的key和版本號使用-間隔，而每個版本之間使用_，保證cookie在encode的時候不被編碼成%xx保證長度
- 真實localstorage的值，使用盡量一個字母簡寫
- 而版本號使用的是36進制，如果每周上線一次計算，加上cookie有效期，36進制保證版本號是一位已經足夠了，不用考慮版本號重疊問題
</ol>
自動打包工具
維護版本號是很麻煩的一個工作，如果一不留神漏了哪個，就會導致重大bug，比如頁面一直reload等，所以我們使用了打包工具來完成這個過程，避免了人工的錯誤。
打包過程如下：
localstorage.json的格式內容如下：
{
"jA": {
"hash": "2c79d70",
"files": [
"common:widget/localstorage/zepto-ajax.tpl"
],
"version": 1
},
"jZ": {
"hash": "5358395",
"files": [
"common:widget/localstorage/zepto.tpl"
],
"version": 1
}
}
需要緩存到localstorage的文件都統一放在localstorage文件夾，再看下需要緩存的widget經過打包工具自動生成的代碼：
<script data-lsid="jZ">
__inline('/static/js/zepto.js');
</script>
經過打包工具release之后，變成下面的smarty模板：
{%if ($_ls_nonsupport) || ($_parsedLSCookies.jZ.isUpdate )%}
<script data-lsv="{%$_parsedLSCookies.jZ.version|escape:html%}" data-lsid="jZ">
var Zepto=xxx
</script>
{%else%}
<script>LS.exec("jZ","js");</script>
{%/if%}
代碼執行時候，解析cookie，然后讀取localstroage.json的內容，跟cookie的版本號對比，生成模板變量，賦值給模板文件。
來自：http://js8.in/2015/12/06/手機百度localstorage細粒度緩存介紹/
本文由用戶
jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
sesese色