手机微网站平台,河南郑州建设厅网站,怎么用花生壳做网站,网站建设及目标作为一名前端工作人员#xff0c;前端的缓存知识是必须掌握的#xff0c;因为一个网站打开网页的速度直接关系到用户体验#xff0c;用户粘度#xff0c;而提高网页的打开速度有很多方面需要优化#xff0c;其中比较重要的一点就是利用好缓存#xff0c;缓存文件可以重复… 作为一名前端工作人员前端的缓存知识是必须掌握的因为一个网站打开网页的速度直接关系到用户体验用户粘度而提高网页的打开速度有很多方面需要优化其中比较重要的一点就是利用好缓存缓存文件可以重复利用还可以减少带宽降低网络负荷。 1 缓存 缓存从宏观上分为私有缓存和共享缓存共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的各级代理不能缓存的缓存。 缓存从微观上可以分为以下几类 浏览器缓存代理服务器缓存CDN缓存数据库缓存应用层缓存 这里主要对浏览器的缓存进行说明 2 http缓存 2.1 强缓存 不会向服务器发送请求直接从缓存中读取资源请求返回200的状态码在chrome控制台的network选项中可以看到size显示from disk cache或from memory cache。 from memory cache代表使用内存中的缓存from disk cache则代表使用的是硬盘中的缓存浏览器读取缓存的顺序为memory – disk。在浏览器中浏览器会在js和图片等文件解析执行后直接存入内存缓存中那么当刷新页面时只需直接从内存缓存中读取(from memory cache)而css文件则会存入硬盘文件中所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。 Expires和Cache-Control两者对比其实这两者差别不大区别就在于 Expires 是http1.0的产物Cache-Control是http1.1的产物两者同时存在的话Cache-Control优先级高于Expires 2.2 协商缓存 协商缓存就是强制缓存失效后浏览器携带缓存标识向服务器发起请求由服务器根据缓存标识决定是否使用缓存的过程 协商缓存生效返回304和Not Modified 2.2.1 Last-Modified和If-Modified-Since 浏览器在第一次访问资源时服务器返回资源的同时在response header中添加 Last-Modified的header值是这个资源在服务器上的最后修改时间浏览器接收后缓存文件和header 浏览器下一次请求这个资源浏览器检测到有 Last-Modified这个header于是添加If-Modified-Since这个header值就是Last-Modified中的值服务器再次收到这个资源请求会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比如果没有变化返回304和空的响应体直接从缓存读取如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间说明文件有更新于是返回新的资源文件和200 缺点1、某些服务端不能获取精确的修改时间 2、文件修改时间改了但文件内容却没有变 2.2.2 ETag和If-None-Match Etag是上一次加载资源时服务器返回的response header是对该资源的一种唯一标识只要资源有变化Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时会将上一次返回的Etag值放到request header里的If-None-Match里服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上那么直接以常规GET 200回包形式将新的资源当然也包括了新的ETag发给客户端如果ETag是一致的则直接返回304知会客户端直接使用本地缓存即可。 2.2.3 协商缓存两种方式的对比 首先在精确度上Etag要优于Last-ModifiedLast-Modified的时间单位是秒如果某个文件在1秒内改变了多次那么他们的Last-Modified其实并没有体现出来修改但是Etag每次都会改变确保了精度如果是负载均衡的服务器各个服务器生成的Last-Modified也有可能不一致。性能上Etag要逊于Last-Modified毕竟Last-Modified只需要记录时间而Etag需要服务器通过算法来计算出一个hash值。优先级上服务器校验优先考虑Etag 3 缓存机制 appcache优先于强缓存强制缓存优先于协商缓存进行若强制缓存(Expires和Cache-Control)生效则直接使用缓存若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)协商缓存由服务器决定是否使用缓存若协商缓存失效那么代表该请求的缓存失效返回200重新返回资源和缓存标识再存入浏览器缓存中生效则返回304继续使用缓存。具体流程看下图 不管是浏览器缓存还是代理服务器缓存CDN缓存都遵循客户端与服务端之间的缓存机制 4、本地存储 本地存储主要有以下几种localStoragesessionStorage和cookieWebSql和IndexDB主要用在前端有大容量存储需求的页面上例如在线编辑浏览器或者网页邮箱。他们都可以将数据存储在浏览器应该根据不同的场景进行使用。 4.1 Cookie Cookie主要是由服务器生成且前端也可以设置保存在客户端本地的一个文件通过response响应头的set-Cookie字段进行设置且Cookie的内容自动在请求的时候被传递给服务器。如下 [HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:[58860415-98b]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ27315; max-age86400; domain.baidu.com; path/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html] Cookie包含的信息它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时网站通过读取Cookies得知你的相关信息就可以做出相应的动作如在页面显示欢迎你的标语或者让你不用输入ID、密码就直接登录等等。一个网站只能读取它自己放置的信息不能读取其他网站的Cookie文件。因此Cookie文件还保存了host属性即网站的域名或ip。 这些属性以名值对的方式进行保存为了安全它的内容大多进行了加密处理。Cookie文件的命名格式是用户名网站地址[数字].txt Cookie的优点 给用户更人性化的使用体验如记住“密码功能”、老用户登录欢迎语弥补了HTTP无连接特性站点统计访问人数的一个依据 Cookie的缺点 它无法解决多人共用一台电脑的问题带来了不安全因素Cookie文件容易被误删除一人使用多台电脑Cookies欺骗。修改host文件可以非法访问目标站点的Cookie容量有限制不能超过4kb在请求头上带着数据安全性差 4.2 localStorage localStorage主要是前端开发人员在前端设置一旦数据保存在本地后就可以避免再向服务器请求数据因此减少不必要的数据请求减少数据在浏览器和服务器间不必要地来回传递。 可以长期存储数据没有时间限制一天一年两年甚至更长数据都可以使用。 localStorage中一般浏览器支持的是5M大小这个在不同的浏览器中localStorage会有所不同 优点 localStorage拓展了cookie的4k限制localStorage可以将第一次请求的5M大小数据直接存储到本地相比于cookie可以节约带宽localStorage的使用也是遵循同源策略的所以不同的网站直接是不能共用相同的localStorage 缺点 需要手动删除否则长期存在浏览器大小不一版本的支持也不一样localStorage只支持string类型的存储JSON对象需要转换localStorage本质上是对字符串的读取如果存储内容多的话会消耗内存空间会导致页面变卡 4.3 sessionStorage sessionStorage主要是前端开发人员在前端设置sessionStorage会话存储只有在浏览器被关闭之前使用创建另一个页面时同意可以使用关闭浏览器之后数据就会消失 存储上限限制不同的浏览器存储的上限也不一样但大多数浏览器把上限限制在5MB以下 4.4 websql Web SQL 是在浏览器上模拟数据库可以使用JS来操作SQL完成对数据的读写。它使用 SQL 来操纵客户端数据库的 API这些 API 是异步的规范中使用的方言是SQLlite。数据库还是在服务端不建议使用已废弃 4.5 indexDB 随着浏览器的功能不断增强越来越多的网站开始考虑将大量数据储存在客户端这样可以减少从服务器获取数据直接从本地获取数据。 现有的浏览器数据储存方案都不适合储存大量数据Cookie 的大小不超过4KB且每次请求都会发送回服务器LocalStorage 在 2.5MB 到 10MB 之间各家浏览器不同而且不提供搜索功能不能建立自定义的索引。所以需要一种新的解决方案这就是 IndexedDB 诞生的背景。 通俗地说IndexedDB 就是浏览器提供的本地数据库它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据提供查找接口还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言IndexedDB 不属于关系型数据库不支持 SQL 查询语句更接近 NoSQL 数据库。 关于indexDB的知识可以查看这篇文章http://www.ruanyifeng.com/blo... 这里我只是根据自己的理解整理了一下关于缓存存储方面的知识还有很多不足的地方更多实践的知识还请查看其他文章如有错误请指出 参考文章https://www.jianshu.com/p/54c...https://segmentfault.com/a/11...http://www.cnblogs.com/etoah/...https://blog.csdn.net/zhouche... 更多专业前端知识请上
【猿2048】www.mk2048.com
