标准网站建设,中国建设银行官网招聘公告,泰语网站怎么建设,什么样 个人网站 备案我是目录 浏览器缓存为什么需要浏览器缓存#xff1f;对浏览器的缓存机制的理解协商缓存和强缓存的区别强缓存协商缓存 点击刷新按钮或者按 F5、按 CtrlF5 #xff08;强制刷新#xff09;、地址栏回车有什么区别#xff1f; 浏览器本地存储前端储存的方式有哪些#xff1… 我是目录 浏览器缓存为什么需要浏览器缓存对浏览器的缓存机制的理解协商缓存和强缓存的区别强缓存协商缓存 点击刷新按钮或者按 F5、按 CtrlF5 强制刷新、地址栏回车有什么区别 浏览器本地存储前端储存的方式有哪些CookieCookie的特性Cookie的使用场景Cookie有哪些字段作用分别是什么 LocalStorageLocalStorage的优点LocalStorage的缺点LocalStorage的常用APILocalStorage的使用场景 SessionStorageSessionStorage与LocalStorage对比SessionStorage的常用APISessionStorage的使用场景 Cookie、LocalStorage、SessionStorage区别Web Storage 和 cookie 的区别总结如下 IndexedDB有哪些特点 浏览器缓存
为什么需要浏览器缓存
对于浏览器的缓存主要针对的是前端的静态资源最好的效果就是在发起请求之后拉取相应的静态资源并保存在本地。如果服务器的静态资源没有更新那么在下次请求的时候就直接从本地读取即可如果服务器的静态资源已经更新那么我们再次请求的时候就到服务器拉取新的资源并保存在本地。这样就大大的减少了请求的次数提高了网站的性能。这就要用到浏览器的缓存策略了。
所谓的浏览器缓存指的是浏览器将用户请求过的静态资源存储到电脑本地磁盘中当浏览器再次访问时就可以直接从本地加载不需要再去服务端请求了。
使用浏览器缓存有以下优点
减少了服务器的负担提高了网站的性能加快了客户端网页的加载速度减少了多余网络数据传输
对浏览器的缓存机制的理解
浏览器缓存的全过程
浏览器第一次加载资源服务器返回 200浏览器从服务器下载资源文件并缓存资源文件与 response header以供下次加载时对比使用下一次加载资源时由于强制缓存优先级较高先比较当前时间与上一次返回 200 时的时间差如果没有超过 cache-control 设置的 max-age则没有过期并命中强缓存直接从本地读取资源。如果浏览器不支持HTTP1.1则使用 expires 头判断是否过期如果资源已过期则表明强制缓存没有被命中则开始协商缓存向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求服务器收到请求后优先根据 Etag 的值判断被请求的文件有没有做修改Etag 值一致则没有修改命中协商缓存返回 304如果不一致则有改动直接返回新的资源文件带上新的 Etag 值并返回 200如果服务器收到的请求没有 Etag 值则将 If-Modified-Since 和被请求文件的最后修改时间做比对一致则命中协商缓存返回 304不一致则返回新的 last-modified 和文件并返回 200
很多网站的资源后面都加了版本号这样做的目的是每次升级了 JS 或 CSS 文件后为了防止浏览器进行缓存强制改变版本号客户端浏览器就会重新下载新的 JS 或 CSS 文件 以保证用户能够及时获得网站的最新更新。
协商缓存和强缓存的区别
强缓存
使用强缓存策略时如果缓存资源有效则直接使用缓存资源不必再向服务器发起请求。
强缓存策略可以通过两种方式来设置分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。
1服务器通过在响应头中添加 Expires 属性来指定资源的过期时间。在过期时间以内该资源可以被缓存使用不必再向服务器发送请求。这个时间是一个绝对时间它是服务器的时间因此可能存在这样的问题就是客户端的时间和服务器端的时间不一致或者用户可以对客户端时间进行修改的情况这样就可能会影响缓存命中的结果。 2Expires 是 http1.0 中的方式因为它的一些缺点在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性它提供了对资源的缓存的更精确的控制。它有很多不同的值。
Cache-Control可设置的字段
public设置了该字段值的资源表示可以被任何对象包括发送请求的客户端、代理服务器等等缓存。这个字段值不常用一般还是使用max-age来精确控制private设置了该字段值的资源只能被用户浏览器缓存不允许任何代理服务器缓存。在实际开发当中对于一些含有用户信息的HTML通常都要设置这个字段值避免代理服务器(CDN)缓存no-cache设置了该字段需要先和服务端确认返回的资源是否发生了变化如果资源未发生变化则直接使用缓存好的资源no-store设置了该字段表示禁止任何缓存每次都会向服务端发起新的请求拉取最新的资源max-age设置缓存的最大有效期单位为秒s-maxage优先级高于max-age仅适用于共享缓存(CDN)优先级高于max-age或者Expires头max-stale[]设置了该字段表明客户端愿意接收已经过期的资源但是不能超过给定的时间限制。
一般来说只需要设置其中一种方式就可以实现强缓存策略当两种方式一起使用时Cache-Control 的优先级要高于 Expires。
no-cache和no-store很容易混淆
no-cache 是指先要和服务器确认是否有资源更新在进行判断。也就是说没有强缓存但是会有协商缓存no-store 是指不使用任何缓存每次请求都直接从服务器获取资源。
协商缓存
如果命中强制缓存我们无需发起新的请求直接使用缓存内容如果没有命中强制缓存如果设置了协商缓存这个时候协商缓存就会发挥作用了。
上面已经说到了命中协商缓存的条件有两个
max-agexxx 过期了值为no-store
使用协商缓存策略时会先向服务器发送一个请求如果资源没有发生修改则返回一个 304 状态让浏览器使用本地的缓存副本。如果资源发生了修改则返回修改后的资源。
协商缓存也可以通过两种方式来设置分别是 http 头信息中的 Etag 和 Last-Modified 属性。 1服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间当浏览器下一次发起请求时会在请求头中添加一个 If-Modified-Since 的属性属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较以此来判断资源是否做了修改。如果资源没有修改那么返回 304 状态让客户端使用本地的缓存。如果资源已经被修改了则返回修改后的资源。使用这种方法有一个缺点就是 Last-Modified 标注的最后修改时间只能精确到秒级如果某些文件在1秒钟以内被修改多次的话那么文件已将改变了但是 Last-Modified 却没有改变这样会造成缓存命中的不准确。 2因为 Last-Modified 的这种可能发生的不准确性http 中提供了另外一种方式那就是 Etag 属性。服务器在返回资源的时候在头信息中添加了 Etag 属性这个属性是资源生成的唯一标识符当资源发生改变的时候这个值也会发生改变。在下一次资源请求时浏览器会在请求头中添加一个 If-None-Match 属性这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较以此来判断资源是否发生改变是否需要返回资源。通过这种方式比 Last-Modified 的方式更加精确。
当 Last-Modified 和 Etag 属性同时出现的时候Etag 的优先级更高。使用协商缓存的时候服务器需要考虑负载平衡的问题因此多个服务器上资源的 Last-Modified 应该保持一致因为每个服务器上 Etag 的值都不一样因此在考虑负载平衡时最好不要设置 Etag 属性。
总结 强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时都会向服务器发送请求来获取资源。在实际的缓存机制中强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断强缓存是否命中如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求使用协商缓存如果协商缓存命中的话则服务器不返回资源浏览器直接使用本地资源的副本如果协商缓存不命中则浏览器返回最新的资源给浏览器。
点击刷新按钮或者按 F5、按 CtrlF5 强制刷新、地址栏回车有什么区别
点击刷新按钮或者按 F5浏览器直接对本地的缓存文件过期但是会带上If-Modifed-SinceIf-None-Match这就意味着服务器会对文件检查新鲜度返回结果可能是 304也有可能是 200。用户按 CtrlF5强制刷新浏览器不仅会对本地文件过期而且不会带上 If-Modifed-SinceIf-None-Match相当于之前从来没有请求过返回结果是 200。地址栏回车 浏览器发起请求按照正常流程本地检查是否过期然后服务器检查新鲜度最后返回内容。
浏览器本地存储
前端储存的方式有哪些
cookies 在HTML5标准前本地储存的主要方式优点是兼容性好请求头自带cookie方便缺点是大小只有4k⾃动请求头加⼊cookie浪费流量每个domain限制20个cookie使⽤起来麻烦需要⾃⾏封装localStorageHTML5加⼊的以键值对(Key-Value)为标准的方式优点是操作⽅便永久性储存除非手动删除大小为5M兼容IE8 sessionStorage与localStorage基本类似区别是sessionStorage当页面关闭后会被清理⽽且与cookie、localStorage不同他不能在所有同源窗⼝中共享是会话级别的储存⽅式Web SQL2010年被W3C废弃的本地数据库数据存储⽅案但是主流浏览器⽕狐除外都已经有了相关的实现web sql类似于SQLite是真正意义上的关系型数据库⽤sql进⾏操作当我们⽤JavaScript时要进⾏转换较为繁琐IndexedDB 是被正式纳入HTML5标准的数据库储存⽅案它是NoSQL数据库⽤键值对进⾏储存可以进⾏快速读取操作非常适合web场景同时⽤JavaScript进⾏操作会非常方便。
Cookie
Cookie是最早被提出来的本地存储方式在此之前服务端是无法判断网络中的两个请求是否是同一用户发起的为解决这个问题Cookie就出现了。Cookie的大小只有4kb它是一种纯文本文件每次发起HTTP请求都会携带Cookie。
Cookie的特性
Cookie一旦创建成功名称就无法修改Cookie是无法跨域名的也就是说a域名和b域名下的cookie是无法共享的这也是由Cookie的隐私安全性决定的这样就能够阻止非法获取其他网站的Cookie每个域名下Cookie的数量不能超过20个每个Cookie的大小不能超过4kb有安全问题如果Cookie被拦截了那就可获得session的所有信息即使加密也于事无补无需知道cookie的意义只要转发cookie就能达到目的Cookie在请求一个新的页面的时候都会被发送过去
如果需要域名之间跨域共享Cookie有两种方法
使用Nginx反向代理在一个站点登陆之后往其他网站写Cookie。服务端的Session存储到一个节点Cookie存储sessionId
Cookie的使用场景
● 最常见的使用场景就是Cookie和session结合使用我们将sessionId存储到Cookie中每次发请求都会携带这个sessionId这样服务端就知道是谁发起的请求从而响应相应的信息。 ● 可以用来统计页面的点击次数
Cookie有哪些字段作用分别是什么
Cookie由以下字段组成
Namecookie的名称Valuecookie的值对于认证cookievalue值包括web服务器所提供的访问令牌Size cookie的大小Path可以访问此cookie的页面路径。 比如domain是abc.compath是/test那么只有/test路径下的页面可以读取此cookie。Secure 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别即在HTTPS的连接建立阶段浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因比如有些网站使用自签署的证书在检测到SSL证书无效时浏览器并不会立即终止用户的连接请求而是显示安全风险信息用户仍可以选择继续访问该站点。Domain可以访问该cookie的域名Cookie 机制并未遵循严格的同源策略允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时Cookie 的上述特性非常有用然而也增加了 Cookie受攻击的危险比如攻击者可以借此发动会话定置攻击。因而浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名以减小攻击发生的范围。HTTP 该字段包含HTTPOnly 属性 该属性用来设置cookie能否通过脚本来访问默认为空即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过document.cookie属性访问Cookie有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是HTTPOnly的应用仍存在局限性一些浏览器可以阻止客户端脚本对Cookie的读操作但允许写操作此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。Expires/Max-size 此cookie的超时时间。若设置其值为一个时间那么当到达此时间后此cookie失效。不设置的话默认值是Session意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页而是整个浏览器) 后此cookie失效。
总结 服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间domain 是域名、path是路径domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输HttpOnly 规定了这个 cookie 只能被服务器访问不能使用 js 脚本访问。
LocalStorage
LocalStorage是HTML5新引入的特性由于有的时候我们存储的信息较大Cookie就不能满足我们的需求这时候LocalStorage就派上用场了。
LocalStorage的优点
在大小方面LocalStorage的大小一般为5MB可以储存更多的信息LocalStorage是持久储存并不会随着页面的关闭而消失除非主动清理不然会永久存在仅储存在本地不像Cookie那样每次HTTP请求都会被携带
LocalStorage的缺点
存在浏览器兼容问题IE8以下版本的浏览器不支持如果浏览器设置为隐私模式那我们将无法读取到LocalStorageLocalStorage受到同源策略的限制即端口、协议、主机地址有任何一个不相同都不会访问
LocalStorage的常用API
// 保存数据到 localStorage
localStorage.setItem(key, value);// 从 localStorage 获取数据
let data localStorage.getItem(key);// 从 localStorage 删除保存的数据
localStorage.removeItem(key);// 从 localStorage 删除所有保存的数据
localStorage.clear();// 获取某个索引的Key
localStorage.key(index)LocalStorage的使用场景
有些网站有换肤的功能这时候就可以将换肤的信息存储在本地的LocalStorage中当需要换肤的时候直接操作LocalStorage即可在网站中的用户浏览信息也会存储在LocalStorage中还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中
SessionStorage
SessionStorage和LocalStorage都是在HTML5才提出来的存储方案SessionStorage 主要用于临时保存同一窗口(或标签页)的数据刷新页面时不会删除关闭窗口或标签页之后将会删除这些数据。
SessionStorage与LocalStorage对比
SessionStorage和LocalStorage都在本地进行数据存储SessionStorage也有同源策略的限制但是SessionStorage有一条更加严格的限制SessionStorage只有在同一浏览器的同一窗口下才能够共享LocalStorage和SessionStorage都不能被爬虫爬取
SessionStorage的常用API
// 保存数据到 sessionStorage
sessionStorage.setItem(key, value);// 从 sessionStorage 获取数据
let data sessionStorage.getItem(key);// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(key);// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();// 获取某个索引的Key
sessionStorage.key(index)SessionStorage的使用场景
由于SessionStorage具有时效性所以可以用来存储一些网站的游客登录的信息还有临时的浏览记录的信息。当关闭网站之后这些信息也就随之消除了。
Cookie、LocalStorage、SessionStorage区别
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie其实最开始是服务器端用于记录用户状态的一种方式由服务器设置在客户端存储然后每次发起同源请求时发送给服务器端。cookie 最多能存储 4k 数据它的生存时间由 expires 属性指定并且 cookie 只能被同源的页面访问共享。sessionStoragehtml5 提供的一种浏览器本地存储的方法它借鉴了服务器端 session 的概念代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据它在当前窗口关闭后就失效了并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。localStoragehtml5 提供的一种浏览器本地存储的方法它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是除非手动删除它否则它不会失效并且 localStorage 也只能被同源页面所访问共享。
上面三种方式都是存储少量数据的时候的存储方式当需要在本地存储大量数据的时候我们可以使用浏览器的 indexDB。这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库它内部采用对象仓库的形式存储数据它更接近 NoSQL 数据库。
Web Storage 和 cookie 的区别总结如下
Web Storage是为了更大容量存储设计的。Cookie 的大小是受限的并且每次你请求一个新的页面的时候 Cookie 都会被发送过去这样无形中浪费了带宽cookie 需要指定作用域不可以跨域调用Web Storage 拥有 setItem,getItem,removeItem,clear 等方法不像 cookie 需要前端开发者自己封装 setCookiegetCookieCookie 也是不可以或缺的Cookie 的作用是与服务器进行交互作为 HTTP 规范的一部分而存在 而 Web Storage 仅仅是为了在本地“存储”数据而生。
IndexedDB有哪些特点
键值对储存IndexedDB 内部采用对象仓库object store存放数据。所有类型的数据都可以直接存入包括 JavaScript 对象。对象仓库中数据以键值对的形式保存每一个数据记录都有对应的主键主键是独一无二的不能有重复否则会抛出一个错误。异步IndexedDB 操作时不会锁死浏览器用户依然可以进行其他操作这与 LocalStorage 形成对比后者的操作是同步的。异步设计是为了防止大量数据的读写拖慢网页的表现。支持事务IndexedDB 支持事务transaction这意味着一系列操作步骤之中只要有一步失败整个事务就都取消数据库回滚到事务发生之前的状态不存在只改写一部分数据的情况。同源限制IndexedDB 受到同源限制每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库而不能访问跨域的数据库。储存空间大IndexedDB 的储存空间比 LocalStorage 大得多一般来说不少于 250MB甚至没有上限。支持二进制储存IndexedDB 不仅可以储存字符串还可以储存二进制数据ArrayBuffer 对象和 Blob 对象。
