Javascript 画布大小对浏览器渲染的性能影响

我需要画一个相当大的图表“图表”可能会产生误导，因为它会有大量的小文本和颜色框，但由于没有更好的术语，我将把它留在这里，因为x轴比屏幕宽度长很多倍，我想知道如何实现这一点以获得最佳性能

a我在一个较小的div中绘制一个较大的画布，以便显示滚动条。这样，只有画布的一部分是可见的。如果浏览器足够智能，只渲染正在显示的画布部分，那么这将是最简单的选择

b我用自定义滚动条绘制一个较小的画布，当用户滚动时，重新渲染画布的内容。如果我的代码是智能的，我相信我可以节省一些渲染周期

---

所以我想我的问题是：浏览器是否足够聪明，能够明白它们必须只渲染画布中真正可见的部分？还是我最好重新渲染画布中应该可见的部分？

我建议在画布本身中实现滚动，而不是滚动大画布。为了回答你的问题：@Cristy谢谢，我确实读过这篇文章，但我觉得我的问题有点不同，因为我问的是画布上应该可见的部分。你的建议背后有什么道理吗？经验？它必须是画布吗？对于图来说，SVG可能是更好的选择……嗯，也许“图”有点误导。它会有很多文本和颜色框。我认为将其绘制到画布上比绘制数千个SVG元素更容易。性能是指速度、内存使用、处理器使用还是其他？你问题的答案可能是速度与资源之间的权衡。如果你想要更高的速度，你将需要更多的资源，内存+处理。例如，如果您的设备有一个GPU，并且您的整个画布加上其他网页元素将适合可用的GPU内存，那么您的渲染速度非常快，因为渲染减少到将一组像素从内存复制到GPU层。否则，您将消耗内存和处理以提高速度。底线：针对多个设备进行测试。