Выполнение JS скрипта после загрузки страницы

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.

Please download a browser that supports JavaScript, or enable it if it’s disabled (i.e. NoScript).

  1. Home
  2. BrowserAutomationStudio
  3. Поддержка
  4. org/Breadcrumb»>
    Выполнение JS скрипта после загрузки страницы

This topic has been deleted. Only users with topic management privileges can see it.

  • Как выполнить JS скрипт после загрузки страницы, через встроенные языки скрипт не хочет запускаться, «запускать на каждой странице в браузере» тоже не подходит, так как на этой странице идёт загрузка самой игры.

    Кааак

  • org/Comment»>

    @lolimoska js обычно выполняют в действии выполнить код.
    А что за скрипт надо выполнить?


  • @lolimoska said in Выполнение JS скрипта после загрузки страницы:

    Как выполнить JS скрипт после загрузки страницы, через встроенные языки скрипт не хочет запускаться, «запускать на каждой странице в браузере» тоже не подходит, так как на этой странице идёт загрузка самой игры.
    Кааак

    Используйте действие «Яваскрипт» после действия «загрузить» и всё

  • org/Comment»>

    @fox яваскрипт перескакивает в начало


  • @lolimoska said in Выполнение JS скрипта после загрузки страницы:

    @fox яваскрипт перескакивает в начало

    Это исправят в следующей версии BAS, сейчас можете создать функцию и положить туда одно действие «яваскрипт» и вызывать функцию после действия «загрузить«

  • @fox скрипт такой огромный, подойдёт? Просто в консоли в браузере запускается, а в BAS нет

  • org/Comment»>

    @fox решил, поставил в функцию «Выполнять при каждой загрузке страницы»


  • @lolimoska said in Выполнение JS скрипта после загрузки страницы:

    @fox скрипт такой огромный, подойдёт? Просто в консоли в браузере запускается, а в BAS нет

    Чтобы запустить большой скрипт с переносами строк используйте действие «шаблон«.

    https://community.bablosoft.com/topic/4718/консоль

Loading More Posts

8
Posts

902
Views

Log in to reply

 

    schema.org/ItemList» data-nextstart=»» data-set=»»>

  • 8

    0
    Votes

    8
    Posts

    1068
    Views

  • 7

    0
    Votes

    7
    Posts

    849
    Views

  • 7

    0
    Votes

    7
    Posts

    233
    Views

  • 6

    0
    Votes

    6
    Posts

    752
    Views

  • 3

    0
    Votes

    3
    Posts

    77
    Views

  • 19

    0
    Votes

    19
    Posts

    1756
    Views

  • 1

    1
    Votes

    1
    Posts

    108

    Views

  • 3

    0
    Votes

    3
    Posts

    523
    Views

Как скрипты (JavaScript) влияют на скорость загрузки страницы

Must Read

Почему скрипт тормозит отрисовку страницы

Здравствуйте, уважаемые читатели сайта Uspei. com. Перед тем как браузер сможет отобразить страницу, он должен проанализировать всю разметку HTML. Во время этого процесса, когда браузер сталкивается со скриптом, он должен остановиться и выполнить его, прежде чем он сможет продолжить синтаксический анализ HTML.

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

Другими словами, JavaScript блокирует работу браузера по отрисовке страницы и, при всех своих достоинствах, может увеличить время загрузки страниц, создав разнообразные препятствия при их визуализации.

Нужно избегать и минимизировать блокировку загрузки страницы JavaScript, особенно если это внешние (подключаемые) скрипты, которые необходимо извлечь, прежде чем они смогут быть выполнены.

Чтобы избежать дополнительных сетевых запросов, скрипты, необходимые для отображения содержимого страницы, могут быть встроены в сам html, однако встроенный контент должен быть небольшим и должен быстро выполняться для обеспечения хорошей производительности.

Скрипты, которые не критичны для первоначальной отрисовки страницы, должны быть сделаны асинхронными или отложенными после начального рендеринга (отрисовки). Имейте в виду, что для повышения времени загрузки вы также должны оптимизировать доставку и CSS.

Встройте JavaScript в html

Как я уже сказал, внешние блокирующие скрипты заставляют браузер ждать, пока JavaScript будет извлечен, что может добавить один или несколько сетевых опросов, прежде чем страница будет отображаться. Если внешние скрипты небольшие, вы можете встроить их содержимое непосредственно в документ HTML и избежать лишних запросов. Например, если HTML-документ выглядит следующим образом:

<html> 
 <head> 
  <script src = "small.js" > </script> 
 </head> 
 <body> 
  <div>Привет, мир!</ div>
 </body>
</html>

И сам скрипт small.jsвыглядит так:

document.write(new Date().getFullYear())

То вы можете встроить скрипт таким образом:

<html>
 <head>
  <script> document. write(new Date().getFullYear()) </script>
 </head>
 <body>
  <div>Привет, мир!</div>
 </body>
</html>

К стати, атрибут type = “text / javascript” можно не указывать.

Вложение содержимого скрипта исключает внешний запрос к small.js и позволяет браузеру более быстрее делать отрисовку.

Однако не забудьте, что вложение также увеличивает размер самого HTML-документа и может потребоваться, чтобы содержимое одного и того же сценария было встроено в несколько страниц.

В результате вы должны использовать непосредственно в коде html только небольшие скрипты для обеспечения максимальной производительности.

Сделайте загрузку JavaScript асинхронной (async)

Если скрипт нет возможности встроить в тело html документа из-за его размера – сделайте загрузку скрипта асинхронной с помощью атрибута внешних скриптов async. Это позволит браузеру не дожидаться загрузки скрипта и параллельно продолжать загрузку основного HTML кода и других ресурсов. В результате увеличивается скорость загрузки всего сайта. Например:

<script async src = "my.js">

Отложите загрузку JavaScript (defer)

Ну, а что делать, если два каких-то скрипта связаны между собой и один из них загрузится раньше чем нужно, например, скрипт my.js зависит от jQuery и он загрузится быстрее, тогда мы можем столкнуться с ошибкой.

Нам поможет атрибут script-тега – defer, он откладывает загрузку и выполнение этих файлов до тех пор, пока вся страница не будет загружена и отображена. При этом он гарантирует такой же порядок выполнения скриптов, который изначально и был установлен в html-коде:

<head>
     ... 
 <script defer src="my.js"></script> 
 <script async src="jquery.min.js"></script>
</head>

Проведите ревизию всех скриптов

Нужны ли вам все те скрипты, которые у вас подключены? Нужна ли вам подключенная библиотека jquery? Ведь она весит немало, а, возможно, вы ее совсем и не используете. Просмотрите все, используемые вами скрипты, и проведите ревизию. Возможно, от многих из них вы вообще откажетесь.

Объедините все скрипты в один

Также, с целью уменьшения количества сетевых запросов и ускорения загрузки страницы рекомендую объединить по возможности все оставшиеся скрипты в один, разделив их комментариями, чтобы не запутаться.

В него можно объединить код скриптов всех плагинов, jquery, внутренние скрипты темы, а также коды скриптов счетчиков. Только не забывайте про порядок загрузки скриптов (если один зависит от другого), а также то, что коды скриптов плагина и счетчиков регулярно обновляются и изменяются.

Загрузку полученного скрипта перенесите из раздела head в подвал страницы footer, если он не участвует в отрисовке страницы, а исполняет только функции элементов, необязательных при первоначальной отрисовке.

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

Latest News

Эффективно загружать JavaScript с отсрочкой и асинхронностью

При загрузке скрипта на HTML-страницу необходимо соблюдать осторожность, чтобы не повредить производительности загрузки страницы. В зависимости от того, где и как вы добавите свои скрипты на HTML-страницу, будет зависеть время загрузки.

  • Должность имеет значение
  • Асинхронность и отсрочка
  • Сравнение производительности
    • Без отсрочки или асинхронности в голове
    • Без отсрочки или асинхронности в теле
    • С асинхронностью, в голове
    • С отсрочкой, в голове
  • Блокировка синтаксического анализа
  • Блокировка рендеринга
  • домИнтерактив
  • Поддержание порядка
  • Просто скажи мне, как лучше

При загрузке скрипта на HTML-страницу необходимо соблюдать осторожность, чтобы не повредить производительность загрузки страницы.

Сценарий традиционно включается в страницу следующим образом:

всякий раз, когда анализатор HTML находит эту строку, будет сделан запрос на получение сценария, и сценарий будет выполнен.

После завершения этого процесса синтаксический анализ может быть возобновлен, и остальная часть HTML может быть проанализирована.

Как вы понимаете, эта операция может сильно повлиять на время загрузки страницы.

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

Позиция имеет значение

Когда вы впервые изучаете HTML, вам говорят, что теги сценария живут в теге :

 
  <голова>
    Заголовок
    <скрипт src="script.js">
  
  <тело>
    ...

Как я уже говорил вам ранее, когда синтаксический анализатор находит эту строку, он получает скрипт и выполняет его. Затем , после выполнения этой задачи, он переходит к разбору тела.

Это плохо, потому что вводится много задержек. Очень распространенным решением этой проблемы является размещение тега script внизу страницы непосредственно перед закрывающим тегом .

При этом скрипт загружается и выполняется после того, как вся страница уже проанализирована и загружена, что является огромным улучшением по сравнению с альтернативой head .

Это лучшее, что вы можете сделать, если вам нужна поддержка старых браузеров, которые не поддерживают две относительно новые функции HTML: асинхронный и отложенный .

Async и Defer

И async, и defer являются логическими атрибутами. Их использование аналогично:

, если вы укажете оба, async займет приоритет в современных браузерах, в то время как более старые браузеры, которые поддерживают defer , но не async , откатятся к defer .

Для таблицы поддержки проверьте caniuse.com для асинхронности https://caniuse.com/#feat=script-async и для отсрочки https://caniuse. com/#feat=script-defer

Эти атрибуты имеют смысл только при использовании скрипта в части страницы head , и они бесполезны, если вы поместите скрипт в нижний колонтитул body , как мы видели выше.

Сравнение производительности

Без отсрочки или асинхронности, в голове

Вот как страница загружает скрипт без отсрочки или асинхронности, помещенный в заголовок часть страницы:

Синтаксический анализ приостанавливается до тех пор, пока скрипт не будет выбран и выполнен. Как только это будет сделано, синтаксический анализ возобновится.

Без отсрочки или асинхронности, в теле

Вот как страница загружает скрипт без отсрочки или асинхронности, помещенный в конец тега body непосредственно перед закрытием:

Анализ выполняется без каких-либо приостанавливается, и когда он заканчивается, скрипт извлекается и выполняется. Синтаксический анализ выполняется еще до загрузки скрипта, поэтому страница отображается для пользователя намного раньше, чем в предыдущем примере.

С асинхронным управлением, в заголовке

Вот как страница загружает скрипт с async , помещенным в тег заголовка :

Скрипт загружается асинхронно, и когда он готов, синтаксический анализ HTML приостанавливается для выполнить скрипт, затем он возобновится.

С defer, в заголовке

Вот как страница загружает скрипт с defer , помещённым в тег head :

Скрипт загружается асинхронно и выполняется только после того, как выполнен синтаксический анализ HTML .

Синтаксический анализ завершается точно так же, как когда мы помещаем скрипт в конец тега body , но в целом выполнение скрипта завершается намного раньше, потому что скрипт был загружен параллельно с парсингом HTML.

Так что это выигрышное решение с точки зрения скорости 🏆

Блокировка синтаксического анализа

async блокирует синтаксический анализ страницы, а отложить — нет.

Блокировка рендеринга

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

domInteractive

Скрипты с пометкой defer выполняются сразу после события domInteractive , которое происходит после загрузки, анализа и построения DOM HTML.

CSS и изображения на этом этапе еще предстоит проанализировать и загрузить.

Как только это будет сделано, браузер выдаст событие domComplete , а затем onLoad .

domInteractive важен, потому что его синхронизация распознается как мера воспринимаемой скорости загрузки. См. MDN для получения дополнительной информации.

Наведение порядка

Другой случай про отложить : скрипты с пометкой async выполняются в случайном порядке, когда они становятся доступными. Скрипты с пометкой defer выполняются (после завершения синтаксического анализа) в том порядке, в котором они определены в разметке.

Просто скажите мне, как лучше всего

Чтобы ускорить загрузку страницы при использовании скриптов, лучше всего поместить их в заголовок и добавить атрибут defer к тегу script :

Это сценарий, который запускает более быстрое событие domInteractive .

Учитывая плюсы defer , он кажется лучшим выбором по сравнению с async в различных сценариях.

Если вы не согласны с задержкой первого рендеринга страницы, убедитесь, что при синтаксическом анализе страницы нужный JavaScript-код уже выполняется.

запуск javascript после загрузки и изменения страницы продукта

‎12.08.2017 09:13

Привет, я новичок в Shopify и хочу получить помощь на странице продукта.

Я знаю, что product-detail.liquid отвечает за создание HTML-файла веб-страницы продукта. Но я заметил, что некоторые коды не генерируются им.

Хорошим примером является добавление класса selector-wrapper, я вижу его с помощью инструментов разработчика браузера, но не когда читаю исходный код страницы.

 

 

Может ли кто-нибудь сказать мне, откуда он генерируется??

 

Я пытаюсь запустить короткий javascript после полной загрузки страницы и выполнения вышеописанного «самогенерирования»? Onload не кажется лучшим способом вызова моего кода, потому что он всегда срабатывает, когда страница все еще отображается. Как лучше всего вызвать мой код?

2 796 просмотров

0 Нравится

Отчет

Ответов 3 (3)

tim

Shopify Expert

3067 178 1120

‎12.08.2017 15:33

Привет, Винччи,

раскрывающиеся списки и элементы выбора-обертки во многих темах генерируются option_selection.js (ищите код, похожий на {{ ‘option_selection.js’ | shopify_asset_url | script_tag } } ).

Как правило, если вы поместите свой js после этой строки и завернете его в $(), чтобы jQuery загружал ваш код при загрузке DOM, вы будете более или менее в безопасности.

2 796 просмотров

0 Нравится

Отчет

‎12.08.2017 19:19

Привет, Тим,

 

Спасибо за быстрый ответ. Я нашел строку {{ ‘option_selection.js’ | shopify_asset_url | script_tag }} в разделе моего файла theme.

No related posts.