网站建设是什么,wordpress一键优化,上海大公司有哪些,wordpress添加搜索引擎浏览器缓存 好处#xff1a; 减少冗余的数据传输#xff0c;节省带宽。减轻服务器的请求压力#xff0c;因为有缓存可以减少向服务器发送请求#xff0c;资源从缓存中读取#xff0c;加快客户端的访问速度。因为无需从服务器请求等待响应 缺点#xff1a; 系统更新时…浏览器缓存 好处 减少冗余的数据传输节省带宽。减轻服务器的请求压力因为有缓存可以减少向服务器发送请求资源从缓存中读取加快客户端的访问速度。因为无需从服务器请求等待响应 缺点 系统更新时如何删除浏览器的缓存资源加载最新的页面。 缓存 Service Worker是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体可以帮我们实现离线缓存、消息推送和网络代理等功能。 Memory Cache存在内存中的缓存。包括当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。因为存储在内存中MemoryCache 是响应速度最快的一种缓存但由于同样的原因缓存持续性很短会随着进程的释放而释放一旦我们关闭 Tab 页面内存中的缓存也就被释放了。 Disk CacheDisk Cache 也就是存储在硬盘中的缓存读取速度慢点但是什么都能存储到磁盘中比之 Memory Cache 胜在容量和存储时效性上。会根据 HTTP Herder 中的字段判断哪些资源需要缓存哪些资源可以不请求直接使用哪些资源已经过期需要重新请求。 Push CachePush Cache 是 HTTP2 在 server push 阶段存在的缓存当以上三种缓存都没有命中时它才会被使用Push Cache 是一种存在于会话阶段的缓存当 session 终止时缓存也随之释放。不同的页面只要共享了同一个 HTTP2 连接那么它们就可以共享同一个 Push Cache。 强缓存 不会向服务器发送请求直接从缓存中读取资源。状态码 200显示 from disk cache 或 from memory cache。设置两种 Http Header 实现Expires 和 Cache-Control Expires值是一个时间戳表示本地时间到这个设置的时间缓存就失效。 缺点受限于本地时间推荐使用 Cache-Control Cache-Control优先级比 Expires 高可以在请求头或者响应头中设置 private默认只能在浏览器中缓存只有在第一次请求中访问服务器。如有 max-age:缓存期间不访问服务器public可以被任何缓存区缓存如浏览器、服务器、代理服务器no-cache: 可以缓存相当于协商缓存每次都需要去服务器验证缓存是否一致。如有 max-age:缓存期间不访问服务器no-store不仅不能缓存连暂存也不可以max-age以秒为单位的缓存时间设置时间内均使用本地的缓存不再向服务器发起请求s-magage跟 max-age 作用一样只在代理服务器中生效。优先级高于 max-age只对 public 缓存有效must-revalidate可缓存但必须再想源服务器进行确认proxy-revalidate要求中间缓存服务器对缓存的响应有效性进行确认 协商缓存 当 cache-control 和 Expires 过期或者它的属性设置为 no-cache 时那么浏览器第二次请求时就会与服务器进行协商判断资源是否更改 没更改返回 304 Not Modified使用本地缓存资源。 资源更改返回 200重新加载本次缓存资源更新。 浏览器与服务器的交互依靠 Last-Modified/If-Modified-Since、ETag/If-None-Match 的 header 头属性在请求头和响应头成对出现的。 Last-Modified/If-Modified-Since 浏览器在第一次访问资源或缓存过期后访问服务器返回资源的同时在 response header 中添加 Last-Modified 的 header值是这个资源在服务器上的最后修改时间浏览器接收缓存文件和 header 信息。随后我们每次请求时浏览器会自动带上一个叫 If-Modified-Since 的时间戳字段给服务器它的值正是上一次 response 返回给它的 Last-modified 值然后服务器会根据 If-Modified-Since 的值对比资源的最后修改时间判断资源是否进行了修改更新。 ETag/If-None-Match Etag 是由服务器为每个资源生成的唯一的标识字符串这个标识字符串是基于文件内容编码的只要文件内容不同它们对应的 Etag 就是不同的因此 Etag 能够精准地感知文件的变化。Etag 和 Last-Modified 类似当首次请求时我们会在响应头里获取到一个最初的标识符字符串。那么下一次请求时浏览器就会在请求头里就会带上一个值相同的、名为 if-None-Match 的字符串供服务器比对。Etag 的优先级会比 Last-Modified 高但是 Etag 因为要生成也会更消耗服务器性能。 Cache-Control: no-cache 和 Cache-Control: no-store 区别 看字面意思容易误解no-cache 就是不缓存但是 no-cache 并不是不缓存而是使用协商缓存所以并不能禁止缓存no-store 才是真正的禁止缓存。从节省带宽角度讲使用 no-cache 更优一点文件未发生改变时只传输很小的报文大小只有在文件改变时才会传输整个文件大小。而不是 no-store 不管什么情况都传输整个文件大小。 Pragma: no-cache和 Cache-Control: no-cache 区别 Pragma: no-cache 跟 Cache-Control: no-cache 相同Pragma: no-cache 兼容 http 1.0 Cache-Control: no-cache 是 http 1.1 提供的。因此Pragma: no-cache 可以应用到 http 1.0 和 http 1.1,而 Cache-Control: no-cache 只能应用于 http 1.1. 如何保证系统实时更新 方法一 以 vue 为例vue 在打包的时候css 和 js 名字都加了哈希值所以改动后打包生成的 js 和 css 是唯一的页面请求的是新资源不会有缓存问题。但是入口文件 index.html 会因为缓存造成更新问题如果我们更新了但是浏览器使用的是缓存就会出现问题。所以需要对入口文件设置不使用强制缓存需要每次去服务器验证文件是否修改即使用协商缓存。 server {listen 80;server_name 域名;root 文件目录;index index.html;location {// 不加这一句会出现nginx欢迎页面无法正确加载资源try_files $uri /index.html;}location ~ .*\.(html)$ {// 对html文件限制缓存add_header Cache-Control no-store;// 不缓存// 或者用add_header Cache-Control no-cache;替代上面那一句协商缓存add_header Pragma no-cache} } 方法二 最直接的办法 Internet 选项 Internet 临时文件“设置” “每次访问此页时检查”,缺点是要设置每台客户端客户端较多时不可取 设置网页头header 状态码 200 from memory cache 状态码是灰色的从内存中读取缓存的资源强缓存。不请求服务器。页面关闭会被内存释放再次打开相同页面需要重新请求服务器然后重新缓存在浏览器脚本、字体、图片会被存放在内存中 200 from disk cache 状态码是灰色的从磁盘中读取缓存的资源强缓存不请求服务器。页面关闭不会被释放这部分资源存在电脑磁盘中只有用户手动清除浏览器缓存才会被释放。较大的 css 文件、js 文件和 jpg 图片会存入硬盘 200 服务器请求响应的数据 304 协商缓存。请求访问服务器发现资源没有更新使用本地资源。 磁盘和内存的区别 内存是计算机的工作场所磁盘是用来存放暂时不用的信息信息保存不同内存中的信息会随刷新丢失磁盘中的信息可以长久保存除非手动删除磁盘的容量远大于内存cpu 只能读取内存里的数据磁盘是作为存储空间的。 浏览器三级缓存原理 先查找内存如果内存中存在从内存中加载如果内存中未找到选择硬盘获取如果硬盘中有从硬盘中加载如果硬盘中未找到那就请求服务器重新加载资源加载到的资源缓存到硬盘和内存。