前端性能优化之http缓存
前不久,公司前端开会,领导抽问了4个问题,前3个简单大家都答起来了,第4个问题关于缓存的这方面我只是了解,结果刚好问到我了(会的不问,专门挑我不熟悉的问,我这运气真是没话说),20多个前端看着我,答得不是很好,感觉很臊皮,遂重新研究并记录下成果。
讲下缓存以及200 form cache 和304的区别
如果每次都要求用户从服务器获取数据,那么速度和流量势必有问题,所以就需要http缓存来解决了。如果文件没有更新就用缓存起来的原文件。
缓存分为强缓存和协商缓存
强缓存是指不问服务器这个文件有没有更新,只要在缓存时间范围内,就使用缓存的文件,这时network上显示200 form cache,
有2个属性控制强缓存,Expires和Cache-Control: max-age,Expires是http 1.0定义的,使用的是相对时间,如果2边与服务器时间不统一就会出现问题,为了解决这个问题于是就出现了http 1.1定义的Cache-Control: max-age,这个属性使用的是相对时间,一般来说都是2个都加,然后取相对时间属性。
协商缓存是先向服务器询问下是否文件有更新,根据服务器的提示来决定是否使用缓存,由于比强缓存多了去服务器询问这一步所以势必没有强缓存快。
协商缓存也有2对属性,分别是ETag和If-None-Match,Last-Modified和If-Modified-Since,每次请求的时候,浏览器会保存获取的ETag和Last-Modified,下次在调的时候会传If-None-Match和If-Modified-Since过去,值就是上次获取ETag和Last-Modified的值,然后根据返回的值是否有变化来决定是否取缓存的数据,Last-Modified是用时间来判断,ETag用标识符,之所以出现2个是因为Last-Modified只能精确到秒,如果1秒内有多次数据调用,它就无能为力了,所以出现了进阶的ETag,使用协商缓存的时候status显示的是304
工作中nginx+vue@cli3+缓存优化
工作中正常情况下除了html其余资源都使用强缓存,html使用协商缓存,当打包重新构建的时候,html使用协商缓存会发现html变了,然后从服务器读取新的html,由于打包后html引用的文件hash值不一样,就会重新加载新的各种文件,但是通过查看hash值发现,
1 没有任何文件改动,app.js的hash值都会改变
2 明明改动的只有js文件,但app.js和app.css的hash都会改变
hash变了就意味着会重新加载,但是文件明明没有变化,为什么要改变hash值,让某些文件白白多加载一次呢,
查找资料发现,HashedModuleIdsPlugin可以解决你的问题
configureWebpack: config => {
return {
plugins: [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
}),
// 在控制台中输出可读的模块名
new webpack.NamedModulesPlugin(),
// 不做改动hash保持不变
new webpack.HashedModuleIdsPlugin()
]
}
},
还有一点很有趣的是假如你想试着把html也设成强缓存(配置nginx来设置缓存时间),刷新浏览器页面,你会发现html还是304,查看头部,发现Expires和Cache-Control: max-age这2个都有,但是为什么还是304呢,网上也没有讲这个的,后面瞎折腾发现,网页新起一个标签页,然后输入你的网页,第一次是用的强缓存,后面就是304了,虽然这点没什么用。。。
前端性能优化之http缓存的更多相关文章
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Wen前端性能优化
Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
随机推荐
- Redis中一个String类型引发的惨案
曾经看到这么一个案例,有一个团队需要开发一个图片存储系统,要求这个系统能快速记录图片ID和图片存储对象ID,同时还需要能够根据图片的ID快速找到图片存储对象ID.我们假设用10位数来表示 ...
- 微信小程序云开发-云存储的应用-识别通用印刷体
一.准备工作 1.创建云函数identify 2.云函数identify中index.js代码 1 // 云函数入口文件 2 const cloud = require('wx-server-sdk' ...
- TCP协议的“三次握手”和“四次挥手”
TCP是面向连接的,无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接.在TCP/IP协议中,TCP 协议提供可靠的连接服务,连接是通过三次握手进行初始化的.三次握手的目的是同步连接双方的 ...
- php header 设置文件下载
控制器 php 代码: $filepath = "http://www.jiesen365.com/uploadfile/20150519044903-897.pdf"; //下载 ...
- js 倒计时退出
<p>您已提交成功!<span id='submit_second'></span></p> $("#submit_second") ...
- Maven-内部多个项目依赖自动升级版本的部署
需要自动升级版本的AAA项目发布 (有内部依赖时) 步骤比较复杂, 有一些需要根据实际情况调整. 考虑了以下几种可能性: 依赖模块的版本有更新 依赖模块版本没更新 依赖模块的版本号: 直接定义, 用属 ...
- 前阿里技术总监手打:452页Android Framework 精编内核解析
众所周知,Android是一个基于Linux实现的操作系统.但对于Linux内核来说,Android也仅仅只是一个运行在内核之上的应用程序,与其他运行在内核之上的应用程序没有任何区别. 所以Andro ...
- asp .net core中swagger的简单使用
相信swagger大家不太陌生,简单来说就是把web api接口以ui的形式呈现到页面上,供方便调用和展示.这边文章就带大家初步简单使用swagger. (1)首先需要安装包:Swashbuckle. ...
- 跟我一起写 Makefile(六)
书写命令 ---- 每条规则中的命令和操作系统Shell的命令行是一致的.make会一按顺序一条一条的执行命令,每条命令的开头必须以[Tab]键开头,除非,命令是紧跟在依赖规则后面的分号后的.在命令行 ...
- HashMap底层实现-基础
1.数据结构 1.7 数组+链表,键值对是以Entry内部类的数组存放的.键计算得到哈希值是该数组的下标.又称桶数组当存在哈希冲突时,会通过Entry类内部的成员变量 Entry<k,v> ...