PROG_WAY_BLOG Telegram 191
Различные способы загрузки скриптов

Уже не просто классический, а, скорее, стереотипный вопрос с фронтенд собеседования — это разные способы подключения скриптов к странице.

Начать стоит с того, что каждый скрипт на странице подключается при помощи тега script:

<script src="index.js"></script>


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

Чтобы решить эту проблему, есть ещё два варианта асинхронной загрузки скриптов.

<script async src="index.js"></script>
<script defer src="index.js"></script>


Оба варианта загрузки являются асинхронными и не блокируют отрисовку и парсинг HTML. Но в чём же тогда разница? В порядке выполнения.

Если на странице будет несколькоasync скриптов, то выполнятся они будут в порядке загрузки. То есть каждый скрипт будет выполнен ровно тогда, когда скачается, вне зависимости от того порядка, в котором скрипты подключаются в файле. Также async скрипты не подходят для загрузки скриптов, активно взаимодействующих с HTML разметкой, поскольку такой скрипт может быть загружен и выполнен ещё до того, как успеет построиться DOM дерево.

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

И это, в целом, все отличия, которые стоит знать для ответа на этот вопрос.

#javascript #web #useful #theory
👍35🔥10🐳6🤓21



tgoop.com/prog_way_blog/191
Create:
Last Update:

Различные способы загрузки скриптов

Уже не просто классический, а, скорее, стереотипный вопрос с фронтенд собеседования — это разные способы подключения скриптов к странице.

Начать стоит с того, что каждый скрипт на странице подключается при помощи тега script:

<script src="index.js"></script>


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

Чтобы решить эту проблему, есть ещё два варианта асинхронной загрузки скриптов.

<script async src="index.js"></script>
<script defer src="index.js"></script>


Оба варианта загрузки являются асинхронными и не блокируют отрисовку и парсинг HTML. Но в чём же тогда разница? В порядке выполнения.

Если на странице будет несколькоasync скриптов, то выполнятся они будут в порядке загрузки. То есть каждый скрипт будет выполнен ровно тогда, когда скачается, вне зависимости от того порядка, в котором скрипты подключаются в файле. Также async скрипты не подходят для загрузки скриптов, активно взаимодействующих с HTML разметкой, поскольку такой скрипт может быть загружен и выполнен ещё до того, как успеет построиться DOM дерево.

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

И это, в целом, все отличия, которые стоит знать для ответа на этот вопрос.

#javascript #web #useful #theory

BY progway — программирование, IT




Share with your friend now:
tgoop.com/prog_way_blog/191

View MORE
Open in Telegram


Telegram News

Date: |

Ng, who had pleaded not guilty to all charges, had been detained for more than 20 months. His channel was said to have contained around 120 messages and photos that incited others to vandalise pro-government shops and commit criminal damage targeting police stations. Today, we will address Telegram channels and how to use them for maximum benefit. But a Telegram statement also said: "Any requests related to political censorship or limiting human rights such as the rights to free speech or assembly are not and will not be considered." Earlier, crypto enthusiasts had created a self-described “meme app” dubbed “gm” app wherein users would greet each other with “gm” or “good morning” messages. However, in September 2021, the gm app was down after a hacker reportedly gained access to the user data. Users are more open to new information on workdays rather than weekends.
from us


Telegram progway — программирование, IT
FROM American