浏览器端的九大缓存菜鸟教程网_缓存小白入门

前言浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式——Application右侧就有浏览器的8种缓存机制。一、http缓存http缓存是

浏览器端的九大缓存菜鸟教程

前言

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式——Application右侧就有浏览器的8种缓存机制。

浏览器端的九大缓存菜鸟教程网_缓存小白入门

浏览器端的九大缓存菜鸟教程网_缓存小白入门

一、http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Network即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步:

  • 判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则进入下一步。
  • 判断是否含有etag,有则带上if-none-match发送请求,未修改返回304,修改返回200,否则进入下一步。
  • 判断是否含有last-modified,有则带上if-modified-since发送请求,无效返回200,有效返回304,否则直接向服务器请求。

如果通过etag和last-modified判断,即使返回304有至少有一次http请求,只不过返回的是304的返回内容,而不是文件内容。所以合理设计实现expires参数可以减少较多的浏览器请求。

二、WebSQL

websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现,主要有以下特点:

  • Web Sql 数据库API 实际上不是HTML5规范的组成部分;
  • 在HTML5之前就已经存在了,是单独的规范;
  • 它是将数据以数据库的形式存储在客户端,根据需求去读取;
  • 跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的;
  • Web Sql 更方便于检索,允许sql语句查询;
  • 让浏览器实现小型数据库存储功能;
  • 这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;

websql API主要包含三个核心方法:

  1. openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
  2. transaction : 这个方法允许我们根据情况控制事务提交或回滚。
  3. executeSql : 这个方法用于执行真实的SQL查询。

openDatabase方法可以打开已经存在的数据库,不存在则创建:

var db = openDatabase(‘mydatabase’, ‘2.0’, my db’,2*1024); 
openDatabasek中五个参数分别为:数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。

database.transaction() 函数用来查询,executeSql()用于执行sql语句。

三、indexDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 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返回的数据,加快下次页面打开时的渲染速度。

浏览器 最大长度 IE9以上 5M Firefox 8以上 5.24M Opera 2M Safari/WebKit 2.6M //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页面至少被在线访问过一次。

使用缓存接口可为您的应用带来以下三个优势:

  • 离线浏览 – 用户可在离线时浏览您的完整网站。
  • 速度 – 缓存资源为本地资源,因此加载速度较快。
  • 服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。

八、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对象。

cacheStorage.delete():匹配key中含有该字符串的cache对象,返回一个promise对象。

九、flash缓存

这种方式基本不用,这一方法主要基于flash有读写浏览器端本地目录的功能,同时也可以向js提供调用的api,则页面可以通过js调用flash去读写特定的磁盘目录,达到本地数据缓存的目的。

海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • php中-> 、=>、::、$this->使用方法与场景新手入门_场景小白基础

    一、->用来引用一个类的属性(变量)、方法(函数)可以把->理解成调用的意思id=”test”;echo “abc”;}
    }
    $b = new a;
    $b->add(); //调用类a中的add()方法,输出为abc
    Echo $b->id; //调用类a中的属性id,

    2020/03/29
  • jquery之cookie操作使用攻略jquery.cookie.js_cookie小白常识

    Cookies定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js;下载:http://plugins.jquery.com/cookie/<script type="text/javascript"

    2020/03/29
  • 基于jquery 横向/纵向 时间轴插件推荐基础入门_布局小白攻略

    这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐。1、jquery.jqtimeline插件:jquery.jqtimeline是一个简单、轻量级、优雅的用于记录重大事件的时间轴插件。这个插件可用于创建社交应用、博客时间轴、公司事务时间表等 。jqtimeline插件的数据是json 格式,可以很方便地于其他 jQuery 插件集成,

    2020/04/05
  • 解读Javascript中的this机制,别再为了 this 发愁了小白指南_this新手入门

    题记:JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。不管是新手还是老手,不仔细深抠一下还真闹不明白this倒地咋回事捏。今天,我们就一起看一下this倒地咋回事,别再为了this发愁了。1、this是啥

    2020/04/06
  • The Noun Project入门百科依据审美风格的一致性提供免费图标资源

    The Noun Project基础入门 官方网址:https://thenounproject.com/ 简介描述:依据审美风格的一致性提供免费图标资源 The Noun Pro…

    2020/03/05
  • js中的AST使用指南_AST菜鸟攻略

    什么是抽象语法树(Abstract Syntax Tree ,AST)?百度百科是这么解释的:在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。听起来还是很绕,没关系,你可以简单理

    2020/03/23
  • PixelMatch基础知识入门_一个最小、最简单、最快的js像素级图像比较库

    PixelMatch基础知识入门 GitHub:https://github.com/mapbox/pixelmatch 简介描述:一个最小、最简单、最快的js像素级图像比较库 P…

    2020/03/10
  • js操作DOM事件中event的target和currentTarget的区别使用攻略_js事件基础指南

    事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间,通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码的过程。在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。其中event下的currentTarget与target是我们比较常用的属性,两个属性看上去挺相似的,两个属性的解释是:targe

    2020/04/06
  • react基础入门教程_Facebook开发的一款高效、灵活、声明式设计的JS库

    react基础入门 官方网址:https://reactjs.org/ GitHub:https://github.com/facebook/react 简介描述:Facebook…

    2020/03/05
  • WebSocket 和 HTTP 的区别小白指南_websocket菜鸟攻略

    一、HTML5 提出 WebSocket 为了解决什么问题?在 websocket 出现之前,为了实现 web 端的实时通信,通常采用的是 Ajax 轮询技术,(轮询是在特定的时间间隔内,由浏览器向服务器发送 HTTP 请求,再由服务器返回最新的数据),这种方式有一个很明显的缺点就是:浏览器需要不断的向服务器发送请求,而 HTTP 请求可能包含比较长的头部信

    2020/03/29
  • css/html 空格,html空格符的显示、标示方式【html空格代码】小白指南_html菜鸟教程网

    在html里面空格的话,你直接敲打出来的空格是不可以的,下面将通过html和css中设置显示空格的实现总结:Html中空格符号编号描述 不断行的空白(1个字符宽度),不换行空格 全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加

    2020/04/06
  • Koa中间件小白入门_Koa基础教程

    前言Koa 应用程序是一个包含一组中间件函数的对象,它是按照类似堆栈的方式组织和执行的。当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件。当在下游没有更多的中间件执行后,堆栈将展开并且每个中间件恢复执行其上游行为。以上两句话,是我在官方文档中找到其对 Koa 中间件的描述。在Koa中,中间件是一个很有意思的设计,它处于reques

    2020/03/24
  • h5手机键盘弹出收起的处理小白指南_键盘使用帮助

    本文首发于 hzzly的博客,原文链接:h5手机键盘弹出收起的处理前言:前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题在 h5 项目中,我们会经常遇到一些表单页面,在输入框获取焦点时,会自动触发键盘弹起,而键盘弹出在 IOS 与 Androi

    2020/03/20
  • js求数组中的最大差值的方法总汇小白帮助_算法入门基础知识

    题目:有一个无序整型数组,如何求出这个数组中最大差值。(例如:无序数组1, 3, 63, 44最大差值是 63-1=62) js方法一:Array.prototype.outputMaxPrice = function outputMaxPrice (array) {const item1 = Math.max.apply( Math, array );

    2020/04/03
  • WeightMirror基础入门_在线瘦身和瘦脸修图工具

    WeightMirror基础入门 官方网址:http://www0.modiface.com/weightmirror/li 简介描述:在线瘦身和瘦脸修图工具 Weight Mir…

    2020/03/10
  • webpack 图片路径问题小白知识_图片基础入门

    今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。解决方法:在 webpack.config.js 的配置文件中添加一个属性{test: /\.(png|svg|jpg)$/,use: [{loa

    2020/03/20