静态资源(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

时间: 2024-10-10 06:19:59

静态资源(JS/CSS)存储在localStorage的相关文章

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    <servlet-name&g

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文件,如果你输入某个css的文件在浏览器中得到的直接是404错误(例如http://localhost:8080/iMax_view/css/classify.css),表示路径肯定没有错,这是因为你在web.xml中配置的springservlet ]<!-- springmvc前端控制器,rest

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

中大型网站静态资源优化及存储

静态资源优化: 合并 减少http请求有这样几个优点: (1) 减少DNS请求所耗费的时间 (2) 减少服务器压力(CPU,IO) (3) 减少http请求头(当我们对服务器发起一个请求的时候,我们会携带着这个域名下的cookie和一些其他的信息在http头部里,然后服务器响应请求的时候也会带回一些cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能) 合并请求: lvmama首页 <link rel="stylesheet" href=&qu

在django中访问静态文件(js css img)

刚开始参考的是别的文章,后来参考文章<各种 django 静态文件的配置总结>才看到原来没有但是没有注意到版本,折腾了一晚上,浪费了很多很多时间.后来终于知道搜索django1.7访问静态文件.真是傻×. 环境:python 2.7.3django 1.7.5 django是不善于处理静态文件这种事情的.这样的工作要交给nginx或者apache这样的服务器.但是在调试时还是要配置一下的django 1.7.5配置访问静态文件貌似比其他的版本都要简单一些.只需要如下步骤: 收集静态文件,然后放

Web.Config 对静态文件 js css img 的客户端缓存策略

1 <?xml version="1.0" encoding="utf-8"?> 2 <configuration> 3 <system.webServer> 4 <staticContent> 5 <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> 6 </s

js本地存储解决方案(localStorage与userData)

WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由两部分组成:sessionStorage与localStorage. ses

Spring MVC程序中得到静态资源文件css,js,图片

转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    

【jsp】怎么在jsp文件中引入静态文件(.js .css)

如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下,可以先获得项目的根路径,然后再加上文件路径.  ${pageContext.request.contextPath}  可以获得当前项目的路径,然后就只需要在后面加上引入的静态文件的文件路径即可.比如: 这样就可以引入js文件下的jquery.min.js文件了.

js本地存储:localStorage

一.简介 localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库 --注意:在IE8以上的IE版本才支持localStorage这个属性.localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡. 二.具体使用方式如下: 1.localStorage - 没有时间限制的数据存储 var arr=[1,2,3]; localStorage.setItem("temp",arr); //存入 参数: 1