如何用JavaScript获取浏览器Accept-Encoding编码支持列表？

当然可以通过浏览器提供的API或相关能力获取编码支持信息，进而为CDN资源选择合适的扩展名，以下是几种实用方案：

1. 用TextDecoder检测字符编码支持 #

现代浏览器原生支持TextDecoder API，可以直接检测某个字符编码是否被支持，这是判断字符编码兼容性最直接的方式：

function checkEncodingSupport(encoding) {
  try {
    new TextDecoder(encoding);
    return true;
  } catch (error) {
    return false;
  }
}

// 示例：检测是否支持GBK编码
console.log(checkEncodingSupport('GBK')); // 返回true表示支持，false则不支持

你可以用这个方法遍历常用编码（如UTF-8、GB2312、ISO-8859-1等），筛选出浏览器支持的编码，再对应到文件扩展名（比如.utf8、.gbk）。

2. 通过navigator获取语言偏好编码 #

navigator.languages会返回浏览器设置的优先语言列表（比如["zh-CN", "en-US"]），这些语言对应的默认编码可以作为扩展名选择的参考：

• 中文环境通常对应UTF-8或GBK
• 英文环境通常对应UTF-8或ISO-8859-1
  你可以结合这个列表，优先选择和用户语言匹配的编码扩展名。

3. 针对资源类型的格式检测 #

如果是图片、字体这类特殊资源，它们的“编码”更多对应格式标准，你可以通过DOM测试来判断支持性：

• 图片格式：创建<img>元素，尝试加载对应格式的测试图片，根据是否成功加载判断支持性：

function checkImageFormatSupport(format) {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    // 用data URL测试，避免跨域问题
    img.src = `data:image/${format};base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
  });
}

// 示例：检测WebP支持
checkImageFormatSupport('webp').then(supported => {
  if (supported) {
    // 选择.webp扩展名的CDN资源
  }
});

• 字体格式：使用document.fonts.check()检测字体格式支持，比如判断WOFF2是否可用：

const isWOFF2Supported = document.fonts.check('1em woff2');

4. 结合HTTP请求头（后端辅助） #

浏览器发起请求时会在Accept-Charset头中声明支持的编码列表，你可以在后端读取这个请求头，将编码信息返回给前端，再由前端拼接对应的CDN文件扩展名。这种方式比纯前端检测更准确，因为它直接反映了浏览器本次请求的编码偏好。

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