Nodejs环境下浏览器三种刷新的区别

Nodejs环境下浏览器三种刷新的区别

本文是新手扫盲，高手勿喷哦~

我们一直在用着浏览器刷新，其实刷新也是有一些小学问的哦，我们常见的三种刷新：

1. url+enter或者a标签的超链接点击
2. F5刷新
3. ctrl+F5刷新

这三种刷新究竟有何不同呢？举三个简单的例子大家就明白了。

条件

此url路径您已经使用浏览器最近访问过，并没有超过缓存的时间，比如您在前1分钟刚刚访问过此url路径。

1、url+enter或者a标签的超链接点击

当我们通过输入URL并按下回车键或点击一个超链接时，浏览器会检查本地缓存中是否有该资源。如果有，且缓存未过期，浏览器会直接从缓存中读取资源。

// 示例：设置缓存控制
app.get('/image', (req, res) => {
    res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存一小时
    res.sendFile(__dirname + '/path/to/image.jpg');
});

2、F5刷新

当我们按下F5键进行刷新时，浏览器会向服务器发送请求，但同时会带上缓存相关的头信息（如If-Modified-Since和If-None-Match），以便服务器判断资源是否需要更新。

// 示例：处理缓存验证
app.get('/image', (req, res) => {
    const lastModified = new Date(fs.statSync(__dirname + '/path/to/image.jpg').mtime).toUTCString();
    const etag = crypto.createHash('md5').update(fs.readFileSync(__dirname + '/path/to/image.jpg')).digest('hex');

    if (req.headers['if-modified-since'] === lastModified || req.headers['if-none-match'] === etag) {
        res.status(304);
        return;
    }

    res.set('Last-Modified', lastModified);
    res.set('ETag', etag);
    res.sendFile(__dirname + '/path/to/image.jpg');
});

3、ctrl+F5刷新

当我们按下Ctrl+F5键进行强制刷新时，浏览器会忽略所有缓存信息，直接向服务器请求资源。

// 示例：处理强制刷新
app.get('/image', (req, res) => {
    res.removeHeader('Cache-Control');
    res.removeHeader('ETag');
    res.removeHeader('Last-Modified');
    res.sendFile(__dirname + '/path/to/image.jpg');
});

总结发言

三种刷新的情况相信您已经全看明白了，百分之90%的用户是使用第一或者第二种的，所以缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control 让请求都不用发了，节约服务器资源，快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 ETag，因为一般此类资源体积都比较大，缓存做好的话可以提高不少效率。

当然不论是静态文件还是JSON数据或者是HTML数据都可以充分的利用浏览器缓存，只要你遵循HTTP协议。

最后广告时间

大家有时间多关注下Node.js的高性能RESTful框架rrestjs哦。

文章地址：http://club.cnodejs.org/topic/4f16442ccae1f4aa27001039

GitHub：https://github.com/DoubleSpout/rrestjs

新手入门：http://www.rrestjs.com/study