环境
前几天在下午,检测同学们意见反馈工作环境有一个作用发现异常,随后给我发过来张出错截屏。
之后在检测同学们的计算机重现并查找问题,根据出现异常中断点,捕获异常信息如下所示:
能够看见出现异常的原因是因为 n.path
数值为 undefined
,因而 n.path.find
等额的于 undefined.find
,因而程序流程出错。在其中 n
是一个 Event
案例;path
是事件冒泡通过的节点所组成的二维数组。n.path
有系数的情况如下:
Event.path
并不是规范特性,多见于 chrome
电脑浏览器,取不上值发现异常不奇怪,只需做一个适配就搞定,当 Event.path
取不上值后就取 Event.composedPath()
。那么这是兼容问题吗,事儿好像并没有那么简单。细心比照以上二张截屏不难发现,出现异常时 Event
案例乃至不会有 path
特性,这与特性存有但值为空是两回事。
进一步清查
好好地 path
特性为什么就洗劫一空了,这是一个奇妙的难题。当我就用自身计算机试着重现问题的时候,发觉作用正常的且不能重现,事儿变得越来越奇妙。两侧电脑浏览器都升到最新版本 chrome 108,区别在于系统软件不一样,一个是 windows
一个是 macOS
。其实就是 说一样的代码在相同app上跑出了不一样结论,这表明或许不是编码或兼容问题。
为找到真正意义上的缘故,做了多组对照组,以清除编码、硬件配置、电脑操作系统和浏览器危害。情况如下 :
A 组 | B 组 | 结论 |
---|---|---|
检测同学们计算机 win10、chrome 108 | 其他电脑 win10、chrome 108 | A 组出现异常,B 组正常的 |
其他电脑 macOS、chrome 108 | ||
检测同学们计算机 win10、edge 108 | ||
检测同学们计算机 win10、chrome 104 |
剖析这种结论,出现更有趣的事:只有一种状况会发现异常,应用检测同学们的计算机且电脑浏览器是 chrome 108;当更改计算机、系统软件、电脑浏览器、浏览器版本等多种因素时结果还是正常的。 换句话说造成异常要素竟然并不是单一的,只是好几个要素组成(检测同学们计算机 chrome 108 版本号)所产生的结论。
chromium issue 的助功
从上面的结论看好像也没方法继续清查下来,但是从经验判断,多半都是 chrome 还在搞事情,此刻能去 chromium issue 里寻找真相,经过一番检索找到这一条 issue: Issue 1277431: Remove event.path。
issue 文章标题很直接,Event.path
将被删除。 从 issue 具体内容能够看见,此次搞事情是以 2021 年 12 月 7 日逐渐,起因于 chromium 开发团队觉得 Event.path
归属于非标 API,也会导致 Firefox 等其他浏览器的兼容问题,于是他们确定把它删掉。目前这个变动在 chrome 108 归属于灰度值环节,在刚刚公布的 chrome 109 上面全方位运用,webview 则是从 109 版本号开始逐步禁止使用。
变动详细信息及计划
此外 issue 中指出这一变动会到 console 内进行报警。
console 中的确有这一报警,但是藏到 console 面板的右上方,没那么容易发觉,且需要启用 Event.path
之后才会表明。点进去之后会跳转 Issues 控制面板并表明详细资料。
由图中可以看出这一变动归属于 Breaking Change,即毁灭性变动。此外能够看见变动详细信息连接和版本号方案连接。开启变动详细信息连接能够看见详尽的表明、目地、情况、设计阶段等相关信息。
开启版本号方案连接能够看见,chrome 108 早就在 2022-11-29 正式公布(Stable Release Tue, Nov 29, 2022),chrome 109 将于 2023-01-10 正式公布(Stable Release Tue, Jan 10, 2023)。
认证
因为英语水平比较有限,为了防止个人见解存有分歧,应用 chrome 的前瞻版本号进行测试,以认证 chrome 108 以后的版本号是不是真的会运用这一变动。
- 检测所使用的系统为 macOS,浏览器版本包含:chrome-stable(108.0.5359.124)、chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)。
- 测试程序如下所示
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script> function test() {
console.log("event.path is:", window.event.path);
}
</script>
<h1 onclick="test()">click me</h1>
</body>
</html>
- 检测结果如下所示
chrome-stable(108.0.5359.124)在 macOS 下 Event.path
有值,融合上文的对照组中 windows10 下一个有值一个为空。表明 chrome 108 中该变动归属于灰度值环节。
chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)在 macOS 下 Event.path
都为空,表明 chrome 109 以后全方位删掉了 Event.path
特性。
解决方法
首先看影响程度,从项目层面来说,全部前端项目都会受影响;从编码层面来说,项目源码和第三方依靠都会受到影响。在 github 中搜索发现 swipper
、openlayers
等第三方库里都有有关 issue。因而解决方法必须全方位考虑到:最好是对所有项目都逐一排查修补,此外不但要清查源代码,还要考虑到第三方库。
依据官方网提议及充分考虑,强烈推荐在前端项目中统一加上如下所示 polyfill 编码:
Object.defineProperty(Event.prototype, "path", {
get() {
return this.composedPath();
},
});
最终
chrome 109 预计 2023-01-10 正式公布,到时候会全方位禁止使用 Event.path
,全部源代码中使用这个特性或第三方库使用这个属性前端项目都有可能出现出现异常,也有 20 几天时间,提议尽早清查修补。
一些经验
- 关心 devtools 里的 console、issue 等各类报警信号,有利于调节和查找问题、及其发觉隐性的难题
- 关心 chorme 迭代计划,如果有条件能做创新性检测,防止将来可能出现的出现异常