Выполнение Javascript в условных операторах

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>

Ответы

Ответ 1

Да, весь код будет проанализирован

И нет, не весь код будет обработан/выполнен.

То, что вы делаете, является условным назначением. при загрузке и изменении размера

Означает, что если условие истинно/ложно в функции load load/resize, свойство onclick будет установлено/перезаписано соответствующим образом.

Существует различие между присваиванием и объявлением

назначение:

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

декларация:

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

объявления функций будут hoisted (то, что вы описываете "анализируется и хранится в памяти до фактического выполнения" ), поэтому:

Вы спрашиваете о производительности, поэтому ваш фактический вопрос зависит от того, что вы описываете, "большого количества кода". если вы не говорите о том, как 1 мб js-кода между ними существует множество объявлений функций... не беспокойтесь.

и как примечание, никогда пытайтесь отлаживать js с помощью alert() потому что он остановит все выполнение, если вы не взаимодействуете со всплывающим окном. Это означает, что если ваше предупреждение срабатывает при ширине > 479, и по какой-то причине ваша ширина становится меньше 480 (например, изменение ориентации на устройстве), ваше назначение не произойдет!!!

как я указал в приведенном ниже комментарии, вы можете проверить эффективность синтаксического анализа и выполнения следующим образом:

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

// your stuff 

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

Ответ 2

Производительность двигателей JS отличается как для синхронизации, так и для асинхронного вызова. Если это ansync, да, это будет быстрее и вызвано, только если какие-либо условия будут выполнены иначе, он будет проигнорирован, но код должен иметь логику/условия, чтобы не возникало каких-либо ошибок времени выполнения js. пример - узкое место или одновременное срабатывание двух асинхронных вызовов, в которых ответ зависит друг от друга.

InShort- синхронный код выполняется в последовательности - каждый оператор ожидает завершения предыдущей инструкции перед выполнением. Асинхронный код не должен ждать - ваша программа может продолжать работать.

Это полностью зависит от требований/решений. Если в вашем использовании JS существует много асинхронных вызовов - https://github.com/caolan/async

Ответ 3

Весь код определенно анализируется движком, скажем, если у вас есть какие-либо ошибки компиляции в блоке, который он может не выполнить, он все равно выдает ошибку. Но он выполнит любой код внутри этого блока, поэтому, если у него есть какие-либо локальные переменные или функции, определенные там, вы не сможете использовать их в других частях, и да, это не будет в памяти, потому что это никогда не будет выполнено.

Итак, даже если у вас много кода или какой-либо бесконечный цикл в блоке, который не выполняется (например, ваш первый блок if не будет какой-либо разницы в производительности. Только проблема заключается в том, что вы обслуживаете его с веб-страницы в сети, то из-за размера файла (если его так много) вы можете получить разницу. Вы можете проверить это, отлаживая ваш код с помощью инструментов chrome dev или firebug. Просто поставьте точку отладки в первом блоке кода, а затем вы сможете ее просмотреть.

Ответ 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
  }
}