如何解决浏览器缓存

你是否遇到过:改了css,改了js,替换了图片,但是没有生效的情况呢?

这个问题其实是浏览器缓存了css,js,和图片所造成的

解决方案:

1:如果你是前后端分离的开发模式,那么使用webpack等打包工具生成md5就可以解决了,这个方案是目前的主流方法。


但是,现在还存在大部分并非是前后端分离的项目需要我们维护

那么,我们可以通过使用一些脚本语言来动态改变对应url的版本号来解决


贴上php代码:


<?php
/* 
Creat by xiaolu289 2017/9/7 11:19
该脚本解决更换图片后浏览器还是旧图片的问题
*/
$baseDir = __DIR__;
$publicDir = "{$baseDir}/Public";
$viewDir = "{$baseDir}/Application/Home/View";
$cssDirs = array(
"{$publicDir}/css",
"{$publicDir}/mobile/css",
);
$imgReg = "/([\w-]+\.(?:png|jpg|gif))(?:\?[\w]+=[\w]+)?/";
$cssReg = "/([\w-]+\.(?:css))(?:\?[\w]+=[\w]+)?/";
$VERSION = time();
/* 
队列方式遍历文件夹
参考链接:http://blog.youkuaiyun.com/nuli888/article/details/52144752
*/
function read_dir_queue($dir){
    $files=array();
    $queue=array($dir);
    while($data=each($queue)){
        $path=$data['value'];
        if(is_dir($path) &&$handle=opendir($path)){
            while($file=readdir($handle)){
                if($file=='.'||$file=='..')
                    continue; 
                $files[] = $real_path=$path.'/'.$file;
                if (is_dir($real_path))
                    $queue[] = $real_path;
            } 
        } 
        closedir($handle);
    } 
    return $files;
}
// 遍历所有css目录
foreach($cssDirs as$item){
    $cssFiles = read_dir_queue($item);
    foreach($cssFiles as$item){
        if(is_file($item)){
        // 设置版本号
        $fileContent=file_get_contents($item);
        file_put_contents($item,preg_replace($imgReg,"$1?v={$VERSION}",$fileContent));
        }
    }
}
// 遍历view目录
$viewFiles=read_dir_queue($viewDir);
foreach($viewFiles as$item){
    if(is_file($item)){
        // 设置版本号
        $fileContent=file_get_contents($item);
        $fileContent=preg_replace($imgReg,"$1?v={$VERSION}",$fileContent);
        file_put_contents($item,preg_replace($cssReg,"$1?v={$VERSION}",$fileContent));
    }
}
        

浏览器缓存是为了提高网页加载速度而存在的一种机制,但它有时会导致用户看到过时的内容。以下是几种常见的解决浏览器缓存问题的方法: 1. **强制刷新**: - 在大多数浏览器中,可以通过按下 `Ctrl + F5`(Windows)或 `Cmd + Shift + R`(Mac)来强制刷新页面并清除缓存。 2. **清除浏览器缓存**: - 手动清除浏览器缓存可以解决大多数缓存问题。不同浏览器的清除方法略有不同,但通常可以在设置或历史记录中找到清除缓存的选项。 3. **使用HTML元标签**: - 在HTML文件的<head>部分添加以下元标签,可以告诉浏览器不要缓存页面: ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> ``` 4. **配置服务器缓存头**: - 服务器可以通过设置HTTP头来控制缓存行为。例如,使用Apache服务器时,可以在.htaccess文件中添加以下代码: ``` <IfModule mod_headers.c> Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires "0" </IfModule> ``` 5. **版本控制**: - 在引用静态资源(如CSS、JavaScript文件)时,可以在文件名后添加版本号或哈希值。例如: ```html <link rel="stylesheet" href="styles.css?v=1.0.1"> <script src="script.js?v=1.0.1"></script> ``` 这样,每次文件更新时,浏览器会将其视为新的资源,从而加载最新的版本。 6. **使用Service Worker**: - Service Worker可以更精细地控制缓存行为。通过编写自定义的Service Worker脚本,可以实现更复杂的缓存策略。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值