javascript - 在Javascript中通过ID获取元素的效率？

Question

我注意到我在代码的许多不同位置重复了这行代码：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

首先，我想知道这对性能的影响。例如，在我经常调用的重绘代码中，我就是这样做的。同样，我可以使用 JQuery 来获取对元素的引用。

我想知道这有多大的交易。我不确定如何正确描述网站。我想以某种方式创建对上下文的全局引用，但是当我尝试在全局范围内执行它时它不会运行。拥有一个懒惰地返回对画布的引用的函数的唯一方法是什么？

Answer 1

立即停止在您的绘图代码中执行此操作。停止在你的绘图代码中做类似的事情。

将上下文保存在某处并将上下文传递给您的绘图代码（就像我刚刚制作的这个 5 美分示例一样）。

“触摸” DOM 很慢。慢。随便你切片。尽量少做。Zakas在高性能 JavaScript中深入讨论了这个主题。

如果您关心 JavaScript 性能，您绝对应该看看这个标题。