Можно ли загрузить Bootstrap асинхронно?

Я не использовал Bootstrap очень долго и не уверен, Нужно ли его загружать не асинхронно в <head> для создания страниц.

Google предлагает используя этот код для асинхронной загрузки JS-файлов:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

могу я загрузить bootstrap.min.js таким образом, или я должен загрузить его не асинхронно?

9
javascript twitter-bootstrap twitter-bootstrap-3

2 ответов

Bootstrap.js требует запуска jquery. Если вы хотите получить выгоду от загрузки асинхронного скрипта, то вы, вероятно, захотите загрузить jQuery (и потенциально другие библиотеки) async... Проблема в том, что у вас не будет гарантии, что jQuery async завершится до начальной загрузки, используя приведенный выше пример кода. Я также уверен, что у вас есть свой собственный javascript, который вы хотите написать, чтобы использовать bootstrap.особенности js. Это означает еще больше зависимостей. Вы может напишите логику для подключения зависимостей и асинхронной загрузки вручную, но это станет большой работой, поскольку количество сценариев, которые вам могут понадобиться, увеличится.

помощью RequireJS - это библиотека, которая заботится обо всем этом управлении зависимостями для вас и может загружать ваши файлы асинхронно (и в правильном порядке). Другим преимуществом этой библиотеки является оптимизатор, который может отслеживать зависимости и" записывать " их в один (необязательно уменьшенный) файл. После того, как вы используете оптимизатор для оптимизации вашего "основного" JS-файла (со всеми зависимостями, необходимыми для страницы), requireJS может просто загрузить этот файл асинхронно. Нужен только один скрипт!

пример будет выглядеть так:

/ app / main.js:

requirejs.config({
    paths: {
        jquery: "lib/jquery-1.11.0",
        bootstrap: "lib/bootstrap"
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});

//Define dependencies and pass a callback when dependencies have been loaded
require(["jquery", "bootstrap"], function ($) {
    //Bootstrap and jquery are ready to use here
    //Access jquery and bootstrap plugins with $ variable
});

С помощью jQuery.JS и ушко.в этом случае js будет жить под /app/lib (вместе с require.в JS).

в HTML-вы бы этот скрипт:

<script src="/app/lib/require.js" data-main="/app/main"></script>

это будет нагрузка в bootstrap и jquery(в правильном порядке), а затем передайте эти модули в качестве параметров (только jquery/$ необходим, так как bootstrap-это просто плагин поверх jquery) в вашу функцию обратного вызова.

22

думал, что я просто добавлю это с моим опытом (ценю, что многие люди, вероятно, уже знают об этом )

Итак, принимая Patricks отличный ответ (который мне очень помог, так что спасибо), если вы запустите свой сайт против https://developers.google.com/speed/pagespeed/insights/ он все равно даст вам предупреждение, что

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources
Remove render-blocking JavaScript:
http://mydomain/js/require.js

но принимая настройку OP (и тот, который рекомендует Google), вы можете сделать это непосредственно перед </body> tag

<script type="text/javascript">
  function requireJSOnload() {
    var element = document.createElement("script");
    element.src = "/js/require.js";
    element.setAttribute('data-main', '/js/main');
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", requireJSOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", requireJSOnload);
  else window.onload = requireJSOnload;
</script>

Теперь, когда вы бежите против https://developers.google.com/speed/pagespeed/insights/ у вас не будет сценариев блокировки JS.

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

спасибо

0