靜態資源（JS/CSS）存儲在localStorage

時間 2019-11-25

標籤靜態資源 css 存儲 localstorage 欄目網站開發简体版

原文原文鏈接

1、簡單瞭解SEOcss

SEO由英文Search Engine Optimization縮寫而來，中文意譯爲「搜索引擎優化」。SEO是指從天然搜索結果得到網站流量的技術和過程。html

搜索引擎不優化的網站分爲如下特徵：

一、網頁中大量採用圖片或者Flash等富媒體（Rich Media）形式，沒有能夠檢索的文本信息，而SEO最基本的就是文章 SEO和圖片 SEO；

二、網頁沒有標題，或者標題中沒有包含有效的關鍵詞；

三、網頁正文中有效關鍵詞比較少（最好天然而重點分佈，不須要特別的堆砌關鍵詞）；

四、網站導航系統讓搜索引擎「看不懂」；

五、大量動態網頁影響搜索引擎檢索；

六、沒有其餘被搜索引擎已經收錄的網站提供的連接；

七、網站中充斥大量欺騙搜索引擎的垃圾信息，如「過渡頁」、「橋頁」、顏色與背景色相同的文字；

八、網站中缺乏原創的內容，徹底照搬硬抄別人的內容等。

內部優化，內容爲王

一、META標籤優化：例如：TITLE，KEYWORDS，DESCRIPTION等的優化

二、內部連接的優化，包括相關性連接（Tag標籤），錨文本連接，各導航連接，及圖片連接

三、網站內容更新：天天保持站內的更新(主要是文章的更新等)

外部優化，外鏈爲皇

一、外部連接類別：博客、論壇、B2B、新聞、分類信息、貼吧、知道、百科、相關信息網等儘可能保持連接的多樣性。

二、外鏈運營：天天添加必定數量的外部連接，使關鍵詞排名穩定提高。

三、外鏈選擇：與一些和你網站相關性比較高,總體質量比較好的網站交換友情連接,鞏固穩定關鍵詞排名

「注」：div+css結構清晰，很容易被搜索引擎搜索到，適合seo優化，下降網頁大小，讓網頁體積變得更小。若是要作SEO，那麼CSS必然不能進行LS(localstorage)的本地緩存優化。緣由很簡單：要進行SEO，必須直接輸出完整HTML，所以必須讓樣式在頭部以link標籤加載。若是先輸出HTML，後用js從本地緩存讀取樣式再插入，在樣式重置過程當中會出現嚴重的阻塞和閃爍問題。

2、瀏覽器緩存前端

對於靜態資源來講，瀏覽器不會緩存html頁面的，因此你每次改完html的頁面的時候，html都是改完當即生效的，不存在什麼有緩存致使頁面不對的問題。瀏覽器緩存的東西有圖片、css和js。這些資源將在緩存失效前調用的時候調用瀏覽器的緩存內容。git

header中若是expires的時間爲-1，那麼緩存會當即失效。若是是一個未來時間，那麼它將在未來時間失效github

header，Cache-Control: no-cache header，這樣瀏覽器就不會緩存靜態資源了，每次取數據的時候都去服務器上從新獲取。web

另一種方式就是讓你的靜態資後綴加上一個版本號<link rel="stylesheet" type="text/css" href="../css/index.css?version=20150815"/>若是這個version有改變的話，下次就會從新獲取這個靜態資源。算法

不設置這些參數，瀏覽器經過header中Last-Modified控制緩存失效，這個是由服務器自動加上的，若是有這個參數，那麼瀏覽器每次都會從新計算本地的cache。若是瀏覽器返回一個304（自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容），那麼瀏覽器就可使用本地的cache。

3、LS使用

PC上應用價值不大：

兼容性不太好，不支持LS的瀏覽器比例仍然很大
網絡速度快，協商緩存響應快，LS讀取+eval不少時候會比不上304
一般須要SEO，致使css不能緩存，僅緩存js使得整個緩存方案意義進一步減少
瀏覽器本地緩存足夠可靠持久
跨頁面間共享緩存即使有浪費也差異不大

移動端webapp值得一試：

兼容性好
網速慢，LS讀取+eval大多數狀況下快於304
webapp不須要seo，css也能夠緩存，再經過js加載
瀏覽器緩存常常會被清理，LS被清理的概率低一些

取出localstorage的代碼不必定要eval，eval函數頗有可能影響整個js文件的壓縮（出現eval以後不能對變量名進行替換）,能夠經過一些hack避免這種壓縮問題。瀏覽器

var script = document.createElement('script');
var code = '!function(){' + getCodeFromLocalStorage() + '\n}();';
script.appendChild(document.createTextNode(code));
document.head.appendChild(script);

效率上應該跟eval差很少，真正的性能損耗仍是在LS的讀取上

這是一種「黑科技」，由於LS自己並非被設計用來幹這件事的。從過往歷史來看，任何黑科技都是短暫且不可靠的，但就在當下，我也想不到什麼更好的工程手段來提高移動端webapp的性能，因此，LS+combo的方案能夠說是「有總比沒有強」。

一旦有xss漏洞，就會被人利用將惡意代碼注入到LS中，致使即使修復了xss惡意代碼也存在的問題。

LS問題仍是有的。

一、Safari 處於隱私模式時，LS set 數據會拋異常

二、不一樣移動端瀏覽器，對單次set數據大小是有區別的，3-5M

三、不一樣移動端瀏覽器對LS總容量大小是有區別的，5-10M

4、增量加載

MT是手機騰訊網前端團隊開發維護的一個專一於移動端的、帶有增量更新特點的js模塊管理框架

在快速迭代版本過程當中，咱們有時候只修改了某個js中的 幾行代碼，卻須要用戶下載 整個js文件，這在重視流量的移動端顯得很是浪費，mt首創的 加強更新算法實現了修改多少代碼就只下載修改代碼的功能，爲用戶和公司節省大量流量

http://mt.tencent.com/

https://github.com/mtjs/mt