缓存&PWA 实践 一.背景 从上一篇<前端动画实现与原理分析>,我们从 Performance 进行动画的性能分析,并根据 Performance 分析来优化动画.但,前端不仅仅是实现流畅的动画.ToB 项目会经常与数据的保存.渲染打交道.例如开发中,为了提高用户体验,遇到了一些场景,其实就是在利用某些手段,来进行性能优化. Select 下拉:做前端分页展示 → 避免一次性渲染数据造成浏览器的假死状态: indexedDB:存储数据 → 用户下一次进入时,保存上一次编辑的状态 --…

Guava Cache,网上介绍很多,我就不赘述了. 分享一篇好的文章: Guava Cache内存缓存使用实践-定时异步刷新及简单抽象封装 Google Guava 3-缓存 在原作者基础上,我做了一些修改: public void loadValueWhenStarted(){ } 该方法不再定义为抽象方法.没必要抽象,当有使用场景的时候子类重载该方法不就完了嘛. 作者也没有给出使用示例,这里提供一个我的使用示例: @Log4j2 public class DataIdCache exten…

缓存是最直接有效提升系统性能的手段之一.个人认为用好用对缓存是优秀程序员的必备基本素质. 本文结合实际开发经验,从简单概念原理和代码入手,一步一步搭建一个简单的二级缓存系统. 一.通用缓存接口 1.缓存基础算法 (1).FIFO(First In First Out),先进先出,和OS里的FIFO思路相同,如果一个数据最先进入缓存中,当缓存满的时候,应当把最先进入缓存的数据给移除掉.(2).LFU(Least Frequently Used),最不经常使用,如果一个数据在最近一段时间内使用次数很…

作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开发的同学,提供一些参考. 一.多页签是什么? 我们常见的浏览器多页签.编辑器多页签,从产品角度来说,就是为了能够实现用户访问可记录,快速定位工作区等作用:那对于单页应用,可以通过实现多页签,对用户的访问记录进行缓存,从而提供更好的用户体验. 前端可以通过多种方式实现多页签,常见的方案有两种: 通过C…

准备: 两台服务器,一台web,一台squid缓存代理 squid机域名:www.dannylinux.top web机IP:12.1.1.1 1.版本: [root@danny squid]# squid -v Squid Cache: Version 2.安装:略,直接yum安装 3.配置 vim /etc/squid/squid.conf acl localnet src acl localnet src # RFC1918 possible internal network acl lo…

需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,…

原文链接:http://my.oschina.net/leejun2005/blog/369148 1.缓存的分类 缓存分为服务端侧(server side,比如 Nginx.Apache)和客户端侧(client side,比如 web browser). 服务端缓存又分为 代理服务器缓存 和 反向代理服务器缓存(也叫网关缓存,比如 Nginx反向代理.Squid等),其实广泛使用的 CDN 也是一种服务端缓存,目的都是让用户的请求走”捷径“,并且都是缓存图片.文件等静态资源. 客户端侧缓存一…

背景 缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件. 虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序.当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件. 方案: 为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL.有很多策略: 使用…

一.前言 现在市面上的Native  APP成千上万个,各种应用商店里面的APP琳琅满目.原生的APP下载到手机上之后,用户就可以获取一个方便的入口,体验上也十分顺畅.但是再好的事物难免有点缺点: 1.开发成本高,一般同时安卓和ios两个版本: 2.版本迭代.打包.上传.过审这一些的步骤拉长了开发周期,有时候还有面临别被下架的风险: 3.不利于SEO: 相对于原生APP,web网页开发开发周期快,没有过审之类的烦恼,也更加利于SEO,当时也存在很明显的不足: 1.只能借助浏览器访问,没有桌面快捷…

Nginx缓存服务 1.缓存常见类型 2.缓存配置语法 3.缓存配置实践 4.缓存清理实践 5.部分页面不缓存 6.缓存日志记录统计 通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 客户端 <--> nginx <---> 服务端 1.缓存常见类型 服务端缓存 --> redis / memcached 代理缓存, 获取服务端内容进行缓存 nginx_proxy 客户端浏览器缓存 2.缓存配置语法 proxy_cache配置语法 S…

spring(三.spring中的eheche缓存.redis使用) 本文主要介绍为什么要构建ehcache+redis两级缓存?以及在实战中如何实现?思考如何配置缓存策略更合适?这样的方案可能遗留什么问题?JUST DO IT! GO! 问题描述 场景:我们的应用系统是分布式集群的,可横向扩展的.应用中某个接口操作满足以下一个或多个条件: 1. 接口运行复杂代价大, 2. 接口返回数据量大, 3. 接口的数据基本不会更改, 4. 接口数据一致性要求不高(只需满足最终一致). 此时,我们会考虑将…

问题描述 场景:我们的应用系统是分布式集群的,可横向扩展的.应用中某个接口操作满足以下一个或多个条件: 1. 接口运行复杂代价大, 2. 接口返回数据量大, 3. 接口的数据基本不会更改, 4. 接口数据一致性要求不高(只需满足最终一致). 此时,我们会考虑将这个接口的返回值做缓存.考虑到上述条件,我们需要一套高可用分布式的缓存集群,并具备持久化功能,备选的有ehcache集群或redis主备(sentinel). ehcache集群因为节点之间数据同步通过组播的方式,可能带来的问题:节点间大量…

PWA 介绍 概念: PWA(Progressive web apps,渐进式 Web 应用)运用现代 Web API 和传统的渐进式增强策略来创建跨平台 Web 应用程序 它并不是一个快捷方式,而能在系统中作为一个独立的 App 存在,用户可设置它的权限,清除它的缓存 PWA 的关键技术在浏览器中的支持度: 1.Web App Manifest 的支持度达到 80.63% 2.Service Worker 的支持度达到 89.84% 3.Notifications API 的支持度达到 75.…

通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 1.缓存常见类型 服务端缓存 代理缓存, 获取服务端内容进行缓存 客户端浏览器缓存 Nginx代理缓存原理 2.缓存配置语法 2.1proxy_cache配置语法 Syntax: proxy_cache zone | off; Default: proxy_cache off; Context: http, server, location //缓存路径 Syntax: proxy_cache_path…

通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 1.缓存常见类型 服务端缓存 代理缓存, 获取服务端内容进行缓存 客户端浏览器缓存 Nginx代理缓存原理 2.缓存配置语法 proxy_cache配置语法 Syntax: proxy_cache zone | off; Default: proxy_cache off; Context: http, server, location #1.缓存路径 Syntax: proxy_cache_path pa…

查看服务 netstat -lntp|grep 80 Nginx作为缓存WEB服务 通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时 Nginx代理缓存原理 缓存配置语法 proxy_cache配置语法 Syntax: proxy_cache zone | off; Default: proxy_cache off; Context: http, server, location //缓存路径 Syntax: proxy_cache_path path…

零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚动触发分次加载以模拟分页,当客户端加载到了一定页数之后(>= 2),点击某条数据进去查看详情,然后返回列表页,这时候如果没有缓存的话,列表页会按照初始参数(即从分页 1 开始)发请求拉数据,并且丢失浏览位置.一方面,浪费请求资源,另一方面,用户体验不佳.因此,针对这两个问题,最后决定开启缓存. vu…

一般少量图片是很少出现OOM异常的,除非单张图片过~大~ 那么就可以用教程一里面的方法了通常应用场景是listview列表加载多张图片,为了提高效率一般要缓存一部分图片,这样方便再次查看时能快速显示~不用重新下载图片但是手机内存是很有限的~当缓存的图片越来越多,即使单张图片不是很大,不过数量太多时仍然会出现OOM的情况了~本篇则是讨论多张图片的处理问题-----------------------------------------------------------------------图片…

感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具体内容看这里:前端每周清单年度总结与盘点. 前端每周清单第 56 期:D3 5.0,深入 React 事件系统,SketchCode 界面生成 前端每周清单第 55 期:MobX 4 特性概览,iOS Hacks 分享, 分布式事务详解 前端每周清单第 54 期:SwiftNIO, 自定义 vue-…

目前线上一个单实例redis中无用的key太多,决定删除一部分. 1.删除指定用户的key,使用redis的pipeline 根据一定条件把需要删除的用户统计出来,放到一个表里面,表为 del_user(int user_id),rows大约在1千万. 要删除的key为 "login:%s" %s匹配 user_id . 写sql文如下:把sql文保存在一个文件里面,命名为 1.sql SELECT CONCAT( "*2\r\n", '$3\r\n',    'D…

大体过程 浏览器的地址栏输入URL并按下回车 浏览器检查当前URL是否存在缓存,并比较缓存是否过期 DNS解析URL对应的IP 根据IP建立TCP连接(三次握手) HTTP发起请求 服务器处理请求,浏览器接收HTTP响应 渲染页面,构建DOM树 关闭TCP连接(4次挥手) 具体过程的理解 浏览器缓存 大体上来说,可以分为强缓存和协商缓存 强缓存 强缓存主要通过http响应头中的==Cache-Control==和==Expires==两个字段来控制的 Expires: Wed, 21 Oct 2…

no-cache:不缓存过期的资源 no-store:不缓存 最近看了<图解HTTP>这本书,书上讲到了这两者的区别: no-cache从字面意义上很容易误解为不缓存,但是no-cache代表不缓存过期的资源,缓存会向服务器进行有效处理确认之后处理资源,更确切的说,no-cache应该是:do-not-serve-from-cache-without-revalidation,而no-store才是真正的不进行缓存. 摘自:<no-cache和no-store的区别>,https:…

课程介绍:        讲课内容涉及Java互联网技术工程框架.应用框架.        性能调优 (Tomcat Nginx JVM)         分布式框架(并发编程 Zookeeper Netty dubbo Redis)        微服务框架( Spring Cloud Docker虚拟化 微服务架构 )等知识点        预习资料+全程答疑+名师直播+课堂笔记        课后作业+作业批改+项目源码+阶段考试 课程目录:        ├─01.VIP课程-互联网工程…

一.cdn缓存刷新 当静态内容需要更新时,通常会往COS覆盖上传,不覆盖删除上传等进行更新资源或删除对象存储中的内容. 如果配置的CDN缓存过期时间较长,会导致文件更新后其他边缘节点依旧会缓存旧资源:缓存时间过短则起不到缓存的作用. 二.cdn缓存刷新方式 1,通过控制台手动刷新 2,通过COS结合SCF,实现在COS文件更新时自动刷新 三.cdn缓存刷新实践 1,手动刷新 选择云产品---->内容分发网络---->缓存刷新 2,自动刷新 云产品---->云函数------>函数服…

Redis 拥有高性能的数据读写功能,被我们广泛用在缓存场景,一是能提高业务系统的性能,二是为数据库抵挡了高并发的流量请求,点我 -> 解密 Redis 为什么这么快的秘密. 把 Redis 作为缓存组件,需要防止出现以下的一些问题,否则可能会造成生产事故. Redis 缓存满了怎么办? 缓存穿透.缓存击穿.缓存雪崩如何解决? Redis 数据过期了会被立马删除么? Redis 突然变慢了如何做性能排查并解决? Redis 与 MySQL 数据一致性问题怎么应对? 今天「码哥」跟大家一起深入探索…

PWA 推送实践 最近公司内录任务的系统总是忘记录任务,而那个系统又没有通知,所以想要实现一个浏览器的通知功能,免得自己忘记录入任务. 前端实现通知的几种方式 想要实现通知,我们就需要有个客户端,对于前端同学来说,我们的客户端就是浏览器,我们每天基本上都是长开浏览器,所以用浏览器做个通知效果更好.既然是浏览器,在PWA 出现之前我们就只有 chrome 插件可以用,现在既然有了 PWA,我们有一个更为方便的方案:PWA. 为什么选用 PWA?由于内部系统的任何信息,包括域名都不能上传到外部,如果…

一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢.麻省理工学院的 Richard Larson 在讲话中指出,"人类将被动等待高估了 36%"(https://mazey.cn/t/em).这意味着用户感觉到的等待时间比开发工具记录的长得多. 1.2 看起来卡(体验) 页面结构不断调整,不连贯.抖动的页面往…

为什么要讲缓存.缓存到底有什么作用? 下面我们来说一个场景我们有一个首页菜单的布局基本是不会经常发生的变化,如果动态生成的 Web 页被频繁请求并且构建时需要耗用大量的系统资源,那么,如何才能改进这种情况的响应时间了?于是在这种情况下面缓存就起作用了,这样我们就可以避免频繁的去访问服务器增加服务器的压力.现在我们来MVC 页面缓存,下面我们使用一个简单的例子之前先看一下原理 于是现在我们在分析分析如何的看一个页面是否进行了相应的缓存行为.他里面的参数含义. cache-control是用于控制网…

距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任务.而且这段事件用过mint-ui这个h5的框架,感觉太老了,想自己开发一套ui组件了,所以一直忙呀忙.顺带最近绝地求生比较火,然后也拉了几个小伙伴一起玩了好长时间,所以节奏有点慢了.下面废话不多说了,直接进入主题. 上一篇博客介绍了基础的纯概念,这篇文章纯粹偏技术实践,需要理解一些玩意的.技术介绍…

本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能.本文作者陈鹏是该系统的负责人,本次文章深入介绍了该系统的方方面面,值得互联网后端程序员仔细研究.   (本文同步发布于:http://www.52im.net/thread-1968-1-1.html) 2.关于作者 陈鹏:现任知乎存储平台组 Redis 平台技术…