首页 文章

条件语句中的Javascript执行

提问于
浏览 次
12
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 会在内存中存在，因为变量可能就像悬挂引用一样，或者只有当条件为真时才会引导该函数？

This is to understand if there is any advantage in terms of initial amount of code processed when window loads if the code for mobile is inside conditional statements like this and is considerably large. .

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

javascript function if-statement v8

4 回答

  • 5

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

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

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

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

    分配和声明之间存在差异

    分配：

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

    宣言：

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

    函数声明将是hoisted（由"parsed and stored into memory before actual execution"描述的内容），因此：

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

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

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

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

// your stuff 

<script>
  console.log(new Date().getTime() - startTime)
</script>
    回复于
  • 1

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

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

    它完全取决于要求/解决方案 . 如果你的JS使用了很多异步调用 - https://github.com/caolan/async

    回复于
  • 1

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

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

    回复于
  • 1

    您询问;

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

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

    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
  }
}
    回复于

相关问题