Ответ 1

Просто проверьте это!

Я не вижу существенной разницы в Chrome.
Как я знаю, это было важно для IE8, но не проверял этот факт.
IE11 показывает 2 секунды в первом фрагменте, когда остальные принимают только 200 мс.

Кроме того, похоже, что jQuery уже агрегирует события загрузки.

Не забывайте

• Когда вы используете один и тот же код на одной вкладке, браузер запоминает что-то и работает быстрее.
• Обновить страницу недостаточно. Откройте вместо этого новую вкладку.
• После открытия новой вкладки выполните фрагменты в другом порядке.
• Если фрагмент запускается первым на вкладке, он получит дополнительное замедление, сравнивая остальные три.

for (var q=0; q<1000; ++q) {
  document.addEventListener('DOMContentLoaded', (function (i) {
    console.log(i);
  }).bind(null, q));
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('output').textContent = performance.now().toFixed(3);
});

<output></output>

Ответ 2

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

Ответ 3

У вас может быть несколько, но это не всегда самая сложная вещь. Старайтесь не злоупотреблять ими, так как это серьезно повлияет на читаемость. Кроме этого, это совершенно законно.

Также стоит отметить, что функция, определенная в одном блоке $(document).ready, не может быть вызвана из другого блока $(document).ready.

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
});

выход был

hello1
something
hello2

Отметьте этот пост и этот

Ответ 4

Да, вы можете использовать несколько обработчиков документов, нет особого преимущества, даже если вы можете использовать код jQuery в нескольких местах. Вы не можете использовать переменную внутри одной в другой, поскольку они находятся в разных пределах.

Фактически jQuery обработчик событий нажатие функции для выполнения в очередь конкретного события. Когда событие запускается со всех функций выполняется один за другим из определенных событий row/stack/queue на основе возвращаемое значение родительской последовательной функции.
НОСледует отметить, что каждый вызов функции $(document).ready() должен вернуться. Если исключение выбрано одним, последующие вызовы будут никогда не запускаться.

$(document).ready(function() {
    document.write('<h3>In First ready function</h3>');
    var foo = function() {
        console.log('inside foo');
    }
    document.write("foo:" +(typeof foo)+"<br>");
    document.write("bar:" +(typeof bar)+"<br>");
    
});
$(document).ready(function() {
   document.write('<h3>In Second ready function</h3>');
    
    var bar=function bar() {
        console.log('inside bar');
    }
    document.write("foo:" +(typeof foo)+"<br>");
    document.write("bar:" +(typeof bar)+"<br>");
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>