FRONTENDINTERVIEW Telegram 4496
Для чего скрипт подключают в концe body?

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

Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу.

Проблема: блокировка рендеринга
Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.
<head>
<script src="script.js"></script> <!-- Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>


Решение: подключение в конце `<body>`
Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.
<body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>


Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML
<head>
<script src="script.js" defer></script>
</head>


async – загрузка и выполнение параллельно
<head>
<script src="script.js" async></script>
</head>


👉 @frontendInterview



tgoop.com/frontendInterview/4496
Create:
Last Update:

Для чего скрипт подключают в концe body?

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

Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу.

Проблема: блокировка рендеринга
Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.

<head>
<script src="script.js"></script> <!-- Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>


Решение: подключение в конце `<body>`
Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.
<body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>


Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML
<head>
<script src="script.js" defer></script>
</head>


async – загрузка и выполнение параллельно
<head>
<script src="script.js" async></script>
</head>


👉 @frontendInterview

BY Frontend Interview - собеседования по Javascript / Html / Css




Share with your friend now:
tgoop.com/frontendInterview/4496

View MORE
Open in Telegram


Telegram News

Date: |

Polls Add up to 50 administrators Hui said the messages, which included urging the disruption of airport operations, were attempts to incite followers to make use of poisonous, corrosive or flammable substances to vandalize police vehicles, and also called on others to make weapons to harm police. Clear End-to-end encryption is an important feature in messaging, as it's the first step in protecting users from surveillance.
from us


Telegram Frontend Interview - собеседования по Javascript / Html / Css
FROM American