浏览器缓存和压缩优化技术

一、HTTP缓存机制

高并发下只能通过提升服务器负载解决?
缓存只能做数据库缓存?
启用浏览器缓存

缓存分类
HTTP缓存模型中,如果请求成功会有三种情况

  • 1、200 from cache:直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求。
  • 2、304 Not Modified:协商缓存浏览器在本地没有命中的情况下,请求头中发送一定的教验数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304。
    快速,发送的数据很少,只返回一些基本的响应头信息,数据量很小,不发送实际响应体。
  • 3、200 OK:以上两种缓存全部失败,服务器返回完整响应。没有用到缓存相对最慢。

常见状态码

状态码 说明
200 服务器成功返回网页
301/2 永久/临时重定向
304 Not Modified 未修改
307 重定向中保持原有的请求数据
404 请求的网页不存在
503 服务器暂时不可用
500 服务器内部错误

本地缓存
浏览器如果认为本地缓存能使用,不会去请求服务端。
相关header
Pragma:HTTP1.0时代的,该字段被设置未no-cache时,会告知浏览器禁用本地缓存。
Expires:HTTP1.0时代的,缓存过期时间。浏览器与服务器时间无法保持一致,如果差距过大,就会影响缓存结果。
Cache-Control:HTTP1.1,缓存过期的时间间隔。
优先级 Pragma > Cache-Control > Expires

协商缓存
浏览器在本地没有命中的情况下,请求头中发送一定的教验数据到服务端,如果服务端数据没有修改,浏览器使用本地缓存
相关header
Last—Moidfied
If-Modified-Since
ETag HTTP1.1推出,文件的指纹标识符。
If-None-Matche:本地缓存失败,会携带此值去请求服务端

缓存策略的选择
适合缓存的内容
不变的图像、js、css、可下载的内容、媒体文件

建议使用协商缓存
HTML文件、经常替换的图片、经常修改的js、

二、Nginx配置缓存策略

add_header指令:添加状态码为2XX和3XX的响应头信息
add_header name value [awalys’];
可以设置Progma/Expires/Cache-Control,可以继承

本地缓存配置
expires指令:通知浏览器过期时长
expires time;
为负值时表示Cache-Control: no-cache
为正值或者0就表示Cache-Control:max-age=指定的时间

协商缓存配置
etag 默认开启

三、前端代码和资源的压缩

让资源文件更小,传输更快
js、css、图片、html
Gzip压缩

  • js 去除空白符和注释,替换长变量名
  • css类似js
  • html 不建议压缩可以用Gzip压缩
  • 图片压缩 tinypng jpegMini ImageOptim
  • Gzip压缩 nginx配置 gzip on|off
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器缓存和压缩优化技术 启用浏览器缓存 http缓存模型中,如果请求成功会有三种情况 200 from cach...
    谢凌阅读 372评论 0 0
  • 浏览器对于请求资源, 流程如图所示: 可以看到浏览器的缓存机制分为两个部分: 1、当前缓存是否过期? 2、服务器中...
    zhoulujun阅读 1,253评论 0 3
  • 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,...
    浪里行舟阅读 207,520评论 46 521
  • 参考《深入理解浏览器的缓存机制》进行整理 前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略...
    琢磨先生lf阅读 759评论 1 1
  • 一直有爱好写日记的习惯,但不写也就疏忽了。昨天想好的主题说忘就忘记了,果然打了麻醉是有影响的,曾经还蛮自豪自己的记...
    生命的赤道阅读 161评论 0 0