Chrome 106版本升级后的Canvas Bug排查在国庆前答疑值班中发现一个很奇怪的问题，用户把chrome升级到

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情”

在国庆前答疑值班中发现一个很奇怪的问题，用户把chrome升级到了106 版本后，加载前端页面居然非常的卡顿，单次卡顿的时长已经长达8秒以上，极其影响用户体验，最终定位到是Canvas的锅，本文会详细说明卡顿的原因并给出临时解决方案。

初步定位

刚开始出现卡顿的时候以为是网络问题，但是用手机的热点连接的时候也有这个问题，于是就感觉是代码问题，这里安利一个插件：

这个插件能够禁用当前页面的所有JS执行。

当关闭页面的js后，就发现页面就不卡了，这下就能初步定位可能js被下毒了。

这时候我直接打开chrome的开发者工具，并切换到 Performance，刷新页面就出现如下情况：

页面会卡在这3秒不动，然后过了一会儿就继续走时间了，这时候点击Stop就会出现如下：

（因为是内部系统，一些敏感信息就加了马赛克）

可以发现CPU那一栏直接飚到顶了，HEAP内存消耗其实并不大，网络其实也是正常的，然后就接着往下拉看火焰图：

这一段诡异的卡顿代码最终定位到了toDataURL方法，再关联执行栈的一些信息，已经发现这逻辑肯定和Canvas相关：

如果你的表现形式和上面排查的链路一模一样，那么下面你就要认真听了。

根据上面的代码其实已经可以在本地开发环境中定位到具体的代码了，但其实还是无法知道具体是什么原因导致的，只是知道和Canvas有关，并且还是106版本升级带来的，105就不会。

系统里还有其他地方也用了Canvas的toDataURL方法，但是只有这个地方会有这样的表现，console也没有任何报错。

那么其实可以去官方的chromium bug列表里找找看：

搜索Canvas发现有个bug的表现非常接近：

总结下就是，如果你在页面里用canvas画了很多图，并且都用了globalAlpha方法，这时候就会出现卡顿，下面贴上这个评论里的测试链接：

右上角是当前页面的FPS情况，会发现开启globalAlpha的图片渲染，到60张图FPS就已经下降到了24了，用户已经感觉到明显的卡顿。

如果关闭globalAlpha，3000张图都没压力

附上globalAlpha的说明：

目前比较简单直接的解决方案就是用css的opacity来替换canvas的绘图透明度，FPS毫无压力：

后续肯定还是要等官方进行统一的修复。

本文希望能给国庆前还在排查问题的前端同学一些解答，最后 jym 国庆快乐！！！

创造不易，希望 jym 多多点赞 + 关注二连，持续更新中！！！

PS: 文中有任何错误，欢迎掘友指正

往期精彩📌

参考：