性能问题

[Long0x0]

之前注意到翻译段落很多的页面会卡死，比如hackernews，整个电脑都会卡住。一直以为是翻译请求过多导致的，最近有空debug了一下，感觉与滚动加载翻译使用的IntersectionObserver有关。

测试代码： intersection-observer-test.html.txt 这段代码模拟了滚动加载翻译，但固定了翻译框高度，滚动条可以自由拖动，不会卡。如果注释掉height: ${target.offsetHeight * 2}px;，就会异常卡顿。 推测翻译完成后翻译框的高度变化，导致页面布局移动，触发了IntersectionObserver重新计算。

另外我这边只在chrome上卡顿，firefox上非常丝滑，可能是firefox的内部实现更高效？还是我的电脑的问题呢。 麻烦作者测试一下，谢谢~

[fishjar]

1、感谢你的调试工作。 2、你的样例在我的电脑可以自由拖动滚动条，并不卡。可能和电脑性能有关，你看下CPU和内存的使用情况，或者升级chrome版本试试，或者用隐身模式排除其他插件干扰试试。 3、滚动加载翻译以及动态变化重翻译这块的逻辑代码很久没动了，确实有优化提升空间，尤其动态变化重翻译对某些网页的性能影响可能更大，当时写的时候就加了todo的注释，需要再研究下。

[Long0x0]

找到问题了。用terminal启动了一次chrome，发现竟然不卡了，原来是我的快捷方式加了--force-renderer-accessibility。 类似的issue：Web accessibility设置导致严重的性能下降 https://issues.chromium.org/issues/40758763 。

[fishjar]

那这就是浏览器的原因了。

不过目前动态变化重翻译的逻辑确实是以牺牲性能的方式来更广泛的适配不同网页情况，毕竟首先要能翻译动态内容，再谈性能。