Question

我有一个网站，对移动和桌面设备的行为方式不同。我可以使用这个选择器来选择触发功能：

if($(window).width < 768) {
    // fire functions for mobile
} else {
    // fire functions for desktop
}

如果我在占位符中写了很多东西，这个代码段是如何工作的？它是否会跳过整个if或else代码（以减少加载时间）？

我应该创建这样的变量函数，保持它干净，还是应该触发if {} else {}函数的所有内容？

// Is this one better?
if ($(window).width() < 768) {

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code

} else { 

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}

// Or this one?
var mobileFunctions = function() {

    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}
var desktopFunctions = function() {
    // $('something').something();
    // var another = $('another');
    // another.something();
    // lets guess lots of stuff to do here
    // like 200 lines of code
}
if ($(window).width() < 768) { 
    mobileFunctions();
} else { 
    desktopFunctions();
}

Answer 1

简短而最佳的答案：首先编写代码以使其清洁和可维护，并在需要更快速的情况下对其进行分析和测量。

那就是说，我认为你会对那些永远不会出现在探查器中的区域感到烦恼。如果您担心功能调用的成本超过200行代码，那么就像担心赛车上的污垢会让它变得慢一点当你可以调整引擎时更重。

可能值得担心的微观事物（在测量之后）将是缓存友好的内存访问和有时（很少）分支预测。当您为微效率进行调整时，您通常也希望寻找大循环，例如在循环中执行了一百万次的一小段代码。

至于if语句的性质，这通常会接近免费。我们这些天使用的硬件试图预测您的说明将要做什么。当预测正确时，分支成本降至零或接近。在您的情况下，移动设备永远不会成为桌面，桌面永远不会在应用程序运行时成为移动设备，因此它可以完全播放到分支预测器。

关于一般的功能调用，一般来说，你不应该考虑它们的成本，而且在你对代码进行概要分析之前，你不应该这样做。但有时拥有更多功能实际上可以加速你的代码，因为它听起来很直观。如果您将大量代码嵌入到单个整体函数中，那么您可能会因增加的icache未命中而阻碍性能（有点像C或C ++等语言中的过度内联）。

它都是特定于编译器的，如果你的JIT是一个跟踪编译器，那么情况就大不相同了。但是特别是因为编译器在这个世界上变化很大，性能的最佳机会往往取决于以更正常的方式编写代码（不要将数百行代码转储到一个函数中以避免函数调用）。这应该是您的基线，默认编写代码的方式，直到您的测量结果告诉您可以选择性地调整特定区域。简而言之，即使从纯粹的性能角度来看，你也常常更倾向于采用一种更易于维护的编写代码的方式，而不是基于对缺乏任何测量的性能的先入为主的预感来开始对其进行混淆。

为不同窗口大小触发不同功能的最佳方法

1 个答案: