2

有没有办法学习 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 在浏览器中的运行方式。

4

3 回答 3

2

一如既往，所采取的优化步骤取决于编译器。我知道SpiderMonkey有很好的文档记录，开源，我相信 JIT 编译。您可以在浏览器之外使用它进行修补，这样在试验时就少了一个需要处理的黑匣子。我不确定是否有任何方法可以在编译代码运行时转储它以查看它如何在您的代码中进行优化，但是由于没有 Javascript 中间表示的标准概念（就像 .NET/Java 字节码一样）它无论如何都会特定于引擎。

编辑：通过更多研究，您似乎可以让 SpiderMonkey转储其字节码。但是请注意，优化可以在生成字节码的解释器和使用/编译/执行字节码的 JIT 编译器中进行，因此您仅了解可能发生的任何优化（Java 和 . NET 字节码）。

于 2012-12-11T23:29:59.790 回答
1

V8 does some amazing things internally. It compiles to machine code and creates hidden classes for your objects. Mind-blowing details here: https://developers.google.com/v8/design

Ofcourse when it comes to the DOM, performing lookups can only go that fast. Which is why chaining or temp variables can make a difference, especially in loops and during animations.

Besides that, using the right selectors can be helpful. #id lookups are undoubtedly the fastest. Simple tagname or class lookups are reasonably fast as well. jQuery selectors like :not can't fall back on builtins and are considerably slower.

Besides reducing lookups, another good rule of thumb with the DOM is: If you need to do a lot of DOM manipulation, take out some parent node, do the manipulations, and reinsert it. This could save a whole lot of reflows/repaints.

于 2012-12-11T23:53:34.270 回答
0

是的，您将获得性能提升。DOM 没有被查询两次，只实例化了一个 jQuery 对象。

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

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

并且该.css方法也可以接受一个对象：

$('#div1').css({'background-color': 'red', 'color': 'white'});
于 2012-12-11T23:49:55.673 回答