Как загрузить JavaScript, который не блокирует рендеринг ?? Как загрузить после того, как полная страница была нарисована?

Question

Я загружаю чат-сервис, который называется дрифт. Я получаю очень плохую оценку на мобильном телефоне PageSpeed ​​только из-за этого. Я хочу загрузить его, чтобы он не блокировал рендеринг, и вроде должно начаться после рисования всей страницы. Если вы хотите рассмотреть веб-сайт здесь, это: https://stockarea -application-test.herokuapp.com

Я попытался использовать асинхронное и отложенное для загрузки файла JavaScript, но обаони блокируют рендер. (Я проверил эту вещь по рекомендации скорости страниц).

Я также использовал jquery $ .getScript () после функции готовности документа, но она по-прежнему показывает блокировку рендеринга

Пожалуйста, мне действительно нужна помощь, как я могу ее решить. Некоторые вещи в Интернете говорят о рабочих файлах, но на них нет DIS API, поэтому их нельзя использовать, так как этот дрифт-сервис действительно что-то рисует на DOM. поэтому, пожалуйста, помогите

Answer 1

Вы можете использовать метод async и defer с jQuery. Но лучше, чем атрибуты async и defer, таким образом вы можете загрузить javascript после того, как браузер завершит загрузку ресурсов на странице.

Когда браузер завершит загрузку ресурсов на странице, он запускает событие load. И вы можете сказать браузеру подождать загрузки скриптов, пока это не произойдет.

Вот как это сделать с помощью jQuery:

$(window).on("load", function() {
    $("body").append("<script type='text/javascript' src='some-javascript.js'>") //Load js after rendered 
});

Вы также можете сделать с нативным javascript:

window.addEventListener("load", function(){
    const script = document.createElement("script")
    script.src = "some-javascript.js" //Load js after rendered 
    document.body.appendChild(script)
});

Таким образом, он создает элемент script послересурсы были загружены.

Answer 2

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