Question

我不是要问将<script>标记放在HTML标记中的哪个位置。我的问题是它的功能是什么。它是否引用脚本，以便稍后可以运行脚本的所有功能，或者它执行脚本并且不进行引用。

例如：

HTML：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body onresize="hello();">
        <div id="navigation_pane">
            <ul>
                <li>HOME</li>
                <li>CONTACTS</li>
                <li>JOIN</li>
                <li>ABOUT US</li>
            </ul>
        </div>
        <div id="testElement"></div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

同一标记的另一个版本：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body onresize="hello();">
        <div id="navigation_pane">
            <ul>
                <li>HOME</li>
                <li>CONTACTS</li>
                <li>JOIN</li>
                <li>ABOUT US</li>
            </ul>
        </div>
        <div id="testElement"></div>
    </body>
</html>

现在，在第一种情况下，标记位于脚本底部，并且页面调整大小时，函数hello()正常工作。所以，在这种情况下，我假设标签的功能运行以及执行脚本。

但是在第二种情况下，函数hello()没有运行，因此得出的结论是<script>标签只执行一个脚本，而不是对它的引用，在这种情况下，因为脚本在页面加载之前执行，它不能引用正文。

那么，标签的功能是什么？执行还是参考？

万一你想知道，这是剧本：

"use strict";
var navigationPane = document.getElementById("navigation_pane");
var height = navigationPane.clientHeight;

function hello(){
    document.getElementById("testElement").textContent = navigationPane.clientHeight;
}

Answer 1

是否引用了脚本，以便稍后可以运行脚本的所有功能，或者执行脚本并且不进行引用。

它引用一个脚本，使浏览器执行它。这可能会改变环境状态（例如，通过创建全局变量）。

但是在第二种情况下，函数hello（）没有运行，因此得出的结论是<script>标签只执行一个脚本，而不是对它的引用，在这种情况下，因为脚本在页面加载之前执行，它不能引用正文。

如果脚本在创建全局变量（在这种情况下为hello）之前出错，那么当您稍后尝试访问该变量时该变量将不存在。

Answer 2

（在这种情况下，run和execute这两个词是同义词，仅供参考。

脚本标记既作为脚本的引用又作为执行点。浏览器在程序上解析HTML，这意味着它从html标记开始，然后解析head标记，然后解析body，依此类推。当浏览器访问脚本标记时，它会停止，加载被引用的script，执行它，然后继续向下遍历解析文档其余部分的script标记。脚本可以是内嵌<script>alert('hey!')</script>和外部引用<script src='...'>。

当文档解析页面的HTML时，浏览器会执行<script />标记。在第一种情况下，<script />标记在浏览器解析了页面的大部分HTML后执行，这意味着#testElement现在已存在，因此可以使用document.getElementById找到，因为大多数DOM已经建成。

在第二种情况下，在浏览器解析script标记时执行head标记， #testElement成立之前。因此，您的脚本无法找到该元素，并且失败。

脚本标记的功能是什么？执行或参考？

2 个答案: