web 系统兼容低版本浏览器
web 前端或 H5 移动端在开发面向大众的 web 软件时,会不可避免的遇到处理浏览器兼容性的问题。
若在软件开发启动前,已明确要兼容的浏览器种类及相应的最低版本,这时前端技术选型需要考虑不同前端框架会带来这方面的影响,有些硬性指标需要关注的。
比如 vue2 双向绑定底层依赖的Object.defineProperty
只兼容 IE9 及以上版本,vue3 双向绑定底层依赖的Proxy
直接放弃 IE 浏览器。废话不多说,切入正题,本文会大概通过以下三步骤介绍处理浏览器的兼容性问题。
- 收集正在或将要使用的已知 js API 兼容的浏览器及最低支持版本,取交集初步判断
- 大概确定要支持的浏览器种类及最低版本,使用 babel 和 polyfill 应对新语法和 jsapi
- 下载安装不同浏览器的不同版本,测试验证,解决 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 中可直接下载安装多个不同的版本。
历史版本下载地址