美文网首页
浏览器缓存和压缩优化技术

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

作者: 你与时光终会散 | 来源:发表于2019-07-08 17:22 被阅读0次

一、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

相关文章

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

    浏览器缓存和压缩优化技术 启用浏览器缓存 http缓存模型中,如果请求成功会有三种情况 200 from cach...

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

    一、HTTP缓存机制 高并发下只能通过提升服务器负载解决?缓存只能做数据库缓存?启用浏览器缓存 缓存分类:HTTP...

  • js基础常见问题总结(三)~

    web前端性能优化总结 浏览器访问优化 1、减少http请求,合理设置 HTTP缓存2、使用浏览器缓存3、启用压缩...

  • 性能优化

    性能优化方法: 减少http请求,合理浏览器缓存 资源压缩合并;启用压缩:HTML、CSS、javascript文...

  • 浏览器缓存?优点?清除方法?

    ☆前端优化:浏览器缓存技术介绍 - 简书 浏览器缓存(适用于前端解决缓存问题) - 简书 js清除浏览器缓存问题的...

  • PHP高并发解决方案

    高并发解决方案案例 1、流量优化:防盗链处理2、前端优化:减少HTTP请求,启用浏览器缓存和文件压缩,cdn加速,...

  • 大型网站核心架构要素

    大型网站核心架构要素 性能 可用性 伸缩性 扩展性 安全性 性能 浏览器端:浏览器缓存,页面压缩,优化页面布局,减...

  • 高并发-浏览器缓存和压缩优化

    HTTP缓存机制 启用浏览器缓存 缓存分类 HTTP缓存模型中,如果请求成功会有三种情况1.200 from ca...

  • web 前端缓存

    标签: 缓存优化 浏览器缓存策略 在此输入正文

  • 浏览器缓存

    参考文章链接 : 前端优化:浏览器缓存技术介绍 - 掘金 浅谈http中的Cache-Control_小小郭-...

网友评论

      本文标题:浏览器缓存和压缩优化技术

      本文链接:https://www.haomeiwen.com/subject/wneahctx.html