条件语句中的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,那么代码里面的代码首先if会被Javascript引擎处理吗？第二个块将被执行,我将在内存中分配功能并分配给#alert.onclick.问题是function内部其他(错误)条件是否存在于内存中,因为变量可能像悬挂引用一样,或者只有当条件为真时才会引导该函数？

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

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

Answer 1

是的,所有代码都将被解析

不,并非所有代码都将被处理/执行.

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

意味着如果条件为true/false,则函数调用load/resize onclick属性将相应地设置/覆盖.

分配和声明之间存在差异

分配:

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

宣言:

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

函数声明将被提升(你在"实际执行之前解析并存储到内存中"所描述的内容),所以:

您询问性能,因此您的实际问题取决于您所描述的"大量代码".如果你不是在谈论像1mb的js-code之间有大量的函数声明......别担心.

并且作为一个注释,永远不要尝试使用alert()调试你的js,因为除非你与弹出窗口交互,否则它将停止所有执行.意味着如果您的警报在宽度> 479时触发,并且由于某种原因您的宽度在此期间变得小于480(例如设备上的方向更改),您的任务就不会发生!

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

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

// your stuff 

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