请问, canvas转图片的代码为什么会阻塞其前面执行的dom操作?

Question

这里的$loading就是一个弹出层式的加载动画, 现象是 $loading每次都会没办法直接显示, 被卡住了的感觉, 如果屏蔽其下的代码, 那么显示就很流畅, 不解 ,求解惑, 谢谢

补充: canvas里我放的是svg字符串, 通过屏蔽代码, 就是image2DataURL这行产生的卡顿前一句代码

由于用了await 所以也没有办法用setTimeout, $nextTick一类的把逻辑放到最后执行

---

暂时解决:

给$loading加了一个callback(显示完成后触发), 暂时问题解决, 但是不完美, 而且也不知道原因, 求大神给分下下问题的原因

猜测:

由于$loading的显示隐藏是css3控制的, 是不是用canvas的api会阻塞css图形处理?

Answer 1

把下面代码放在settimeout(fn,0) 试一下