Question

标签上的代码执行何时开始？它是连续的吗？

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

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

Answer 1

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

在<head>部分。此处的脚本将立即可用，并且可以在加载文档时执行的任何其他脚本使用。
在与HTML混合的<body>部分中。这些脚本将在解析文档中的位置时执行。在DOM中的脚本之前的所有内容都将准备就绪。脚本之后的所有内容都将无法使用。
在身体的最末端，就在</body>标记之前。在这些脚本执行时，它之前的整个文档就准备好了。

在您的特定情况下，函数在<head>部分中定义，以便稍后可以执行。由于代码在<head>部分中的显示方式，该代码只是一个函数定义。解析该代码时实际上没有执行任何操作。然后，当页面及其图像通过此行中指定的onload处理程序加载时，将执行函数本身：

<body onload="draw();">

只有这样才能实际调用和运行代码。对于此特定问题，可能已在上述三个位置中的任何位置定义了draw()函数，因为onload处理程序位于所有三个选项之后。至于为什么脚本在canvas元素之上，这只是页面设计者的选择。如果他们想要的话，他们可以在canvas元素之后找到脚本，并且页面仍然可以正常工作。

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

Answer 2

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

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

Answer 3

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

Answer 4

内联元素将按顺序执行，就像您的示例中的情况一样。但是，您当前的所有代码都定义了一个函数。它不执行该功能。

在您的情况下，您使用body onload=事件来实际执行draw（）函数。这就是为什么你的代码没有问题，这似乎是你最初的问题。

因此，除非绝对必要，否则通常建议您不要在头部放置javascript，而应将其尽可能靠近关闭身体标记。

话虽如此，在这种情况下你定义一个函数，但定义它并执行它是两个不同的东西。定义一个在DOM准备好之前不执行的函数，并且已经渲染了要处理的DOM元素，这不是问题。

话虽如此，当您在head部分加载外部javascript文件时，它可能导致页面的呈现被阻止，并且根据您正在加载的脚本的大小和数量，再次建议放置这些在页面的末尾。在执行试图操纵这些元素的函数之前，这将避免您对DOM元素存在的担忧。

Answer 5

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

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

在<script> </script>中执行代码

5 个答案: