Блог

Главная - Вопросы по программированию - Функция Javascript, определяющая производительность в браузерах

Функция Javascript, определяющая производительность в браузерах

#javascript #html #jquery #dom #browser

#javascript #HTML #jquery #dom #браузер

Вопрос:

Есть ли какая-либо разница в производительности браузера между определением функций javascript до и после загрузки DOM?

Обычно я определяю функции после загрузки DOM следующим образом

 // Example-1

$(document).ready(function(){
  function foo(){
    alert("foo");
  }

  foo();
});

и некоторые люди используют этот способ

 // Example-2

function foo(){
  alert("foo");
}

$(document).ready(function(){
  foo();
});

Теория-1: говорят, что Example-1 работает медленнее, чем Example-2, потому что Example-1 ждал загрузки DOM, затем начал определять функции, а затем страница начала работать в полном объеме. функция. Однако в примере-2 функции, определенные одновременно во время загрузки DOM, поэтому страница стала полноценной одновременно при загрузке DOM. В результате Example-2 получил некоторое время, пока Example-1 пытался определить функции.

Теория-2: $ (документ).сама функция ready работает медленно. Чтобы получить тот же результат быстрее, используйте этот способ

 (function() {

})();

Я не смог найти ничего, связанного с этими теориями. Не мог бы кто-нибудь объяснить, пожалуйста, что происходит за кулисами?

Спасибо.

Комментарии:

1. Время, потерянное из-за объявлений функций, незначительно. Этот код пахнет преждевременной оптимизацией

2. document.ready по сути является привязкой к событию, которое браузер выдает после анализа DOM, а не при загрузке изображений / видео / других ресурсов. Как только это событие произойдет, будет выполнен обработчик события, и ваша логика сработает. Немедленно вызываемое функциональное выражение (IIFE) выполняется немедленно, как следует из названия. Задержки нет. Эти два подхода не совпадают с яблоками.

3. Более важным может быть то, что называется «javascript, блокирующий рендеринг».

Ответ №1:

Любые различия в производительности между примером № 1 и примером № 2 не имеют значения. Существенная разница заключается в области видимости.

Что касается вашей функции «Теория 2», все, что вы делаете, это создаете замыкание. Это полностью отличается от jQuery .ready() , что эквивалентно ожиданию DOMContentLoaded события.

Ответ №2:

После этого я обнаружил, что определение функций без $(document).ready этого происходит быстрее. Чего я не мог понять, браузер уже загрузил библиотеку jQuery и работал так быстро, когда я нахожусь в local. Когда я выхожу в Интернет, сначала начинается загрузка библиотеки, а затем определение связанных функций.