标签上的代码何时开始执行？是连续的吗？
<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>
上面是一段工作代码。为什么 script 位于 canvas 元素上方？
最佳答案
对于放置稍后调用的脚本函数的位置有多种选择。
在
<head>部分。此处的脚本将立即可用，并且可以被加载文档时执行的任何其他脚本使用。在
<body>部分与 HTML 混合在一起。这些脚本将在解析文档中的该位置时执行。 DOM 中脚本之前的所有内容都将就位并准备就绪。脚本之后的所有内容尚不可用。在正文的最后，
</body>之前标签。当这些脚本执行时，之前的整个文档就准备好了。
在您的特定情况下，函数在 <head> 中定义。部分，以便稍后可以执行。由于代码出现在 <head> 中的方式部分，该代码只是一个函数定义。解析该代码时实际上不会执行任何操作。当页面及其图像通过此行中指定的 onload 处理程序加载完成时，就会执行该函数本身:
<body onload="draw();">
只有这样，代码才会真正被调用并运行。 draw()对于此特定问题，函数可以在上述三个位置中的任何一个位置定义，因为 onload 处理程序位于所有三个选项之后。至于为什么脚本位于canvas元素之上，那只是页面设计者做出的选择。如果他们愿意，他们可以将脚本放在 Canvas 元素之后，并且页面仍然可以正常工作。
一个好的工作实践是将脚本放在 <body> 的最后位置。尽可能，因为这样可以更快地加载和显示页面内容。但是，在创建页面期间需要一些脚本(例如选择使用 document.write() 的脚本)，因此它们必须提前放置，以便在需要时可用。脚本也可以标记为 defer或async进一步延迟加载以允许首先显示内容。
关于javascript - 执行<script>中的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20297479/