精华内容
下载资源
问答
  • 2018-04-02 12:10:21

    1.Cookie

    cookie是比较老的前端缓存技术了,它的特点是想要使用它前端必须要有服务(静态网页是不行的),而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢?因为只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送,而且由于浏览器的跨域限制,客户端和服务端必须要保证同源的原则(也就是跨域问题,详情见我的其他文章),由于cookie是存放在前端的,所以安全问题一直是个大问题,因此一般重要的信息不建议放在cookie中存放。

    2.Session
    对于服务端的程序眼来说session大家肯定很熟悉了,session是一种服务端的机制,也就是能把信息存放在服务端,所以安全可以保障,它的原理是通过session id来识别客户端,这个session id是存放在cookie中的(当然session id让用户看见没无妨),服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了,一个是把数据存在客户端;一个存在服务端,从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。
    3.localStorage
    它的特点就是“持久”,一旦通过保存,不通过手动清除的话,就会一直保存在前端,它的保存格式是键值对的方式也就是“key-value”的方式保存的,它的存储空间大小限制在500万字符左右,一下是它的一些使用方法:

    localStorage.length    获得storage中的个数
    localStorage.key(n)    获得storage中第n个元素对的键值(第一个元素是0)
    localStorage.getItem(key)    获取键值key对应的值
    localStorage.key    获取键值key对应的值
    localStorage.setItem(key, value)    添加数据,键值为key,值为value
    localStorage.removeItem(key)    移除键值为key的数据
    localStorage.clear()    清除所有数据

    4.sessionStorage
    这个和localStorage有什么区别呢?sessionStorage是一种会话级别的本地存储,一旦关闭浏览器他就会消失,而前者是很“持久”的,即使你关闭一万次浏览器也没事,所以差距还是很大的。后两者是H5才有的特性,因为现在都是前后端分离的开发模式,前端工程师都很青睐这两种前端缓存方式,以下是sessionStorage的记本用法:

    sessionStorage.length    获得storage中的个数
    sessionStorage.key(n)    获得storage中第n个元素对的键值(第一个元素是0)
    sessionStorage.getItem(key)    获取键值key对应的值
    sessionStorage.key    获取键值key对应的值
    sessionStorage.setItem(key, value)    添加数据,键值为key,值为value
    sessionStorage.removeItem(key)    移除键值为key的数据
    sessionStorage.clear()    清除所有数据
    更多相关内容
  • 主要为大家详细介绍了JS实现前端缓存的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了前端HTML5几种存储方式的总结 ,主要包括本地存储localstorage,本地存储sessionstorage,离线缓存(application cache),Web SQL,IndexedDB。有兴趣的可以了解一下。
  • 说说几种常用的前端缓存

    千次阅读 2018-04-02 17:00:27
    cookie是比较老的前端缓存技术了,它的特点是:想要使用它前端必须要有服务(静态网页是不行的),而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢?因为只要有请求涉及,cookie就要在服务器和...

    1.Cookie

    cookie是比较老的前端缓存技术了,它的特点是:想要使用它前端必须要有服务(静态网页是不行的),而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢?因为只要有请求涉及,cookie就要在服务器和浏览器之间来回传送。而且由于浏览器的跨域限制,客户端和服务端必须要保证同源的原则才能使用,但是由于cookie是存放在前端的,所以安全问题一直是个大问题,因此一般重要的信息不建议放在cookie中存放,使用教程-->菜鸟教程 。

    2.Session
    对于服务端的程序眼来说session大家肯定很熟悉了,session是一种服务端的机制,也就是能把信息存放在服务端,所以安全可以保障,它的原理是通过session id来识别客户端,这个session id是存放在cookie中的(当然session id让用户看见没无妨),服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了,一个是把数据存在客户端;一个存在服务端,从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。


    3.localStorage
    它的特点就是“持久” (女孩子都喜欢- 。-)一旦通过保存,不通过手动清除的话,就会一直保存在前端。它的保存格式是键值对的方式也就是“key-value”的方式保存的,它的存储空间大小限制在500万字符左右,以下是它的一些使用方法:

    localStorage.length    //获得storage中的个数
    localStorage.key(n)    //获得storage中第n个元素对的键值(第一个元素是0)
    localStorage.getItem(key)    //获取键值key对应的值
    localStorage.key    //获取键值key对应的值
    localStorage.setItem(key, value)    //添加数据,键值为key,值为value
    localStorage.removeItem(key)    //移除键值为key的数据
    localStorage.clear()    //清除所有数据

    4.sessionStorage
    这个和localStorage有什么区别呢?sessionStorage是一种会话级别的本地存储,一旦关闭浏览器他就会消失,而前者是很“持久”的,即使你关闭一万次浏览器也没事,所以差距还是很大的。后两者是H5才有的特性,因为现在都是前后端分离的开发模式,前端工程师都很青睐这两种前端缓存方式,以下是sessionStorage的记本用法:

    sessionStorage.length    //获得storage中的个数
    sessionStorage.key(n)    //获得storage中第n个元素对的键值(第一个元素是0)
    sessionStorage.getItem(key)    //获取键值key对应的值
    sessionStorage.key    //获取键值key对应的值
    sessionStorage.setItem(key, value)    //添加数据,键值为key,值为value
    sessionStorage.removeItem(key)    //移除键值为key的数据
    sessionStorage.clear()    //清除所有数据

    想get更多姿势? 关注我

    展开全文
  • 前端几种本地缓存机制

    千次阅读 2018-08-30 10:43:23
    在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge    1.Cookie的特点 1)cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。 2...

    在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge

     

     1.Cookie的特点

    • 1)cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。

    • 2)只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。

    • 3)用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供document.cookie这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()来设置cookie,通过$_COOKIE这个超全局数组来获取cookie。

    cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。

     

    2. Session

    说到Cookie就不能不说Session。

    Session机制。session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止,则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。经常被使用的一种技术叫做URL重写,就是把session id直接附加在URL路径的后面。比如:http://damonare.cn?sessionid=123456还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单,添加一个隐藏字段,以便在表单提交时能够把session id传递回服务器。比如:

     

    1

    2

    3

    4

     

    <form name="testform" action="/xxx">

    <input type="hidden" name="sessionid" value="123456">

    <input type="text">

    </form>

    实际上这种技术可以简单的用对action应用URL重写来代替。

    3 Cookie和Session简单对比

    Cookie和Session 的区别:

    • 1)cookie数据存放在客户的浏览器上,session数据放在服务器上。

    • 2)cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。

    • 3)session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用cookie。

    • 4)单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
    • 5)所以建议:
      • 将登陆信息等重要信息存放为SESSION
      • 其他信息如果需要保留,可以放在cookie中

    4 document.cookie的属性

    expires属性

    指定了coolie的生存期,默认情况下coolie是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户推出浏览器后这些值也会丢失,如果想让cookie存在一段时间,就要为expires属性设置为未来的一个过期日期。现在已经被max-age属性所取代,max-age用秒来设置cookie的生存期。

    path属性

    它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

    domain属性

    domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。例如让位于order.damonare.cn的服务器能够读取catalog.damonare.cn设置的cookie值。如果catalog.damonare.cn的页面创建的cookie把自己的path属性设置为“/”,把domain属性设置成“.damonare.cn”,那么所有位于catalog.damonare.cn的网页和所有位于orlders.damonare.cn的网页,以及位于damonare.cn域的其他服务器上的网页都可以访问这个cookie。

    secure属性

    它是一个布尔值,指定在网络上如何传输cookie,默认是不安全的,通过一个普通的http连接传输

    5. localStorage

    这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
    它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

     localStorage的属性方法

    下表是localStorge的一些属性和方法

    属性方法说明
    localStorage.length获得storage中的个数
    localStorage.key(n)获得storage中第n个元素对的键值(第一个元素是0)
    localStorage.getItem(key)获取键值key对应的值
    localStorage.key获取键值key对应的值
    localStorage.setItem(key, value)添加数据,键值为key,值为value
    localStorage.removeItem(key)移除键值为key的数据
    localStorage.clear()清除所有数据

     localStorage的缺点

    • ① localStorage大小限制在500万字符左右,各个浏览器不一致
    • ② localStorage在隐私模式下不可读取
    • ③ localStorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
    • ④ localStorage不能被爬虫爬取,不要用它完全取代URL传参

    6. sessionStorage

    和服务器端使用的session类似,是一种会话级别的缓存,关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的,也就是说不同窗口间的sessionStorage数据不能共享的。使用方法(和localStorage完全相同):

    属性方法说明
    sessionStorage.length获得storage中的个数
    sessionStorage.key(n)获得storage中第n个元素对的键值(第一个元素是0)
    sessionStorage.getItem(key)获取键值key对应的值
    sessionStorage.key获取键值key对应的值
    sessionStorage.setItem(key, value)添加数据,键值为key,值为value
    sessionStorage.removeItem(key)移除键值为key的数据
    sessionStorage.clear()清除所有数据

    7. sessionStorage和localStorage的区别

    • sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户关闭浏览器窗口后,数据立马会被删除。

    • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。第二天、第二周或下一年之后,数据依然可用。

    展开全文
  • 下班前分钟,我彻底弄懂了前端缓存

    千次阅读 多人点赞 2022-02-28 19:30:37
    前端缓存分为强缓存和协商缓存两。 强缓存 强缓存主要使用 Expires、Cache-Control 两个头字段,当二者同时存在时 Cache-Control 的优先级更高。当命中强缓存时,客户端不会再发送请求,而是直接从缓存中读取...

    目录

    前言

    正文

    分类

    强缓存

    Expires

    Cache-Control

    协商缓存

    Last-Modified 和 If-Modified-Since

    Etag 和 If-None-Match

    流程图

    扩展

    缓存失效问题

    缓存存放位置


    前言

    前端缓存,这是一个老生常谈的话题,也常被作为前端面试的一个知识点。下班前几分钟,我回顾了一下其基本内容。

    正文

    分类

    前端缓存分为强缓存和协商缓存两种。

    强缓存

    强缓存主要使用 Expires、Cache-Control 两个头字段,当二者同时存在时 Cache-Control 的优先级更高。当命中强缓存时,客户端不会再发送请求,而是直接从缓存中读取内容,并返回 HTTP 状态码200。

    Expires

    响应头,代表该资源的过期时间。是一个 GMT 格式的标准时间。

    当客户端向服务器发送请求时,服务器在返回资源的同时还会带上响应头 Expires,表示该资源的具体过期时间,如果客户端在过期时间之前再次请求该资源,则不需要再请求服务器了,可以直接在缓存里面中读取。

    使用 Expires 的优点:

    • 在过期时间以内,为用户省了很多流量。

    • 降低了服务器重复读取磁盘文件的压力。

    使用 Expires 的缺点:

    • 缓存过期以后,服务器不管文件有没有变化,都会再次请求服务器。

    • 缓存过期时间是一个具体的时间,这个时间依赖于客户端的时间,如果时间不准确或者被改动,缓存也会随之受到影响。

    Cache-Control

    请求/响应头,缓存控制字段,精确控制缓存策略。

    为了让强缓存更精确,HTTP1.1 增加了 Cache-Control 字段。Cache-Control 既能出现在请求头又能出现在响应头,其不同的值代表不同策略,下面具体分析一下。

    Cache-Control 服务端参数:

    • max-age:缓存有效时间,是一个相对时间,比 Expires 表示的时间更精确。

    • s-maxage:用于表示 cache 服务器上(比如 cache CDN,缓存代理服务器)的缓存有效时间,并只对 public 缓存有效。

    • no-cache:不使用本地强缓存,需要使用协商缓存(下面展开)。

    • no-store:直接禁止浏览器缓存数据,每次用户请求该资源,都会向服务器发送请求,每次都会下载完整的资源。

    • public:可以被所有的用户缓存,包括终端用户和中间代理服务器。

    • private:只能被终端用户的浏览器缓存,不允许中间缓存代理进行缓存(默认的)。

     Cache-Control 客户端参数:

    • max-stale: 5,表示当客户端到代理服务器上拿缓存时,即使代理缓存过期,但只要过期时间在 5 秒之内,还是可以从代理中获取的。

    • min-fresh: 5,表示代理缓存需要一定的新鲜度,不要等到缓存刚好到期再获取,一定要在到期前 5 秒之前获取,否则将获取不到。

    • only-if-cached:表示客户端只会接受代理缓存,而不会接受源服务器的响应。如果代理缓存无效,则直接返回 504(Gateway Timeout)。

    协商缓存

    协商缓存主要有四个头字段,它们两两组合一起使用,Last-Modified 和 If-Modified-Since 一组,Etag 和 If-None-Match 一组。当二者同时存在时,Etag 和 If-None-Match 组合的优先级更高。当命中协商缓存的时候,服务器会返回 HTTP 状态码304,让客户端直接从本地缓存里面读取资源。

    Last-Modified 和 If-Modified-Since

    Last-Modified

    响应头,资源最近修改时间,由服务器告诉浏览器。

    If-Modified-Since

    请求头,资源最近修改时间,由浏览器告诉服务器。其实就是第一次访问服务端时返回的 Last-Modified 的值。

    使用场景

    当客户端第一次请求服务器的时候,服务端会返回一个 Last-Modified 响应头,该字段是一个标准时间。在客户端请求服务器时会带上 If-Modified-Since 请求头字段,该字段的值就是服务器上一次返回的 Last-Modified 的值。服务器接收到请求后会比较这两个值是否一样,一样就返回 状态码304,让客户端直接从缓存中读取;不一样则返回新文件给客户端并更新 Last-Modified 响应头字段的值。

    使用 Last-Modified 和 If-Modified-Since 的优点:

    • 当缓存有效时,服务器不会返回文件给客户端,而是直接返回 状态码304,让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。

    使用 Last-Modified 和 If-Modified-Since 的缺点:

    • Last-Modified 过期时间只能精确到秒。如果在同一秒内既修改文件又获取文件,客户端将获取不到最新文件。

    Etag 和 If-None-Match

    Etag

    响应头,资源标识,由服务器告诉浏览器。

    If-None-Match

    请求头,缓存资源标识,由浏览器告诉服务器。其实就是第一次访问服务端时返回的 Etag 的值。

    使用场景

    为了解决文件修改时间只能精确到秒带来的问题,我们引入 Etag 响应头。Etag 是由文件修改时间与文件大小计算而成,只有当文件内容或修改时间改变时,Etag 的值才会发生变化。

    当客户端第一次请求服务器的时候,服务端会返回一个 Etag 响应头。客户端请求服务器的时候会带上 If-None-Match 请求头字段,该字段的值就是服务器上一次返回的 Etag 的值。服务器接收到请求后会比较这两个值是否一样,一样就返回 状态码304,让客户端直接从缓存中读取;不一样就会返回新文件给客户端并更新 Etag 响应头字段的值。

    使用 Etag 和 If-None-Match 的优点:

    • 当缓存有效时,服务器不会返回文件给客户端,而是直接返回 状态码304,让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。

    • 并且解决了一秒内修改并读取文件的问题。

    流程图

    扩展

    缓存失效问题

    缓存可以为我们带来好处,大大提升响应速度以及减轻服务端的压力,但是也会出现一些问题,比如我们明明更新了文件版本,为什么客户端获取到的还是旧文件。在不同的时间段有不同的解决方案。

    旧方案

    旧方案通过人工自己修改文件名或者为文件名带上版本号、时间戳等,这样客户端就会当新文件请求并使用,之前的强缓存就算在有效期内也会失效。

    <script src="http://text.js?version=1.2.3></script>

    新方案

    在现在的构建阶段基本上都不需要人工操作了,都是使用构建工具如 Wbpack、Gulp、Grunt 等构建工具自动完成构建。比如在使用 Webpack 构建的时候,会根据文件名或文件内容自动计算 hash 值来生成新文件标识,当内容或文件名发生改变时,构建出来的文件标识也一定是新的,这样也解决了强缓存还在有效期内文件却已经改变的问题。

    pragma

    pragma 是旧产物,已经被逐步抛弃,有些网站为了向下兼容还保留了这个字段。pragma 的值为 no-cache 时,表示禁用缓存。优先级是 pragma > Cache-Control > Expires。

    缓存存放位置

    按缓存存放位置分类,可以分为 memory cache、disk cache、Service Worker 三类,我们可以在 Chrome 的开发者工具中,Network -> Size 一列看到一个请求最终的处理方式:如果是大小 (多少 K, 多少 M 等) 就表示是网络请求,否则会列出 from memory cache、from disk cache、from ServiceWorker,就表示命中了缓存。

    • memory cache 是内存中的缓存,(与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理:先读内存,再读硬盘。

    • disk cache 也叫 HTTP cache,存储在硬盘,因此是一种持久存储,实际存在于文件系统中。它允许相同的资源在跨会话,甚至跨站点的情况下使用。

    • 上述的缓存策略以及缓存/读取/失效的动作都是由浏览器内部进行的,我们只能设置响应头的某些字段来告知浏览器,而不能自己操作。Service Workers 给予了我们另外一种更加灵活,可以进行人为操作。我们可以从 Chrome 的 Application 找到 Service Workers。这个缓存是永久性的,即使关闭 tab 标签或浏览器,下次打开依然存在。有两种情况会导致这个缓存中的资源被清除:手动调用 API cache.delete(resource) 或者容量超过限制,被浏览器全部清空。

    示例图。 

    展开全文
  • 前端缓存 (http缓存 与 本地缓存)

    千次阅读 2022-04-10 13:16:06
    前端缓存主要是分为http缓存和本地缓存 http 缓存 强缓存:Expires(过期时间)/ Cache-Control(no-cache)(优先级高) 协商缓存:Last-Modified/Etag(优先级高)其中 Etag适用于经常改变的小文件 Last-...
  • 前端线上清缓存几种方法

    万次阅读 2018-12-15 11:02:32
    js清除浏览器缓存几种方法 一、CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=)  使用参数有两种可能:  第一、脚本并不存在,而是服务端动态生成的,因此带了...
  • 前端缓存详解

    千次阅读 2020-07-11 15:55:10
    HTTP 缓存分为 2 ,一是强缓存,另一是协商缓存。主要作用是可以加快资源获取速度,提升用户体验,减少网络传输,缓解服务端的压力。这是缓存运作的一个整体流程图: 强缓存 不需要发送请求到服务端,直接...
  • vue几种缓存方式

    千次阅读 2021-02-10 22:39:07
    vu中实现缓存几种方式: 前两种 * localStorage window.localStorage.setItem(key,value) window.localStorage.getItem(key) * sessionStorage window.sessionStorage.setItem(key,value) window....
  • js前端缓存几种方法

    千次阅读 2021-07-01 08:48:10
    一、缓存的好处 当页面渲染的数据过多时,为了减轻对内存的占用,对初次接收且会用到的数据进行本地缓存,是有着大好处的. 受网速等各种因素的影响,当渲染数据过多时,若存在频繁的切换页面,用户体验效果不佳。 ...
  • 详细介绍缓存几种方式

    千次阅读 2018-08-02 10:29:58
    对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色。...那么我们一起来看看前端当中,有那些比较关键的缓存?它们又是怎样协调工作的呢?我们一起来看...
  • nginx 发布前端资源的缓存方案

    千次阅读 2021-12-18 17:49:35
    nginx 发布前端资源的缓存方案 前言 对于前端开发者来说,最头疼的事情莫过于。当你兴冲冲的给项目打包以后,上传到 nginx 等静态资源服务器发布以后,自己本地验证没问题,以为万事大吉,结果测试人员、用户反馈...
  • 前端缓存有哪些?区别是什么?

    千次阅读 2019-03-18 13:21:49
    前端缓存分为两部分: http 缓存 浏览器缓存 http 缓存 强缓存 强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的 Cache-Control 值理解: max-age 指定设置缓存最大的有效时间(单位为s) public ...
  • http缓存是存在于服务器与浏览器之间,是一保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经被存储,它会拦截请求,返回资源副本,而不会去服务器重新请求资源。 具体的缓存设置,如何...
  • 前端请求接口的几种方式总结

    万次阅读 多人点赞 2019-08-24 15:46:57
    但你一段时间只用一请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求API的方法,方便今后查阅。 一、vue-resource 优点:体积小、支持主流的浏览器、支持Promise API和URI ...
  • js清除浏览器缓存几种方法

    千次阅读 2020-12-24 18:29:53
    关于浏览器缓存浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。...清理网站缓存几种方法meta方法//不缓存清理form表单的临时缓存其实form表单的缓存对于我们书写还是有帮助的...
  • 介绍一个浏览器缓存机制的原理: https://blog.csdn.net/u014590757/article/details/80140654 https://www.cnblogs.com/vajoy/p/5341664.html https://www.jianshu.com/p/1a1536ab01f1&nbsp; 一、meta方法 ...
  • 前端常用缓存技术

    万次阅读 2018-04-17 19:39:59
    http://www.cnblogs.com/belove8013/p/8134067.html今天刚上班就听到群里的位大佬在讨论所开发的系统需要重复的登录的恶心之处,听各位大佬争辩的同时,想到了自己以前整理过的缓存技术,算是比较全面的,当然了...
  • 谈谈我对前端缓存的理解

    千次阅读 2018-10-14 11:09:28
    本文主要讲解了前端缓存中的强缓存和协商缓存,与缓存相关的首部字段,缓存的不同位置及其之间的区别等。 为什么要使用缓存 使用缓存有如下优点: 减少冗余的数据传输 节省网络费用,缓解网络瓶颈问题 降低对原始...
  • 关于禁用缓存几种方式

    千次阅读 2019-04-03 08:39:29
    在coding的过程中,页面请求经常会因为缓存问题造成一些问题,下面记录几种避开缓存的问题。 1.在请求的url后面拼接随机数或者是时间戳 2.对于ajax请求,将get请求改为post请求,post请求不经过缓存 ...
  • 前端性能优化的几种方式

    千次阅读 2020-07-03 15:21:14
    前端性能优化的方式: 1.封装组件 把所有需要复用的功能或网页模板封装成组件,在需要的时候调用它。 2.图片 压缩图片的质量,或者使用打包工具来压缩图片的质量,当图片过小时(小于12k)可以把它转成base64...
  • 大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求和HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文章对大家有所...
  • NONONO,这里还有前端的黑科技高手为什么要用缓存前端开发中,性能一直都是被大家所重视的重点,判断一个网站的性能最直观的就是看网页打开的速度,其中提高网站响应速度的一种方式就是使用浏览...
  • 前端 ajax 加载缓存方案 —— 图片强制缓存 前言 上一篇 写了关于前端如何缓存 ajax 加载的数据,如果对这个话题感兴趣又没有看过的童鞋,不妨前去一观:...
  • web前端跨域的几种方式

    万次阅读 多人点赞 2019-04-10 16:17:09
    JSONP都是GET和异步请求的,不存在其他的请求方式和同步请求,且jQuery默认就会给JSONP的请求清除缓存。 四、处理跨域方法二——CORS 1.CORS原理 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,793
精华内容 46,317
关键字:

前端缓存的几种方式