web 系统兼容低版本浏览器

web 系统兼容低版本浏览器

web 前端或 H5 移动端在开发面向大众的 web 软件时，会不可避免的遇到处理浏览器兼容性的问题。

若在软件开发启动前，已明确要兼容的浏览器种类及相应的最低版本，这时前端技术选型需要考虑不同前端框架会带来这方面的影响，有些硬性指标需要关注的。

比如 vue2 双向绑定底层依赖的Object.defineProperty 只兼容 IE9 及以上版本，vue3 双向绑定底层依赖的Proxy直接放弃 IE 浏览器。废话不多说，切入正题，本文会大概通过以下三步骤介绍处理浏览器的兼容性问题。

1. 收集正在或将要使用的已知 js API 兼容的浏览器及最低支持版本，取交集初步判断
2. 大概确定要支持的浏览器种类及最低版本，使用 babel 和 polyfill 应对新语法和 jsapi
3. 下载安装不同浏览器的不同版本，测试验证，解决 bug

为方便说明，这里以使用 vue3 技术栈为例展开介绍

1. 收集正在或将要使用的 js 新功能特性

查阅最新语法或 api 的浏览器兼容性，请访问 caniuse

特性功能\浏览器	Chrome	Edge	Firefox	Safiri
Webassembly	57	16	52	11
Proxy	49	12	18	10
resizeObserve	64	79	69	13.1
replaceAll	85	85	77	13.1
globalThis	71	79	65	12.1
??	85	85	79	14
esm	61	16	60	11
import	63	79	67	11.1
export	61	16	60	10.1
es6	51	15	54	10

区分哪些是硬性指标（无法通过现有技术解决），哪些是高级语法，可降级处理；哪些是新 api，可通过 babel/polyfill 处理。

• Proxy、webassembly 是硬性指标，不能低于此版本
• resizeObserve、globalThis、es6 方法，是新 api，可借助 polyfill 兼容处理
• ?? 属于新语法，可通过 babel 结合 preset/env 转译代码降级处理
• import 和 export 支持按需加载，结合打包工具的tree-shaking功能，可极大提高性能

为兼容低版本浏览器，又可享受现代浏览器原生 api 带来的性能优势，综合考量，建议 chrome 64、edge 79、firefox 69 、safiri 13.1

2. babel+polyfill 兼容处理方案

此处参考 babel 练习

3. 下载安装不同浏览器的不同版本

付费方案：browserstack, 覆盖几乎全平台全浏览器

免费方案如下，折腾但省钱

Chrome

• 历史版本下载地址
• mac os 安装多个版本的 chrome
• 防止 chrome 强制自动更新
  找到 chrome 的自动更新程序的目录并完整的移出来，可全局搜索关键词GoogleSoftwareUpdate，比如 mac 系统的自动更新目录/Users/chendq/Library/Google

Firefox

mac 中可直接下载安装多个不同的版本。
历史版本下载地址