Загрузить несколько файлов js после загрузки страницы - PullRequest
0 голосов
/ 20 декабря 2018

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

Я пытался использовать async и defer, но из-за зависимости друг от друга этот способ не работает для меня,Я также попытался выполнить отложенную загрузку через AJAX, но это также не работает для меня (используя эту ссылку https://w3bits.com/async-javascript)

@section Scripts {
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&libraries=places"></script>
  <script src="/lib/bootstrap-datetimepicker/js/moment.js" type="text/javascript"></script>
  <script src="/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script> 
  <script src="/js/viewcomponent/windowsignup.js"></script>
  <script type='text/javascript' src='/js/viewcomponent/kundliregistrationwindow.js' async='async'></script>
}

Я использую несколько файлов JS на странице и хочу, чтобы все они загружались после загрузки страницы.Есть ли способ сделать это?

Ответы [ 4 ]

0 голосов
/ 20 декабря 2018

Обычно вы используете раздел Scripts для управления местоположением, в котором ваши сценарии отображаются в документе.Как работают браузеры, они будут интерпретировать HTML сверху вниз.Если они встретят тег <script>, они приостановят рендеринг HTML и сначала интерпретируют JavaScript.Для внешних файлов JavaScript это означает, что они будут сначала включены и интерпретированы (если они не помечены как defer или async).

Таким образом, обычной практикой является добавление JavaScript в концетега <body>.Таким образом, сценарии не будут препятствовать визуализации документа в первую очередь, но они также будут выполняться достаточно рано, чтобы иметь возможность немедленно получить эффект.Кроме того, поскольку они выполняются после того, как большая часть <body> уже интерпретирована, они могут напрямую обращаться к элементам DOM.Поэтому вам обычно не нужно сначала прослушивать другое событие DOM, прежде чем вы сможете что-то сделать с DOM.

Например, это будет работать просто отлично:

<body>
    <div id="foo"></div>
    <script>
        var foo = document.getElementById('foo');
    </script>
</body>

Однако, еслиу вас было <script> до <div> (или внутри <head>), сценарий не смог бы найти элемент foo просто потому, что он еще не добавлен в DOM.

Для ASP.NET Core это означает, что вы должны убедиться, что ваш раздел Scripts добавлен в конец вашего тега <body> внутри вашего файла макетов.Таким образом, это должно выглядеть так:

 <!-- (The rest of the layout) -->

 @RenderSection("Scripts", required: false)

 </body>
 </html>

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

Что касается зависимостей между сценариями, убедитесь, что сценарии включены в том порядке, в котором они должны выполняться.Поэтому, если у вас есть сценарий B, который зависит от функций в сценарии A, обязательно включите A перед B. Но тогда, без использования defer или async, просто включение их должно работать нормально.

0 голосов
/ 20 декабря 2018

Вы можете использовать функцию Jquery $.getScript(), но тогда вы должны следить за правильным порядком загрузки.Рекомендую побольше собрать все необходимые файлы на стороне сервера и обслуживать только один файл

0 голосов
/ 20 декабря 2018

Когда браузер получает запрос на файл HTML, DOM начинает рисовать.Если вы поместите свои скрипты в тег <head>, DOM прекратит рендеринг и браузер начнет выполнять <script> files.Одним из решений может быть размещение файлов <script> в конце <body>.Другое решение может состоять в том, чтобы динамически загружать ваши скрипты на вашу страницу после загрузки страницы следующим образом:

window.addEventListener('load', () => {
  let script = document.createElement('script');
  script.src = './my_lazy_loaded_script.js';
  document.body.appendChild(script);
});

Если у вас есть несколько файлов, которые зависят друг от друга, вы можете сделать что-то подобное, используя async/await mechanism:

window.addEventListener('load', async () => {
    console.log('page loaded')
    try{
        await loadFileAsync('./my_first_lazy_load.js');
        await loadFileAsync('./my_second_lazy_load.js'); 
    } catch(err){
        console.log(err);
    } finally {
        console.log('Everything loaded')
    }
})

const loadFileAsync = (url) => {
    return new Promise((resolve, reject) => {
        if(url){
            let script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
            resolve(true);
        } else {
            reject(false);
        }
    });
}

Если вы хотите загрузить свои сценарии, как только рендер DOM, вы можете заменить window.addEventListener('load',()=>{}) на document.addEventListener('DOMContentLoaded', () => {})

0 голосов
/ 20 декабря 2018

Вы можете использовать getScript внутри document.ready.

$(document).ready(function() {
    $.getScript("domainpath/lib/bootstrap-datetimepicker/js/moment.js");
});

Получите js после dom готовности.

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