Выполнение кода в <script> [duplicate]

0

Когда начинается выполнение кода на тегах? Является ли он последовательным?

<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
  function draw(){
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
    }
  }
</script>
<style type="text/css">
  canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>

Выше - часть кода. Почему скрипт над элементом холста?

  • 2
    "Почему сценарий выше элемента canvas?" Очевидный ответ: потому что человек, который написал код, поместил его туда. В этом случае не имеет значения, где находится скрипт.
  • 0
    Сценарий должен находиться в теге head, поскольку он будет загружен первым при открытии страницы. Также javascript встроен в клиентскую часть. Вы также можете поместить скрипт над тегом закрытия тела </ body>.
Теги:

5 ответов

2
Лучший ответ

Существует множество вариантов, где можно разместить функции скриптов, которые будут вызываться позже.

  1. В разделе <head>. Сценарии здесь будут доступны сразу и могут использоваться любыми другими скриптами, которые выполняются во время загрузки документа.

  2. В разделе <body> смешанном с HTML. Эти скрипты будут выполняться во время анализа местоположения в документе. Все, что приходит перед сценарием в DOM, будет на месте и готово. Все, что приходит после сценария, еще не доступно.

  3. В самом конце тела, перед </body>. Во время выполнения этих сценариев весь документ перед этим будет готов.

В вашем конкретном случае функция определена в разделе <head> чтобы она была доступна для выполнения в более позднее время. Из-за того, как код появляется в разделе <head>, этот код является только определением функции. Ничто фактически не выполняется, когда этот код анализируется. Сама функция запускается, когда страница и ее изображения выполняются при загрузке через обработчик onload, указанный в этой строке:

<body onload="draw();">

Только тогда код действительно вызывается и запускается. Функция draw() могла быть определена в любом из трех указанных выше местоположений для этой конкретной проблемы, потому что обработчик onload появляется после всех трех параметров. Что касается того, почему скрипт находится над элементом canvas, это просто выбор дизайнера страницы. Они могли бы расположить скрипт после элемента canvas, если они захотят, и страница будет работать нормально.

Хорошая практика работы заключается в том, чтобы разместить сценарии как можно ближе к <body> поскольку это позволяет загружать и отображать содержимое страницы быстрее. Но при создании страницы необходимы некоторые сценарии (например, скрипты, которые предпочитают использовать document.write()), поэтому они должны быть размещены раньше, чтобы они были доступны по мере необходимости. Сценарии могут быть также помечены defer или async для дальнейшей задержки их загрузки, чтобы содержание, которое будет отображаться в первой очереди.

Поделиться
1

Поскольку сценарий просто определяет функцию, которая не запускается, пока страница не будет полностью загружена (через атрибут body onload).

Поделиться
1

Предпочтительным способом является установка ваших скриптов прямо под тегом закрывающего тела.

Однако, если необходимо сразу использовать скрипт на странице, лучше сохранить его в заголовке.

Поделиться
  • 0
    Я предполагаю, что последующим вопросом будет: что считается «существенным» вариантом использования?
0

Строковые элементы будут выполняться последовательно, как в вашем примере. Однако весь ваш текущий код определяет функцию. Он не выполняет эту функцию.

В вашем случае вы использовали body onload= event, чтобы фактически выполнить функцию draw(). Вот почему у вас нет проблем с кодом, который, кажется, является точкой вашего первоначального вопроса.

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

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

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

Поделиться
  • 0
    Сценарии, определенные в разделе заголовка, не откладываются автоматически. Вы можете поставить window.location = "http://www.google.com"; в головной части, и он будет выполнен сразу же. Если вы хотите, чтобы сценарии откладывались до загрузки документа, вам нужно определить сценарии там, чтобы они не выполнялись, пока вы этого не захотите. Это не автоматическая функция раздела <head> .
  • 0
    @ jfriend00, согласился. Я улучшил ответ, обратившись к встроенному скрипту, что я действительно должен был сделать в первую очередь.
Показать ещё 2 комментария
-1

Не используйте атрибут onload для элемента body... на самом деле не используйте никаких атрибутов элемента body.

<head>
<script type="application/javascript">
//<![CDATA[
window.onload = function() {/*load multiple functions here*/}
//]]>
</script>
</head>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню