你的位置:首页 > 网页设计

[网页设计]静态资源(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