如何判断浏览器中两个响应内容是否一致？PWA场景方案咨询

安全阿岳

2026-6-29

问题

在离线PWA中，我希望通过Service Worker处理文件/图片请求时执行以下操作：

从缓存中返回文件/图片
从网络获取该文件/图片
检查网络返回的文件/图片与缓存中的是否不同
若内容不同，则通过Confirm API提示用户是否更新

我需要针对步骤3的实现获取建议。目前我已编写代码，将响应转换为数字数组后通过比对数组元素判断内容是否一致，现咨询该技术是否合理，以及是否有更优实现方式。

我的代码

async function fetchAndCompareResponses() {
    const array1 = await getArray("/style.css")
    const array2 = await getArray("/style2.css")
    
    // gives false in this case because two files aren't the same
    const responsesAreTheSame = compareArrays(array1, array2)
    console.log(responsesAreTheSame)
}

function compareArrays (a, b) {
    // If the lengths differ, they can't be the same
    if (a.length !== b.length) return false

    // Check if the two arrays have the same elements at the same indices
    for (let i = 0; i < a.length; i++) {
        if (a[i] !== b[i]) {
            return false
        }
    }

    return true
}

async function getArray (url) {
    // Fetch response and convert it to an array
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    return new Uint8Array(buffer)
}

fetchAndCompareResponses()

测试文件内容

style.css：

p {
    color: blue;
}

style2.css（颜色不同）：

p {
    color: green;
}

回答

现有实现的合理性

你的方法是可行且正确的：

直接比对Uint8Array的内容能确保完全准确判断文件是否一致，没有歧义
实现逻辑简单直观，容易理解和维护

但它存在几个明显的缺点：

内存占用高：对于大文件（比如高清图片、大体积JS/CSS），需要把整个文件加载到内存中转为数组，会消耗较多内存
性能效率低：逐字节比对在文件较大时会增加CPU开销，尤其是在Service Worker这种资源受限的环境中
无法复用比对结果：每次都要重新加载整个文件并比对，没有缓存比对凭证的机制

更优实现方式

1. 利用HTTP响应头（优先推荐）

HTTP协议本身提供了用于资源校验的字段，不需要加载完整内容就能判断是否更新：

ETag：服务器生成的资源唯一标识，资源变化时ETag会改变
Last-Modified：资源最后修改的时间戳

实现思路：

从缓存中读取资源的ETag/Last-Modified值
发起网络请求时，在请求头中带上If-None-Match（对应ETag）或If-Modified-Since（对应Last-Modified）
如果服务器返回304状态码，说明资源未变化；返回200则说明资源已更新

示例代码：

async function checkResourceUpdate(url) {
    // 从缓存获取旧资源的响应头
    const cache = await caches.open('your-cache-name');
    const cachedResponse = await cache.match(url);
    if (!cachedResponse) return true; // 无缓存，视为需要更新

    // 构建带校验头的请求
    const headers = new Headers();
    const eTag = cachedResponse.headers.get('ETag');
    if (eTag) headers.append('If-None-Match', eTag);
    
    const lastModified = cachedResponse.headers.get('Last-Modified');
    if (lastModified) headers.append('If-Modified-Since', lastModified);

    const networkResponse = await fetch(url, { headers });
    if (networkResponse.status === 304) {
        return false; // 资源未更新
    } else {
        return true; // 资源已更新
    }
}

优点：无需加载完整资源，带宽和内存消耗极低，性能最优；符合HTTP标准，服务器端通常已支持。

2. 生成文件哈希值（适合无HTTP头支持的场景）

如果服务器没有返回ETag或Last-Modified，可以通过生成资源的哈希值（如SHA-256）来比对：

分别为缓存资源和网络资源生成哈希值
比对哈希值是否一致，一致则内容相同，否则不同

示例代码：

async function generateHash(buffer) {
    const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
    // 将哈希转为十六进制字符串
    return Array.from(new Uint8Array(hashBuffer))
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
}

async function compareByHash(url) {
    const cache = await caches.open('your-cache-name');
    const cachedResponse = await cache.match(url);
    if (!cachedResponse) return true;

    const cachedBuffer = await cachedResponse.arrayBuffer();
    const cachedHash = await generateHash(cachedBuffer);

    const networkResponse = await fetch(url);
    const networkBuffer = await networkResponse.arrayBuffer();
    const networkHash = await generateHash(networkBuffer);

    return cachedHash !== networkHash;
}

优点：比逐字节比对更高效（哈希值固定长度，比对只需一次字符串比较）；哈希值可以缓存，后续比对无需重新计算。

3. 优化原有的逐字节比对

如果必须使用原方法，可以做以下优化：

先比对文件大小（通过response.headers.get('Content-Length')），大小不同直接判定为内容不同，跳过后续比对
使用DataView或直接操作ArrayBuffer的二进制数据，减少类型转换开销

总结建议

优先使用HTTP响应头校验，这是最符合Web标准、性能最优的方案
如果无法依赖HTTP头，选择哈希值比对，在准确性和性能之间取得平衡
避免在大文件场景下使用逐字节比对的原方法，防止内存和性能问题

内容的提问来源于stack exchange，提问作者Kaasjongetje

如何判断浏览器中两个响应内容是否一致？PWA场景方案咨询

我的代码 #

测试文件内容 #

现有实现的合理性 #

更优实现方式 #