zoukankan      html  css  js  c++  java
  • 浏览器端缓存的一个小问题及解决方案

    浏览器的缓存行为可以提高网页的加载速度,但有时也会带来一些困扰。当用jQuery的get方法异步调用服务端资源的时候,浏览器会把调用结果进行缓存,拿不到实时的数据影响代码的逻辑实现,这种情况最简单的解决方法是在请求的链接后加一个随机数参数,或者用jQuery的ajax方法并设置cache为false。

    但上面两种总感觉不太完美,项目中大量的使用了ajax,每一个都加一个随机参数,想想都蛋疼;使用$.ajax并设置cache为false的方式,多少有些繁琐,而且难免有开发人员忽略这个问题使用了$.get引起bug。

    于是决定使用jQuery.ajaxSetup()方法,全局禁用浏览器端缓存。在一个全局的js脚本中增加以下代码:

     $.ajaxSetup({ cache: false });

    新问题随之而来,这种方式不仅禁用了一般请求的缓存,也禁用js脚本文件的缓存,项目中的js文件比较多,再加上使用了大量的第三方的前端组件,每次刷新页面,这些js都要重新加载一遍,页面响应直接由原来的流畅变为龟速了。

    有没有办法禁用ajax的缓存,保留脚本文件的缓存呢?

    在jQuery官方文档上找到了这个方法 jQuery.ajaxPrefilter,可以对不同请求类型分别进行配置,于是可以全局禁用缓存,然后针对script开启缓存,最终代码如下:

    $.ajaxSetup({ cache: false });
    $.ajaxPrefilter('script', function (options) { options.cache = true; });

    对于脚本的缓存,还有一个问题需要注意,如果浏览器缓存了该脚本,而服务端有修改了这个脚本,可能会引起一些错误。对脚本文件的url加一个版本号可以解决这个问题,每次修改了脚本后只需要递增这个版本号即可。如果使用mvc的Bundle来管理js文件的话就不用考虑这个了,把web.config的开关设置为release之后,Bundle框架会自动处理js文件的版本问题。

  • 相关阅读:
    VUE中全局变量的定义和使用
    Pull Request 工作流——更高效的管理代码
    仓储repository概念
    Mysql存储过程历史表备份
    OpenStack一键安装
    VMware虚拟机设置Win10固定ip
    C#_NPOI_Excel各种设置
    pycharm修改镜像
    C#模拟POST上传文件帮助类(支持https、http)
    Windows安装RabbitMQ
  • 原文地址:https://www.cnblogs.com/FuzhePan/p/3976983.html
Copyright © 2011-2022 走看看