tgoop.com/prog_way_blog/191
Create:
Last Update:
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