WEB端缓存机制
WEB端缓存机制
什么是WEB缓存
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页
数据库数据缓存
数据库数据缓存的实质就是将频繁使用的数据从数据库(硬盘)存到内存中,而内存的读取速度远远快于直接在磁盘读取的速度。至于为什么会有明显的速度差异,浅显的理解是因为内存是电存储,硬盘存储是磁存储。电的速度远远大于磁盘(相当于磁带转动的速度)的速度。即使现在出现了固态硬盘但还仅仅只是在磁盘的基础上有所提高。
服务器端缓存
代理服务器缓存
代理服务器是浏览器和源服务器之间的中间服务器,浏览器先向这个中间服务器发起Web请求,经过处理后(比如权限验证,缓存匹配等),再将请求转发到源服务器。代理服务器缓存的运作原理跟浏览器的运作原理差不多,只是规模更大。可以把它理解为一个共享缓存,不只为一个用户服务,一般为大量用户提供服务,因此在减少相应时间和带宽使用方面很有效,同一个副本会被重用多次。
CDN缓存
CDN(Content delivery networks)缓存,也叫网关缓存、反向代理缓存。CDN缓存一般是由网站管理员自己部署,为了让他们的网站更容易扩展并获得更好的性能。浏览器先向CDN网关发起Web请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的外扩展性。
应用层缓存
应用层缓存是指我们在代码层面上做的缓存。通过代码逻辑,把曾经请求过的数据或资源等,缓存起来,再次需要数据时通过逻辑上的处理选择可用的缓存的数据
浏览器端缓存
http缓存
http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步:
1.判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则进入下一步。
2.判断是否含有etag,有则带上if-none-match发送请求,未修改返回304,修改返回200,否则进入下一步。
3.判断是否含有last-modified,有则带上if-modified-since发送请求,无效返回200,有效返回304,否则直接向服务器请求。
websql
websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现,主要有以下特点:
1.Web Sql 数据库API 实际上不是HTML5规范的组成部分;
2.在HTML5之前就已经存在了,是单独的规范;
3.它是将数据以数据库的形式存储在客户端,根据需求去读取;
4.跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的;
5.Web Sql 更方便于检索,允许sql语句查询;
6.让浏览器实现小型数据库存储功能;
7.这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;
websql API主要包含三个核心方法:
* openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
* transaction : 这个方法允许我们根据情况控制事务提交或回滚。
* executeSql : 这个方法用于执行真实的SQL查询。
indexDB
IndexedDB是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用 大专栏 WEB端缓存机制索引进行高性能检索的 API。虽然DOM存储,对于存储少量数据是非常有用的,但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。
IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用,但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用,另外浏览器可能对indexDB有50M大小的限制,一般用户保存大量用户数据并要求数据之间有搜索需要的场景。
cookie
Cookie(或者Cookies),指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成,一般用户保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定,具体如下:浏览器 支持域名个数 最大长度 IE7以上 50个 4095B Firefox 50个 4097B Opera 30个 4096B Safari/WebKit 无限制 4097B
不同域名之间的cookie信息是独立的,如果需要设置共享可以在服务器端设置cookie的path和domain来实现共享。浏览器端也可以通过document.cookie来获取cookie,并通过js浏览器端也可以方便地读取/设置cookie的值。
localstorage
localStorage是html5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度。
localStorage核心API:
* localStorage.setItem(key, value) //设置记录
* localStorage.getItem(key) //获取记录
* localStorage.removeItem(key) //删除该域名下单条记录
* localStorage.clear() //删除该域名下所有记录
localstorage大小有限制,不适合存放过多的数据,如果数据存放超过最大限制会报错,并移除最先保存的数据。
sessionstorage
sessionStorage和localstorage类似,但是浏览器关闭则会全部删除,api和localstorage相同,实际项目中使用较少。
application cache
application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。
使用缓存接口可为您的应用带来以下三个优势:
离线浏览 – 用户可在离线时浏览您的完整网站。
速度 – 缓存资源为本地资源,因此加载速度较快。
*服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
另外,需要注意的是更新缓存。在程序中,你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态
cacheStorage
CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 可以保存每个serverWorker申明的cache对象,cacheStorage有open、match、has、delete、keys五个核心方法,可以对cache对象的不同匹配进行不同的响应。
* cacheStorage.has() 如果包含cache对象,则返回一个promise对象。
* cacheStorage.open() 打开一个cache对象,则返回一个promise对象。
* cacheStorage.delete() 删除cache对象,成功则返回一个promise对象,否则返回false。
* cacheStorage.keys() 含有keys中字符串的任意一个,则返回一个promise对象。
flash缓存
这种方式基本不用,这一方法主要基于flash有读写浏览器端本地目录的功能,同时也可以向js提供调用的api,则页面可以通过js调用flash去读写特定的磁盘目录,达到本地数据缓存的目的。
注:
Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile directory)下,以 Windows 7 为例,Chrome 的数据存储在”C:Usersyour-account-nameAppDataLocalGoogleChromeUser DataDefault”下,而 Firefox 的数据存储在”C:Usersyour-account-nameAppDataLocalMozillaFirefoxProfiles”目录下。
*cookie文件存储于documents and settingsuserNamecookie文件夹下。通常的命名格式为:userName@domain.txt。
本文参照http://www.techweb.com.cn/network/system/2016-01-05/2252395.shtml
WEB端缓存机制的更多相关文章
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- Web浏览器的缓存机制
Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
- H5 和移动端 WebView 缓存机制解析与实战
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...
- WEB请求过程(http解析,浏览器缓存机制,域名解析,cdn分发)
概述 发起一个http请求的过程就是建立一个socket通信的过程. 我们可以模仿浏览器发起http请求,譬如用httpclient工具包,curl命令等方式. curl "http://w ...
- Web前端的缓存机制(那些以代价换来的效率)
对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色.例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的 ...
- 【Web缓存机制系列】2 – Web浏览器的缓存机制
Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
- 【Web缓存机制系列】2 – Web浏览器的缓存机制-(新鲜度 校验值)
Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...
- 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(3),添加Nlog日志、缓存机制(MemoryCache、RedisCache)、创建控制器父类BaseController
一.回顾系统进度以及本章概要 目前博客系统已经数据库创建.以及依赖注入Autofac集成,接下来就是日志和缓存集成,这里日志用的是Nlog,其实还有其他的日志框架如log4,这些博客园都有很多介绍,这 ...
随机推荐
- 2.windows-oracle实战第二课 -用户管理
创建用户:在oracle中创建一个用户有create user语句,一般是具有dba(数据库管理员)的权限才能使用.用户创建在所在的实例数据库中. 给用户修改密码:passw 给别人修改密码需要dba ...
- [Algo] 292. String Abbreviation Matching
Word “book” can be abbreviated to 4, b3, b2k, etc. Given a string and an abbreviation, return if the ...
- $.post系统登录校验
AJAX方式:$.post系统登录校验 https://blog.csdn.net/woshisangsang/article/details/66560238?utm_source=blogxgwz ...
- oBike退出新加坡、ofo取消免押金服务,全球共享单车都怎么了?
浪潮退去后,才知道谁在裸泳.这句已经被说烂的"至理名言",往往被用在一波接一波的互联网热潮中.团购.O2O.共享单车.共享打车.无人货柜--几乎每一波热潮在退去后会暴露出存在的问题 ...
- shell_backup_MySQL
#!/bin/bash #可修改如下参数backup_filename=$(date +%Y%m%d%H%M%S)backup_tmp_dir=/data/backup/ip=10.0.1.182us ...
- 搭建WordPress个人博客
1. 准备LNMP环境 LNMP 是 Linux.Nginx.MySQL 和 PHP 的缩写,是 WordPress 博客系统依赖的基础运行环境.我们先来准备 LNMP 环境 安装Nginx 使用 y ...
- 吴裕雄--天生自然C语言开发:文件读写
#include <stdio.h> int main() { FILE *fp = NULL; fp = fopen("/tmp/test.txt", "w ...
- 五、RabbitMQ Java Client基本使用详解
Java Client的5.x版本系列需要JDK 8,用于编译和运行.在Android上,仅支持Android 7.0或更高版本.4.x版本系列支持7.0之前的JDK 6和Android版本. 加入R ...
- python学习笔记(0)python基础概念
一.字符集 说字符集之前,先说下2进制的故事,计算机比较傻只认识2进制,什么是2进制,就是0,1,计算机只认识这俩数字,其他的都不认识,这样的0或1为一"位",规定8位为一个字节, ...
- curl操作和file_get_contents() 比较
1 . curl需要php开启php_curl开启扩展 $ch = curl_init(); $timeout = 5; curl_setopt ($ch, CURLOPT_URL, 'http:// ...