条件语句中的 Javascript 执行

Question

window.onresize = window.onload = function(){
  if(window.innerWidth < 480){
    document.getElementById('alert').onclick = function(){
      alert('<480');
    };
    //large amounts of code
  }
  if(window.innerWidth >= 480){
    document.getElementById('alert').onclick = function(){
      alert('>=480');
    };
    //large amounts of code
  }
}

<button id="alert">Alert</button>

上面代码中如果window.innerWidth大于480，javascript引擎会处理第一个if里面的代码吗？第二个 block 将被执行，我将在内存中拥有函数并分配给 #alert.onclick。问题是另一个(假)条件内的 函数 是否会在内存中存在，因为变量可能就像一个悬空引用，或者该函数是否仅在条件为真时才被引导？

这是为了了解如果移动代码位于这样的条件语句中并且相当大，那么在窗口加载时处理的初始代码量方面是否有任何优势。。

我很高兴看到有关如何引导函数、分配堆栈以及何时分配的任何文档。

Answer 1

是的，所有代码都会被解析

不，并不是所有的代码都会被处理/执行。

您正在做的是条件分配。加载和调整大小

意味着如果函数调用加载/调整大小的条件为真/假，则将相应地设置/覆盖 onclick 属性。

赋值和声明有区别

作业:

assigned = function(){ console.log("blabla") }

声明:

function declared(){ console.log("blablabla")}

函数声明将是 hoisted (你所描述的“在实际执行之前解析并存储到内存中”)，所以:

您询问性能，因此您的实际问题取决于您所描述的“大量代码”。如果您不是在谈论中间有大量函数声明的 1mb js 代码……不用担心。

请注意，永远不要尝试使用 alert() 调试您的 js因为除非您与弹出窗口进行交互，否则它将停止所有执行。意味着如果您的警报在宽度 > 479 时触发并且由于某种原因您的宽度同时小于 480(例如设备上的方向更改)，您的分配将不会发生!!!

正如我在下面的评论中指出的，您可以像这样测试解析和执行性能:

<script>
  var startTime = new Date().getTime();
</script>

// your stuff 

<script>
  console.log(new Date().getTime() - startTime)
</script>