缓存原理 浏览器缓存分为强缓存和协商缓存 先检查是否过期,没有过期直接使用本地缓存.如果过期,查看是否使用协商缓存 协商缓存流程: 后端返回headers: ETag: W/"1e3-1754f0e63af" Last-Modified: Thu, 22 Oct 2020 06:45:44 GMT 前端请求headers: If-Modified-Since: Thu, 22 Oct 2020 06:26:38 GMT If-None-Match: W/"1ef-1754ef

1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有更新到 每次gulp运行完后都会生成新的文件,开发环境是做了清除dist目录处理,但对于一般公司服务器而言,发布到生产环境上,不可能每次发布都对dist做清空处理,文件只会越积越多 先睹为快,猛戳链接下载Demo :http://pan.baidu.com/s/1skDm2Up 2.修改require.js

1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接下载Demo :http://pan.baidu.com/s/1jI4n1hs 以dist为根目录,运行http://localhost/html/index.html,如果出现"Good!成功加载index.js",则表示成功了. 不熟悉gulp的同学,可以参考这个比较详细的教程:htt

在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了.对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问.这种方法特别适用于使用iframe的框架. 具体实现思路和方法: 创建一个cache.js文件: 1.前端页面,定义那些数据需要一次性拿到前端缓存,定义一个对象来保存这些数据: /** * 定义需要在用户登录的时候获取到本地的数据字典类别 */ var clsCodes =

数据库访问可能是很多网站的瓶颈.动不动就连接池耗尽.内存溢出等.前面已经讲到如果我们的网站是一个分布式的大型站点,那么使用 memcached实现数据库的前端缓存是个很不错的选择:但如果网站本身足够小只有一个服务器,甚至是vps的那种,不推荐使用memcached,使 用Hibernate或者Mybatis框架自带的缓存系统就行了. 一.开启memcached服务器端服务 如果已经安装了memcached服务器端程序,请确认服务器端服务已开启. 二.引入jar 1.  alisoft-xplat

了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题.感谢赵欢同学提供doc素材. 首先,开局我画了一张图,你会对文章有一个大局了解. 今天讲的是前端缓存. 前端缓存有3大种:如图,分为HTTP缓存.浏览器缓存.应用程序缓存. HTTP缓存 我们先来看HTTP缓存:(做下了解) 分为强缓存与协商缓存. 首先看强缓存: 强缓存之Expires: 值为服务端返回的到期时间,即下一次请求时,请求时间小于服务端返回的到期时间,直接使用缓存数据: 到期时间是由服务端生成的,客户端时间跟服务端时

在写页面的时候,首先引入了本地react.js和react-dom.js 16版本(cjs)的文件,出现如下错误 发现bug后,将本地的react.js和react-dom.js文件改成16.2(umd)版本,之后还是一直出现上面的错误. 最后分析原因: 是因为浏览器的缓存没有清除,清除缓存后,bug消失. 由于找bug花费时间较长,特此记录.

bug1:在新版微信中,部门安卓机子(华为)出现window.location.href/window.location.reload....等方法来刷新本页面链接,发现页面没有被刷新,经过排查,发现是因为缓存原因. 解决方案:这时候给链接加一个时间戳来解决页面缓存!!! 时间撮: **).toISOString().replace(/T/g,}Z/,''); 解决缓存方案二:利用pagehide/pageshow 事件 会话(Session)中的某一个页面显示/隐藏时,会触发 pagehide

Memcached分布式缓存策略不是由服务器端至支持的,多台服务器之间并不知道彼此的存在.分布式的实现是由客户端代码(Memcached.ClientLibrary)通过缓存key-server映射来实现的,基本原理就是对缓存key求hash值,用hash值对服务器数量进行模运算,该key值被分配到模运算结果为索引的那台server上. Memcached.ClientLibrary对缓存key计算hashcode的核心算法如下: /// <summary> /// Returns appro

缘起 最近有个分布式限速的需求.支付宝的接口双11只允许每秒调用10次. 单机的限速,自然是用google guava的RateLimiter. http://docs.guava-libraries.googlecode.com/git-history/master/javadoc/com/google/common/util/concurrent/RateLimiter.html 分布式的ReteLimiter,貌似没有现在的实现方案.不过用memcached或者Redis来实现一个简单的也

相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理. 2)IE6双倍边距bug:在该元素中加入display:inline 或 display:block   3)像素问题 使用多个float和注释引起的 使用dislpay:inline -3px     4)超链接hover 点击后失效  使用正确的书写顺序 link

对于前端工程师来说,浏览器缓存优化是个永远的话题.前几天看了知乎上的一个问答:<大公司里怎样开发和部署前端代码?>,深以为然,所以决心使用 FIS 来优化自身的前端文件. 我们的项目使用了 go 语言的 revel 做 web 框架.这个框架的目录结构混合了前后端的文件,没法做到前后端开发的完全分离.所以我们要做的第一步,就是分离前后端的文件. 分离前后端 因为已经决定使用 FIS 来优化前端,所以特别利用了 FIS 的编译文件这个功能.既然没法做到完全的前后端分离,至少也要分离一部分吧. 首

bug描述 有一张数据库表存储的是 值日员工信息,有时候可能一次性录入1个月的数据.有时候也可能隔了很多天没有录入数据,也就是说这个录数据不是很规律. bug现象:测试人员发现,网站上三亚地区能正常显示当天值日员工信息,但是珠海地区却不能正确显示当天值日员工信息.而数据库上实际是有珠海地区值日员工信息的.更诡异的是在本地启动网站的时候珠海和三亚地区当天值日员工信息都能正常显示. 原因是因为,代码里面用了缓存,这个缓存持续时间6小时.三亚地区人员信息是早上9点录入的,珠海是下午3点录入的.当有人查

1. 背景 在一些项目中,有时候会出现不同模块重复请求大量相同api接口的情况,特别是在一些功能相似的后台管理页面中.以下面这几个页面为例,每次进入页面都需要请求等大量重复的下拉框数据,下拉框数据短时间内改动不大,但也不能在前端使用静态数据,所以可以考虑在前端进行数据缓存,避免重复请求api. 2. 实现思路 主要有以下3个步骤: 初次获取数据,从服务器中请求数据: 建立一个映射表,将下拉框数据保存起来,并同时记录该数据的时间戳: 后续再次请求时,首先从映射表中查找数据,如果可以查到数据且数据没

LAMP缓存图 从图中我们可以看到网站缓存主要分为五部分 服务器缓存:主要是基于web反向代理的静态服务器nginx和squid,还有apache2的mod_proxy和mod_cache模 浏览器缓存:包括页面html缓存和图片js,css等资源的缓存 PHP缓存:有很多免费的PHP缓冲加速工具,如apc eaccerlertor等 内存缓存:主要是采用memcache这种分布式缓存机制 数据库缓存:通过配置数据库缓存,以及数据存储过程,连接池技术等 下面重点介绍浏览器缓存原理: 从上图:我们

问题描述 先说背景.网站是用PHP开发的,未用任何框架,代码结构也非常简单.运行于阿里云服务器,并采用其CDN来做分发.根据业务需求,有的页面会判断用户浏览器类型,依此来选择PC或者手机端内容. 在一次上线过程中,遇到比较诡异的问题:用PC和手机分别访问页面时,网页内容未根据浏览器类型来区分.而在开发环境,页面却能正常显示.仔细排查了代码,没有发现问题出在什么地方.而线上环境也不好调试,只能靠猜了. 解决过程 开发环境一切正常,说明代码出问题的可能性不大(当然后面发现还是代码的问题~).而线上与

目录 一.Array对象的indexOf() 二.使用jquery,clone()下拉框问题 三.jquery获取获取html5的data-*属性 一.Array对象的indexOf() 1.indexOf()定义: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 2.bug描述 var arr = ["1","2"];console.log(arr.indexOf(1)); // -1 为何是-1? 3.解释 indexOf()  会做

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性.但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等.下面就展示一下具体做法:首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent然后我们的模板文件是利用el-dialog和el-upload两个组件组合:这里停止文件自动上传模式:auto-upload=

摘要:之前项目中导出价格表是由后端实现,前端只需要调用接口下载word即可,后来业务改变比较大,word模版需要一直改动,后端改起来相对麻烦,后来直接前端自己定义模版,实现下载word文档. 一.需要安装的依赖 1.docxtemplater 介绍:docxtemplater是一种邮件合并工具,它以编程方式使用,处理条件.循环,并且可以扩展为表格.HTML.图像等. 安装方法:cnpm i docxtemplater@^3.9.1 2.FileSaver 介绍:FileSaver.js 是在客户

1,根据报错信息定位: (1) Uncaught TypeError: Cannot read property 'attr' of undefined; 此类型为变量或者对象属性未定义类型. (2) Uncaught TypeError: a.map is not a function: a.map不是函数,说明a不是数组,只有数组才有map方法. (3) Uncaught SyntaxError: Invalid or unexpected token: 这种一般是js的代码格式错误. 2,