把javascript放在头上和放在主体上有区别吗

is there a difference between putting a javascript in the head or in the body?

本文关键字：有区别 主体 javascript 在头上      更新时间：2023-09-26

我对javascript很陌生，不知道使用"selectize"输入的这两段代码之间是否有区别。

两者都有效，但我不知道其中一个是否更好，或者它们是否真的一样。如果有的话，哪一个更可取？是否有关于在html文档中放置javascript的"规则"或最佳实践？

抱歉，如果这是非常琐碎的：）

tl；dr

第一个代码在<body>标签内有$('#location').selectize({ .... })

第二个代码具有相同的$('#location').selectize({ .... })，但在<head>标签中，并包含在中

$(document).ready(function () { $('#location').selectize({ .... }) )}

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>

        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">
        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
<script>
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
</script>
</body>
</html>

以及在头中具有所选项目的版本2

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
    <script>
    $(document).ready(function () {
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
});
</script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>

        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">
        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
</body>
</html>

最好将javascript放在</body>之前的底部。这样就不会阻碍渲染（有利于性能）。此外，在这一点上，您知道DOM（HTML元素树）已经为您准备好了。

$(document).ready(function () {})是jQuery等待DOM就绪的方式。如果你把javascript放在<head>中，你就必须使用这种技术，因为很明显，你想要处理的所有实际HTML都在它之后，需要进行解析。一旦DOM准备就绪，就会调用回调（传递给.ready()的函数）。

在jQuery革命之初，这个问题并不是很热门。jQuery在顶部，随时可以使用脚本。

随着为任何可能的目的开发的数千个插件的爆炸性增长，你会看到网页上有许多必须加载的插件。

将所有这些东西放在<head>标签会减慢网站加载的时间，这是因为加载插件需要完成太多的请求。

因此，将运行初始HTML所需的"css"answers"js"放在头部，并在页面末尾的"body"标记所有其他脚本之前，这是一条常见的经验法则。

在所有这些的最后，你可以有一个额外的脚本标签，其中可以放置一些自定义代码，例如

$(document).ready(function(){
    //stuff here
})

您应该放置javascript代码来快速加载页面。浏览器从上到下渲染代码。如果您将javascript代码放在底部，将首先加载页面元素，然后再加载javascript代码。

如果您将JS放在头部，并且没有侦听器来检测DOM加载，那么您可能无法操作DOM对象。通常最好将脚本放在正文的底部，这样可以防止任何错误，并允许您向所有DOM元素添加内容。

例如，将以下脚本放在头中会导致错误

<script>
   document.getElementById('myElement').setAttribute('data-myValue','myValue')
</script>
相关文章：