为什么JavaScript在页面底部或有时从页面顶部运行 [英] why javascript runs when at bottom of page or sometimes from top of page
问题描述
我一直在使用bootstrap模板等模板，而当我尝试修改或添加更多脚本时，我总是会遇到这两种情况。
情景1：在某些模板中，脚本只有在放在顶部即头部时才起作用。
< head>
<！ - 这里需要的脚本例如 - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js>< / script>
< / head>
< body>
< div class =content>
<！ - 需要脚本的元素，即表单和按钮 - >
< / div>
< footer>
< / footer>
< / body>
情景2：在某些模板中，脚本只有在放置在底部即页脚。
< head>
< / head>
< body>
< div class =content>
<！ - 需要脚本的元素，即表单和按钮 - >
< / div>
< footer>
<！ - 这里需要的脚本例如 - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js>< / script>
< / footer>
< / body>
我想要了解这些场景背后的想法。这是什么导致这种行为？或者应该考虑什么？
脚本的放置表示依赖关系：如果脚本A需要脚本B的某些值， B放在上面脚本A中。例如：某些JavaScript需要jQuery，因此您将jQuery放在任何需要它的脚本上方。
脚本从上到下运行。
有些脚本需要加载DOM，例如它们对一些HTML元素进行操作，即它们使用 document.getElementById 或 $（selector）。在这些情况下，脚本需要HTML元素，因此这些元素需要位于需要它们的JavaScript之上，或者换句话说，需要某些HTML元素的JavaScript需要放在之上> 那些。
还有其他的选择来处理这个问题，例如利用 window.addEventListener（DOMContentLoaded，function（）{ ... }）或者jQuery的 $（文件）。就绪（函数（）{ ... }）。这些选项添加事件侦听器，每当事件被触发时，这些事件侦听器都会在之后运行。 。有时，脚本也是这样的。放在底部加载页面的内容更快，因为脚本必须下载，内容只在脚本后加载。
I have been using templates such as bootstrap templates for a while and as i try to modify or add more script, i always encounter these two scenario
SCENARIO 1: in some templates, the scripts only works when they are placed at the top i.e. head. but does not work while at the bottom of the elements
<head>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
</footer>
</body>
SCENARIO 2: in some templates, the scripts only works when they are placed at the bottom i.e. footer. but does not work when placed at the top of the elements
<head>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</footer>
</body>
I rely wanted to understand the idea behind these scenarios. What is it that causes such behavior? Or what should one consider?
The placement of scripts indicates dependencies: if script A needs some values from script B, then script B is placed above script A. For example: some JavaScript requires jQuery, so you place jQuery above any script that requires it.
That’s because scripts run from top to bottom.
Some scripts require the DOM to be loaded, e.g. they operate on some HTML elements, i.e. they use document.getElementById or $("selector"). In those cases the HTML elements are required by the script, so those elements need to be above the JavaScript that requires them, or in other words, the JavaScript that requires some HTML elements needs to be placed below those.
There are other options for dealing with this, e.g. utilizing window.addEventListener("DOMContentLoaded", function(){…}) or jQuery’s $(document).ready(function(){…}). These options add event listeners that run later, whenever an event is fired.
More details at Why does jQuery or a DOM method such as getElementById not find the element?.
Sometimes, scripts are also put at the bottom to load the content of the page faster, because the scripts have to be downloaded and the content is only loaded after the scripts.
这篇关于为什么JavaScript在页面底部或有时从页面顶部运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
