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内的代码吗？第二个块将被执行，我将在内存中将该函数分配给#alert.onclick。问题是其他（假）条件中的function是否会在内存中存在，因为变量可能就像悬挂引用一样，或者仅当条件为真时才会引导该函数？

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

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

Answer 1

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

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

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

表示如果条件为true / false，则在函数调用load / resize上将相应地设置/覆盖onclick属性。

分配和声明之间存在差异

任务：

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

声明：

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

函数声明将是hoisted（你通过“在实际执行前解析并存储到内存中”所描述的内容），所以：

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

正如笔记一样，从不尝试使用alert（）调试你的js 因为它会停止所有执行，除非你与弹出窗口进行交互。意味着如果您的警报在宽度＆gt;时触发479由于某种原因，你的宽度在此期间变得小于480（例如设备上的方向改变），你的任务就不会发生！

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

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

// your stuff 

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

Answer 2

同步和异步调用的JS引擎性能不同。如果它是ansync，是的它会更快并且仅在满足任何条件时调用，否则它被忽略但是代码应该具有逻辑/条件，以便不会发生任何运行时js错误发生。示例 - 瓶颈或同时触发两个异步调用，其中响应是相互依赖的。

InShort- 同步代码按顺序执行 - 每个语句在执行前等待前一个语句完成。异步代码不必等待 - 您的程序可以继续运行。

完全取决于要求/解决方案。如果您在JS中使用了许多异步调用 - https://github.com/caolan/async

Answer 3

所有代码肯定都是由引擎解析的，比如如果你在块中有任何编译错误它可能无法执行，它仍会抛出错误。但它会执行该块内的任何代码，所以如果有任何局部变量或者在那里定义的函数你可能无法在其他部分使用它们，是的它不会在内存中，因为它永远不会被执行。

所以，即使你的块中有很多代码或任何无限循环没有执行（比如你的第一个if块，性能也没有任何区别。只有你从一个服务器上提供它的问题网络上的网页然后由于文件大小（如果它太大）你可能会有所不同。您可以通过从chrome dev工具或firebug调试代码来检查这一点。只需在第一个代码块中放置调试点，然后您就可以观察它。

Answer 4

你问;

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

我会添加一个无限循环并运行它以查看是否有效果，如下所示：

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

条件语句中的Javascript执行

4 个答案: