/ /
Группировка JavaScript файлов

Уроки

Группировка JavaScript файлов

Чтобы загрузить файл, браузер тратит время на служебные операции: установка соединения, отправка запроса, получение ответа, закрытие соединения. Это время постоянно и не зависит от скорости интернет соединения. Например, при очень быстром интернет соединении на загрузку содержимого файла уйдёт  1 миллисекунда, а на служебные операции до 100. Время выполнения служебных операций зависит от сетевой задержки — пинга, а не от скорости интернет соединения.

Чтобы ускорить сайт, программисты группируют множество маленьких JavaScript файлов в один большой. Существуют плагины, автоматически соединяющие файлы.

Для одной страницы, приемлемо использование не более 3 JavaScript файлов.

Содержание
Почему включение группировки может сломать сайт
Почему не все файлы группируются

Почему включение группировки может сломать сайт

Причиной может послужить — изменение порядка подключения JavaScript файлов. Например, ваш скрипт зависит от jQuery. Но после включения группировки порядок файлов поменялся, и в итоговом объединённом файле сначала идёт ваш скрипт, а уже потом код библиотеки jQuery. Такую ситуацию можно легко определить, так как в консоли браузера появляются ошибки.

Почему не все файлы группируются

Самая частая причина — это подключение JavaScript файлов через HTML код, вместо использования API метода вашей системы управления сайтом.

Используют такой код:

<script src="/js/my_script.js"></script>

вместо такого:

// Для Битрикс
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/my_script.js");
// Для WordPress
wp_enqueue_script( 'my-script-handle', get_template_directory_uri() . '/js/my_script.js', array('tmp'), '1.0', true );

В каждой системе есть несколько способов подключать JavaScript код. Нужно использовать тот, что соответствует ситуации.

Ниже пример того, как группировка ускоряет загрузку страницы:

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
if(isset($_GET['big'])) {
    // Выводим сгруппированный, большой файл
    header('Content-Type: text/js');
    for($i = 0;$i < 100;$i++)
    echo file_get_contents('10-kb-js.js');
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }

        </style>
        <script>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./js_count.php">100 файлов по 10 КБ</a> <a class="btn <?=$mode === 'big' ? 'active' : ''?>" href="./js_count.php?mode=big">1 файл размером 1 МБ</a>
        <br />
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
<?php
if($mode === 'big') {?>
        <script src="./js_count.php?big=1"></script>
<?php
} else {
    for($i = 0; $i < 100;++$i) { ?>
        <script src="./10-kb-js.js?t=<?=microtime(true).'.'.$i?>"/></script>
    <?php }
}?>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .btn {
                color: #000;
                display: inline-block;
                margin-bottom: 5px;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }

        </style>
        <script>
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./js_count.php">100 файлов по 10 КБ</a> <a class="btn " href="./js_count.php?mode=big">1 файл размером 1 МБ</a>
        <br />
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <script src="./10-kb-js.js?t=1772846831.689.0"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.1"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.2"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.3"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.4"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.5"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.6"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.7"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.8"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.9"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.10"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.11"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.12"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.13"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.14"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.15"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.16"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.17"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.18"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.19"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.20"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.21"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.22"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.23"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.24"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.25"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.26"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.27"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.28"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.29"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.30"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.31"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.32"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.33"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.34"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.35"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.36"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.37"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.38"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.39"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.40"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.41"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.42"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.43"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.44"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.45"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.46"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.47"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.48"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.49"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.50"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.51"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.52"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.53"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.54"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.55"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.56"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.57"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.58"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.59"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.60"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.61"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.62"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.63"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.64"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.65"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.66"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.67"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.68"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.69"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.70"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.71"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.72"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.73"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.74"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.75"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.76"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.77"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.78"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.79"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.80"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.81"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.82"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.83"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.84"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.85"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.86"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.87"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.88"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.89"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.90"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.91"/></script>
            <script src="./10-kb-js.js?t=1772846831.689.92"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.93"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.94"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.95"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.96"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.97"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.98"/></script>
            <script src="./10-kb-js.js?t=1772846831.6891.99"/></script>
        </body>
</html>

ПРО подписка для работы с сервисом

Промо
Проверка 50 страниц в инструменте «Проверка страницы»
190 ₽
Подписка активируется на 10 дней и привязана к определённому сайту.
ПРО подписка
3500 страниц в неделю в инструментах «Проверка страницы» и «Полное сканирование сайта».
1 580 ₽
Подписка активируется на 30 дней и можно сканировать любой сайт.
Кошелёк
Дополнительные страницы, зачисляющиеся на отдельный баланс. Для проверки крупных сайтов.
200 ₽
Количество страниц
Требуется активная ПРО подписка.
Подробнее о тарифах
x

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь