html怎么设置内存当缓存,前端浏览器缓存怎么使用
之前给大家介绍过浏览器的缓存,也介绍过HTML的离线缓存,说的太多反而容易弄混,今天就来给大家好好分辨一下这些缓存分别有什么区别以及怎么使用缓存。
200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。但是这种方式只能缓存派生资源
200 from disk cache 不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。这种方式也只能缓存派生资源
304 Not Modified 访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。
三级缓存原理
先去内存看,如果有,直接加载
如果内存没有,择取硬盘获取,如果有直接加载
如果硬盘也没有,那么就进行网络请求
加载到的资源缓存到硬盘和内存
一般浏览图片,如下流程:
访问-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
application cache和上面缓存有点区别,是离线缓存,就是资源可以从硬盘上读取而不用联网,即使断网,用户也可以浏览。
设置浏览器缓存
304是协商缓存还是要和服务器通信一次,要想断绝服务器通信,就要强制浏览器使用本地缓存(cache-control/expires),
一般有如下几种方式设置浏览器缓存。
1、通过HTTP的META设置expires和cache-control
这样写的话仅对该网页有效,对网页中的图片或其他请求无效。
2、apache服务器配置图片,css,js,flash的缓存
这个主要通过服务器的配置来实现这个技术,如果使用apache服务器的话,可以使用mod_expires模块来实现:
编译mod_expires模块:Cd /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译
先打开httpd.conf文件,然后查找expires这个模块,找到后,删除左边的#号,表示打这个模块,并重启apache服务器
编辑httpd.conf配置:添加下面内容ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"
3、php等设置<?php
header("Cache-Control: public");
header("Pragma: cache");
$offset = 30*60*60*24; // cache 1 month
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
header($ExpStr);?>
或者$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");
缓存情况下前端代码部署
问题一:有了缓存,如何进行前端代码更新呢?
我们可以在资源文件或者图片后面添加版本号,如下图。
问题二:但是所有文件都加了版本号之后,我们只更改了一个文件,其他文件的缓存不是浪费了吗?
解决这个问题,我们可以用 数据摘要要算法,对文件求摘要信息,摘要信息与文件内容一一对应。如下图:
这样就解决了这个问题。
问题三:新的问题又来了,文件发布怎么办?
1、先部署页面,再部署资源:在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。
2、先部署资源,再部署页面:在部署时间间隔之内,有旧版本资源本地缓存的用户访问网站,由于请求的页面是旧版本的,资源引用没有改变,浏览器将直接使用本地缓存,这种情况下页面展现正常;但没有本地缓存或者缓存过期的用户访问网站,就会出现旧版本页面加载新版本资源的情况,导致页面执行错误,但当页面完成部署,这部分用户再次访问页面又会恢复正常了。
好的,上面一坨分析想说的就是:先部署谁都不成!都会导致部署过程中发生页面错乱的问题。所以,访问量不大的项目,可以让研发同学苦逼一把,等到半夜偷偷上线,先上静态资源,再部署页面,看起来问题少一些。
如何解决这些问题呢?
这个问题,起源于资源的 覆盖式发布,用 待发布资源 覆盖 已发布资源,就有这种问题。解决它也好办,就是实现 非覆盖式发布
关于缓存的方方面面就这么多了,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML怎么实现数字焦点图轮播代码
HTML里的最后一行文字显示不全怎么处理
怎样用canvas做出粒子喷泉动画的效果
html怎么设置内存当缓存,前端浏览器缓存怎么使用相关推荐
- php 前端缓存,前端浏览器缓存及代码部署
前言 最近手上刚刚拆掉石膏,去楼下房友帮忙.楼下房友领导来自阿里,前端用的是阿里的ant-design,设计将设计图上传到蓝湖,聊天工具也采用阿里的钉钉.有时间我也多多去楼下房友交流学习,多交流,就会 ...
- http缓存和浏览器缓存
一.前言 前端缓存主要是分为HTTP缓存和浏览器缓存.其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置:而浏览器缓存则主要由前端开发在前端js上进行设置. 缓存可以说是性能优化 ...
- 彻底缓存与协商缓存(浏览器缓存)
前言: 浏览器缓存也称http在浏览器向服务器请求资源的时候,许多静态的资源是长时间不会更改的.如果重复的发起请求,不断从服务器获取长时间不会改变的资源,不仅会浪费宽带,增加服务器的压力,甚至影响到用 ...
- DNS 缓存、CDN 缓存、浏览器缓存,JVM DNS 缓存详解
最近测试遇到修改host文件后,清除浏览器缓存后,重启浏览器后,发现浏览器还是访问老DNS服务,于是网上查查原因,豁然开朗. 这里对互联网上一些文章进行整理,原文可查看参. 1.DNS 缓存 1.1 ...
- JS缓存与浏览器缓存技术详解 学习笔记
缓存与浏览器缓存技术: 一,缓存: 缓存是网络传输中常用到的一种技术,利用缓存可以让我们在数据传输方面更加的方便和快捷. 1.1缓存的优点: 避免冗余的数据传输: 当很多的人去访问一个网站的原始服务器 ...
- Web缓存机制(浏览器缓存 CDN缓存 DNS缓存)
在本片文章中,将阅读到的内容有: web缓存的类型 1.1数据库数据缓存 1.2 服务器端缓存 1.2.1 代理服务器缓存 1.2.2 CDN缓存 1.2.3 DNS缓存 1.3 浏览器端缓存 1.3 ...
- 如何清除360网站服务器缓存,360安全浏览器怎样清除缓存360浏览器缓存清理
<360安全浏览器怎样清除缓存360浏览器缓存清理>由会员分享,可在线阅读,更多相关<360安全浏览器怎样清除缓存360浏览器缓存清理(8页珍藏版)>请在人人文库网上搜索. 1 ...
- android缓存策略跟cdn,缓存学习(五)CDN缓存(下)-CDN缓存策略、CDN缓存和浏览器缓存之间的关系、回源和回源比...
CDN缓存策略 CDN(Content Delivery network,内容分发网络),通过GSLB技术使得用户能访问到最近物理机房的文件,以节省网络时间,也就是说一份文件可能会在全国乃至全球的多个 ...
- 前端缓存(浏览器缓存和http缓存)详解
web缓存是高级前端工程师必修技能.是我们变成大牛过程中绕不开的知识点. 文章会尽量用通俗易懂的言语来细说web缓存的概念和用处. 本期文章的大纲是 什么是web缓存(前端缓存) 缓存可以解决什么问题 ...
- 前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
浏览器缓存机制分析及前端缓存清理 发布时间:2018-06-03 16:56, 浏览次数:857 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案 相信很多新手前端发布页面 ...
最新文章
- 国产SM4密码算法详解和实现
- js 排列 组合 的一个简单例子
- 最全 | Redis可视化工具横向评测
- QT的QQmlNdefRecord类的使用
- 为PHP开发C语言扩展
- 矩阵置零Python解法
- zuk z2 Android7.0官方,首发ZUK Z2官方固件ZUI2.5安卓7.0卡刷包!
- AOP——基于AspectJ的注解来实现AOP操作
- 中国女足3:2逆转!支付宝:1300万奖金已到位 蒙牛奖励千万现金
- C语言 文件缓冲区
- ichartjs android,在android上动态实现ichartjs的3D柱形图
- html的版本适配,2.1.3 HTML 5确保了与之前HTML版本的兼容性
- 微型计算机接口技术实训心得,微机原理与接口技术实验总结.doc
- coursera和udacity_从Udacity和Coursera进行深度学习
- 《互联网时代》 第八集 忧虑
- linux 系统的磁盘 mbr 转gpt方法
- 设计模式常用的七大原则之③【依赖倒转】原则
- 1000款水墨墨迹毛笔素材
- MXT6208量产修复工具+v2.0非常好用哦!
- 2D变形效果有几种?变形效果讲解