h5利用缓存优化性能

2人阅读 评论(0) 收藏 举报
分类:

一、浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control(或 Expires)和 Last-Modified(或 Etag)等字段来控制文件缓存的机制。这应该是 WEB 中最早的缓存机制了,是在 HTTP 协议中实现的

Cache-Control 用于控制文件在本地缓存有效时长。最常见的,比如服务器回包:Cache-Control:max-age=600 表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出 HTTP 请求,而是直接使用本地缓存的文件。

Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时,如果文件缓存过期,浏览器通过 If-Modified-Since 字段带上这个时间,发送给服务器,由服务器比较时间戳来判断文件是否有修改。如果没有修改,服务器返回304告诉浏览器继续使用缓存;如果有修改,则返回200,同时返回最新的文件。

Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间,一个在缓存失效后,向服务查询是否有更新。

分析:Cache-Control 和 Last-Modified 一般用在 Web 的静态资源文件上,如 JS、CSS 和一些图像文件。通过设置资源文件缓存属性,对提高资源文件加载速度,节省流量很有意义,特别是移动网络环境。但问题是:缓存有效时长该如何设置?如果设置太短,就起不到缓存的使用;如果设置的太长,在资源文件有更新时,浏览器如果有缓存,则不能及时取到最新的文件。

Last-Modified 需要向服务器发起查询请求,才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新,但也还有一个请求的过程。对于移动网络,这个请求可能是比较耗时的。有一种说法叫“消灭304”,指的就是优化掉304的请求。

最佳实践:

1.在要缓存的资源文件名中加上版本号或文件 MD5值字串,如 common.d5d02a02.js,common.v1.js,同时设置 Cache-Control:max-age=31536000,也就是一年。在一年时间内,资源文件如果本地有缓存,就会使用缓存;也就不会有304的回包。

2.如果资源文件有修改,则更新文件内容,同时修改资源文件名,如 common.v2.js,html页面也会引用新的资源文件名。

二、Dom Storage 存储机制

Dom Storage 是通过存储字符串的 Key/Value 对来提供的,并提供 5MB (不同浏览器可能不同,分 HOST)的存储空间(Cookies 才 4KB)。另外 Dom Storage 存储的数据在本地,不像 Cookies,每次请求一次页面,Cookies 都会发送给服务器。

DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和 sessionStorage 对象使用方法基本相同,它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据,它在页面关闭后无法使用。而 localStorage 则持久存在,在页面关闭后也可以使用。

sessionStorage 是个全局对象,它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话。

当浏览器被意外刷新的时候,一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种情况的时候是最有用的。比如恢复我们在表单中已经填写的数据。

Local Storage 的接口、用法与 Session Storage 一样,唯一不同的是:Local Storage 保存的数据是持久性的。当前 PAGE 关闭(Page Session 结束后),保存的数据依然存在。重新打开PAGE,上次保存的数据可以获取到。另外,Local Storage 是全局性的,同时打开两个 PAGE 会共享一份存数据,在一个PAGE中修改数据,另一个 PAGE 中是可以感知到的。

三、Web SQL Database存储机制(不推荐使用)

四、Application Cache 机制(不推荐使用)

五、Indexed Database

IndexedDB 也是一种数据库的存储机制,但不同于已经不再支持的 Web SQL Database。IndexedDB 不是传统的关系数据库,可归为 NoSQL 数据库。IndexedDB 又类似于 Dom Storage 的 key-value 的存储方式,但功能更强大,且存储空间更大。

六、File System API

File System API 是 H5 新加入的存储机制。它为 Web App 提供了一个虚拟的文件系统,就像 Native App 访问本地文件系统一样。由于安全性的考虑,这个虚拟文件系统有一定的限制。Web App 在虚拟的文件系统中,可以进行文件(夹)的创建、读、写、删除、遍历等操作。

查看评论

谈谈canvas的性能优化(主要讲缓存问题)

本文转载自http://www.cnblogs.com/axes/p/3567364.html 声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!   canvas玩...
  • cysear
  • cysear
  • 2017-04-27 16:43:50
  • 2027

性能优化--缓存篇

本文主要跟大家来探讨下缓存的应用场景有哪些?缓存给我们带来了哪些便利?同时又给我们带来了哪些问题?还有,简单介绍一些常用的缓存工具。JUST DO IT! GO!缓存的应用场景 CPU缓存(Cache...
  • liaoyulin0609
  • liaoyulin0609
  • 2016-06-26 15:34:28
  • 4226

分步骤详细解说:H5性能优化方案

H5性能优化意义对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性。用户...
  • Vin1992
  • Vin1992
  • 2017-04-20 21:21:49
  • 854

Android H5app 性能优化

如何写一个好的H5项目.当前H5项目主要是基于webview 加载一段 url 进行的,但是这种方式每次打开都会去网站重新拉取一遍数据,以及html css 以及js,十分的耗时,而且用户体验上非常的...
  • u012003945
  • u012003945
  • 2015-12-24 14:08:58
  • 1869

关于H5缓存加速研究经历记录

参考:QQ空间面向移动时代Hybrid架构设计:https://mp.weixin.qq.com/s?__biz=MzI4NzE1NTYyMg==&mid=2651101486&idx=1&sn=87...
  • rnZuoZuo
  • rnZuoZuo
  • 2016-09-21 12:54:27
  • 517

前端性能优化之——缓存

*缓存是前端性能优化的重要方式之一。缓存方式有多种,但都不难理解。 实现方式大致分三类:HTTP协议头控制,Dom Storage、AppCache。* 一.HTTP协议头控制 Cach...
  • loguat
  • loguat
  • 2017-07-28 13:49:46
  • 872

mondrian 性能优化

mondrian作为开源的rolap引擎非常稳定,bug也非常少,但是就是基本没用人维护了,如果出现什么问题,需要自己修改源码了。现在很多BI工具的rolap引擎都使用的是modnrian ,例如比较...
  • lyzxx
  • lyzxx
  • 2016-11-14 14:28:18
  • 1873

web前端性能优化–缓存

雅虎的16条优化准则,作为前端开发工程师,都是耳熟能详,信手拈来。但很多时候也能难完全的做得到,一些准则跟工程原则是冲突的,难以落实起来。 JS文件放尾部,CSS文件放头部等,这些基本的优化...
  • iamaddy
  • iamaddy
  • 2014-10-13 22:16:06
  • 843

H5性能优化

  • 2015年09月10日 17:10
  • 2.28MB
  • 下载

Egret-H5游戏开发之性能优化总结

Egret H5游戏开发之 性能优化总结# 来自官方的优化建议(直接搬运了)详见:点击这里(1) 少使用Alpha混合。(2) 显式停止计时器,让它们准备好进行垃圾回收。(3) 使用事件侦听器并在不需...
  • wuhaishengxxx
  • wuhaishengxxx
  • 2017-11-16 14:32:48
  • 639
    个人资料
    持之以恒
    等级:
    访问量: 9519
    积分: 484
    排名: 10万+
    最新评论