学习JavaScript如何优化执行（如果有的话）

有没有办法学习如何解释和执行JavaScript？例如，在.NET或JAVA中，您可以查看生成的字节码，在C中，您可以查看生成的汇编指令，但从我收集的信息来看，JavaScript是逐行解释的，然后它在不同浏览器的JS引擎上发生变化

还有没有办法学习JavaScript是如何做到这一点的？现代浏览器中的解释器是否像编译器一样倾向于前瞻和优化

例如，如果我这样做了：

$('#div1').css('background-color','red');
$('#div1').css('color','white');

我是否可以通过以下操作获得性能增益：

var x = $('#div1');
x.css('background-color','red');
x.css('color','white');

---

这个问题的重点是获取一些信息，了解如何在浏览器中运行JavaScript。

所采取的优化步骤通常取决于编译器。我知道这是一个相当好的文档，开源的，而且我相信JIT编译是可以做到的。您可以在浏览器之外使用它进行修补，这样在试验时就少了一个黑匣子。我不确定是否有任何方法可以在编译后的代码运行时转储它，以查看它在代码中如何优化，但由于没有Javascript的中间表示的标准概念（就像.NET/Java字节码一样），因此它将特定于引擎

---

编辑：通过更多的研究，你似乎可以找到SpiderMonkey。但是，请注意，优化可以在生成字节码的解释器和使用/编译/执行字节码的JIT编译器中进行，因此您对可能发生的任何优化只有一半的了解（Java和.NET字节码也是如此）。

是的，您将获得性能增益。DOM不会被查询两次，只实例化一个jQuery对象

然而，您不应该为了性能（增益可以忽略不计），而是为了代码质量。此外，您不需要变量，jQuery支持链接：

$('#div1').css('background-color','red').css('color','white');

并且，用户还可以获取一个对象：

$('#div1').css({'background-color': 'red', 'color': 'white'});

---

V8在内部做了一些惊人的事情。它编译为机器代码，并为对象创建隐藏类。令人兴奋的细节如下：

当然，当涉及到DOM时，执行查找只能走那么快。这就是为什么链接或临时变量会产生影响，特别是在循环和动画中

除此之外，使用正确的选择器也会有所帮助#id查找无疑是最快的。简单的标记名或类查找也相当快。jQuery选择器，比如：not，不能依赖于内置，而且速度相当慢

---

除了减少查找，DOM的另一个好的经验法则是：如果需要进行大量DOM操作，请取出一些父节点，进行操作，然后重新插入。这可以节省大量回流/重新喷漆。

是的，可以。对于同一个元素，您不会两次查询DOM。在这个具体的例子中，差异可能可以忽略不计。

$（'#div1'）.css（{'background-color'：'red'，'color'：'white'}）

是最佳解决方案，因为它的字节数更少，而且它们对JS文件加载的影响远远大于您提供的示例的执行差异。您在这里所做的是等式推理。您假设函数调用

$（'#div1'）

的结果在这两行之间没有变化。你不能用像JavaScript这样有效的语言做出这些假设，编译器也不能。这是一个简单的例子，在第一种情况下，你将查询DOM两次，在第二种情况下只查询一次。。显然，第二种情况下缓存元素的速度会更快。。如果元素预期会更改，则可以在每次元素预期更改时对其进行缓存