javascript - 一个长 If 条件与许多带有检查点的较小条件

Question

TLDR:更好的是:一个长的 if...else，每个条件都有很多相似的代码，或者许多更小的 if...else code> 具有多个检查点的语句。

这个问题可能会扩展到许多语言，但 JavaScript 是我立即应用这个想法的地方。

在优化我的 JS 时，我遇到了一个巨大的 if...else 条件。 if 和 else 都共享一些代码，它们根据条件确定的变量执行特定函数，然后继续执行特定于条件的函数。这是一个示例:

var w  = $(window).width();

if (w > 1024) {

    var ww        = w/2;
    $(".container").width(ww);

    foo(); // represents long, in-common set of functions

    var imgWidth  = ww/3;
    $(".container img").width(imgWidth);

} else {

    var ww        = w/3;
    $(".container").width(ww);

    foo(); // represents long, in-common set of functions

    var imgWidth  = ww/4;
    $(".container img").width(imgWidth);

}

foo() 表示一个常见的中点/检查点函数，它可能与声明的变量的值无关，但本质上依赖于它们的执行。在我的实际代码中，foo() 表示许多连续发生的常见函数，迫使我要么编写一个大量的 if...else，要么一路上编写许多较小的检查。我的问题是，这是更好/更快的方法吗:

var w  = $(window).width();

if (w > 1024) {

    var ww        = w/2;
    $(".container").width(ww);

} else {

    var ww        = w/3;
    $(".container").width(ww);
}

foo(); // represents a checkpoint with long, in-common sets of functions

if (w > 1024) {

    var imgWidth  = ww/3;
    $(".container img).width(imgWidth);

} else {

    var imgWidth  = ww/4;
    $(".container img).width(imgWidth);

}

从视觉上看，我理解这是这两个模型之间的竞争:

我知道如果这些函数变得复杂并且有许多常见的检查点，则可能会创建更大的文件大小，但这里的性能远比几个额外的字节更重要。什么更好(更快)？

Answer 1

你所说的性能是指处理器性能吗？考虑到各种Javascript引擎JIT技术、处理器分支预测等，两种情况之间的差异不会在测量误差范围内。选项B天真地拥有更多分支，但这并不一定会影响性能。设计代码时应考虑到人类可读性，并且在分析器告诉您该部分代码存在问题之前，不要担心性能差异。