Execution of code in <script>

Execution of code in <script>

本文关键字：script gt of lt in Execution code      更新时间：2024-01-02

标记上的代码何时开始执行？它是顺序的吗？

<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>

上面是一段工作代码。为什么脚本位于画布元素之上？

有多种选择可用于放置稍后调用的脚本函数。

  1. 在<head>部分中。此处的脚本将立即可用，并且可以由加载文档时执行的任何其他脚本使用。

  2. 在<body>部分混合了HTML。这些脚本将在解析文档中的位置时执行。DOM中脚本之前的所有内容都将就绪。脚本之后的所有内容都还不可用。

  3. 在正文的最后，就在</body>标记之前。在执行这些脚本时，之前的整个文档都将准备就绪。

在您的特定情况下，在<head>部分中定义了一个函数，以便稍后可以执行。由于代码在<head>部分中的显示方式，该代码只是一个函数定义。解析该代码时，实际上什么都不执行。当页面及其图像通过此行中指定的onload处理程序完成加载时，函数本身就会执行：

<body onload="draw();">

只有到那时，代码才会被实际调用并运行。draw()函数可以在上述三个位置中的任何一个位置定义，因为onload处理程序位于所有三个选项之后。至于为什么脚本位于画布元素之上，这只是页面设计者的一个选择。如果他们愿意的话，他们可以将脚本定位在画布元素之后，并且页面仍然可以正常工作。

一个好的工作实践是尽可能晚地将脚本放在<body>中，因为这样可以更快地加载和显示页面内容。但是，在创建页面的过程中需要一些脚本（例如，选择使用document.write()的脚本），因此它们必须提前放置，以便在需要时可用。脚本也可以被标记为defer或async以进一步延迟它们的加载以允许内容首先被显示。

首选的方法是将脚本放在结束正文标记的正下方。

但是，如果必须立即在页面上使用脚本，最好将其保留在页眉中。

因为脚本只定义了一个函数，在页面完全加载之前（通过onload body属性）不会调用该函数。

内联元素将按顺序执行，就像您的示例中的情况一样。然而，当前代码所做的只是定义一个函数。它不执行该函数。

在您的案例中，您使用了body onload=事件来实际执行draw（）函数。这就是为什么您对代码没有问题，这似乎是您最初问题的要点。

出于这个原因，除非绝对必要，否则通常建议不要将javascript放在head部分，而是将其放在尽可能靠近关闭body标记的位置。

话虽如此，在这种情况下，您定义了一个函数，但定义它和执行它是两件不同的事情。定义一个函数并不是问题，直到DOM准备好，并且要使用的DOM元素已经呈现，才执行该函数。

话虽如此，当您在head部分加载外部javascript文件时，可能会导致页面的呈现受阻，根据您以这种方式加载的脚本的大小和数量，建议将这些文件放在页面的末尾。这将避免在执行试图操作DOM元素的函数之前，对DOM元素的存在性的担忧。

不要在body元素上使用onload属性。。。事实上，永远不要在body元素上使用任何属性。

<head>
<script type="application/javascript">
//<![CDATA[
window.onload = function() {/*load multiple functions here*/}
//]]>
</script>
</head>
相关文章：