The learn-in-action from ly525

Hi there 👋

🔭 I'm currently working on the crm web and low code in YMM.
🌱 I’m currently learning Node/Python/UE(user experience).

You can also read my articles in blog

learn-in-action's People

Contributors

Stargazers

Watchers

learn-in-action's Issues

Is Chrome ignoring Cache-Control: max-age?

var express = require('express')
var path = require('path')

// 此模块是 express 的依赖项
var serveStatic = require('serve-static')
var logger = require('morgan');

var app = express()
app.use(logger('dev'));


app.use(serveStatic(path.join(__dirname, 'public'), {
  maxAge: 360 * 1000,
  setHeaders: setCustomCacheControl
}))


function setCustomCacheControl (res, path) {
  if (serveStatic.mime.lookup(path) === 'text/html') {
    // Custom Cache-Control for HTML files
    res.setHeader('Cache-Control', 'public, max-age=360000')
  }
}

module.exports = app

场景：在此项目中，直接请求：http://localhost:3000/stylesheets/style.css发现：

即使对 style.css 设置了 Cache-Control: public, max-age=360 F5 刷新页面发现，虽然是强缓存(Expire 或 Cache-Control)，但状态码是 304，而非200，发现走了协商缓存(Etag)

有点茫然了，搜了下，有些资料可以参考：

Chrome appears to be ignoring your Cache-Control settings if you're reloading in the same tab：https://stackoverflow.com/questions/11245767/is-chrome-ignoring-cache-control-max-age

按照资料来尝试，新开一个 tab，然后粘贴 url，Enter，发现走了强缓存，感觉如果是刷新同一个 Tab，Chrome 会对当前 URL 代表的资源忽略 Cache-Control
但该中链接的其它资源，仍然遵循强缓存等策略，当然如果该链接指向该 html 本身，点击该链接，自然也会遵循强缓存策略

html demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Page</title>
</head>
<body>
    <p>
        <a href="self.html">Link to the same page.</a>
        If correctly cached, a request should not be made
        when clicking the link.
    </p>
</body>
</html>