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

1、简单了解SEO

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

 

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

一、网页中大量采用图片或者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。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容。

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。

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