#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
На моем сайте у меня есть встраивание twitch, мой сайт очень хорошо показывает скорость страницы без этого встраивания, но как только я добавляю его, это значительно увеличивает время загрузки. Мой сайт представляет собой одностраничный статический веб-сайт — ничего особенного.
В настоящее время я предварительно загружаю свой единственный JS-файл, а также свою таблицу стилей.
Что из вышеперечисленного, упомянутого в названии (выборка, загрузка или подключение), я должен использовать в twitch embed JS для повышения производительности?
В настоящее время я просто застрял в нижней части index.html следующим образом (наряду с jQuery, возможно, мне следует сделать предварительную выборку и для этого?)
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
Ответ №1:
для больших библиотек, подобных этой, что, по-видимому, является системной проблемой для сторонних разработчиков, я лениво загружаю их, как только основной пользовательский интерфейс становится интерактивным.
Вот как я загружаю stripe на страницы корзины покупок:
function initStripe() {
var script = document.createElement( "script" );
script.src = "https://js.stripe.com/v3/";
script.onload = stripeLoaded;
document.body.appendChild( script );
}
Комментарии:
1. В чем разница между этим и переносом скрипта в: document.addEventListener(‘DOMContentLoaded’, (event) => { Будет ли он загружать его только после того, как он появится в поле зрения?
2. Я загружаю эти тяжелые зависимости только тогда, когда знаю, что они необходимы. В противном случае они сильно замедляют критический путь рендеринга, что означает, что пользователь застрял в ожидании загрузки и оценки всего этого кода. Если я смогу выяснить, как заменить библиотеку fat, которую я делаю, часто сохраняя МБ загружаемого JavaScript. Вы делаете это, как только срабатывает событие DOMContentLoaded, что может произойти задолго до того, как вам понадобится загрузить скрипт (ы). Например, Stripe загружает 750 КБ JavaScript для выполнения одного вызова выборки: ( И, я думаю, он загружает 6 сценариев.
Ответ №2:
Вы пробовали отложить загрузку. Поместите все теги скрипта в head, используя отложенную загрузку .Например.
<head>
<!-- other headers -->
<script defer src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script defer src= "https://player.twitch.tv/js/embed/v1.js"></script>
</head
Обратитесь к этой статье в Google разработчики удаляют JavaScript, блокирующий рендеринг
Комментарии:
1. Я не получаю никаких ошибок блокировки рендеринга, какие преимущества это дало бы, например, для предварительной загрузки?
2. Когда вы помещаете скрипты внизу страницы. Программа визуализации страницы не знает о скрипте, пока не достигнет нижней части, на которой теряется несколько миллисекунд, которые могли бы быть использованы для визуализации больших файлов js. Используя defer script вверху, сообщите движку рендеринга о скрипте, который начнет загрузку скрипта, но не блокирует дальнейшее выполнение рендеринга html. Предварительная загрузка обычно используется с service worker для кэширования статического файла, который может быть использован позже в будущем. С помощью defer С помощью defer браузер запустит ваш скрипт, когда страница завершит синтаксический анализ.