静态资源（JS/CSS）存储在localStorage

一、简单了解SEO

SEO由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指从自然搜索结果获得网站流量的技术和过程。

搜索引擎不优化的网站分为以下特征：

1、网页中大量采用图片或者Flash等富媒体（Rich Media）形式，没有可以检索的文本信息，而SEO最基本的就是文章SEO和图片SEO；

2、网页没有标题，或者标题中没有包含有效的关键词；

3、网页正文中有效关键词比较少（最好自然而重点分布，不需要特别的堆砌关键词）；

4、网站导航系统让搜索引擎“看不懂”；

5、大量动态网页影响搜索引擎检索；

6、没有其他被搜索引擎已经收录的网站提供的链接；

7、网站中充斥大量欺骗搜索引擎的垃圾信息，如“过渡页”、“桥页”、颜色与背景色相同的文字；

8、网站中缺少原创的内容，完全照搬硬抄别人的内容等。

内部优化，内容为王

1、META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化

2、内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接

3、网站内容更新：每天保持站内的更新(主要是文章的更新等)

外部优化，外链为皇

1、外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性。

2、外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。

3、外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名

“注”：div+css结构清晰，很容易被搜索引擎搜索到，适合seo优化，降低网页大小，让网页体积变得更小。如果要做SEO，那么CSS必然不能进行LS(localstorage)的本地缓存优化。原因很简单：要进行SEO，必须直接输出完整HTML，因此必须让样式在头部以link标签加载。如果先输出HTML，后用js从本地缓存读取样式再插入，在样式重置过程中会出现严重的阻塞和闪烁问题。

二、浏览器缓存

对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片、css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容。

header中如果expires的时间为-1，那么缓存会立即失效。如果是一个将来时间，那么它将在将来时间失效

header，Cache-Control: no-cache header，这样浏览器就不会缓存静态资源了，每次取数据的时候都去服务器上重新获取。

另外一种方式就是让你的静态资后缀加上一个版本号<link rel="stylesheet" type="text/css" href="../css/index.css?version=20150815"/>如果这个version有改变的话，下次就会重新获取这个静态资源。

不设置这些参数，浏览器通过header中Last-Modified控制缓存失效 ，这个是由服务器自动加上的，如果有这个参数，那么浏览器每次都会重新计算本地的cache。如果浏览器返回一个304（自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容），那么浏览器就可以使用本地的cache。

三、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问题还是有的。

1、Safari 处于隐私模式时，LS set 数据会抛异常

2、不同移动端浏览器，对单次set数据大小是有区别的，3-5M

3、不同移动端浏览器对LS总容量大小是有区别的，5-10M

 

四、增量加载 

MT是手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架

在快速迭代版本过程中，我们有时候只修改了某个js中的几行代码，却需要用户下载整个js文件，这在重视流量的移动端显得非常浪费，mt独创的增强更新算法实现了修改多少代码就只下载修改代码的功能，为用户和公司节省大量流量

http://mt.tencent.com/

https://github.com/mtjs/mt