我使用引导程序模板之类的模板已经有一段时间了,当我尝试修改或添加更多脚本时,我总是遇到这两种情况
场景1:在某些模板中,只有将脚本放在的顶部,即,才能工作。,但在元素的底部不起作用。
<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>
场景2:页脚在某些模板中,脚本只有在放在页脚底部时才起作用,即。,但放在元素的顶部时不起作用。
<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>
我真的想要理解这些场景背后的想法。是什么导致了这种行为?或者应该考虑什么?
发布于 2016-03-26 05:58:01
脚本的位置表示依赖关系:如果脚本A需要脚本B中的某些值,则脚本B放在脚本A的上方。例如:某些JavaScript需要jQuery,因此您将jQuery放在任何需要它的脚本之上。
这是因为脚本是从上到下运行的。
一些脚本需要加载DOM,例如,它们操作一些超文本标记语言元素,即使用document.getElementById
或$("selector")
。在这些情况下,脚本需要HTML元素,因此这些元素需要放在需要它们的JavaScript之上,或者换句话说,需要一些HTML元素的JavaScript需要放在这些元素的下面。
还有其他选项可以处理此问题,例如使用window.addEventListener("DOMContentLoaded", function(){
…})
或jQuery的$(document).ready(function(){
…})
。这些选项添加稍后在触发事件时运行的事件侦听器。
另一个较新的替代方法是defer
属性。
更多细节请访问Why does jQuery or a DOM method such as getElementById not find the element?。
有时,脚本也放在底部,以便更快地加载页面内容,因为必须下载脚本,并且只在脚本之后加载内容。您可以使用async
属性作为替代。
发布于 2016-03-26 05:50:51
Javascript一次只运行一件事。通常,它首先在顶部运行代码。因此,在运行声明变量或函数的代码之前,不能请求它们。例如:
<script> var one = 1 </script>
<script> console.log(one) </script>
将注销1,但是:
<script> console.log(one) </script>
<script> var one = 1 </script>
将注销未定义的。
在您的示例中,我假设代码中断是因为它需要jquery,但jquery是在代码尝试运行后加载的。
发布于 2016-03-26 06:11:59
JavaScript是一个单线程编程环境。在head标签顶部加载多个脚本时,在加载该脚本标签之前,将阻止该脚本标签下的其余脚本标签。如果一个脚本标记无法加载,那么所有其他脚本标记都会被卡住……直到浏览器对该脚本标记超时。为了解决这个阻塞问题,开发人员在过去几年中一直在将脚本标记移动到网页的底部。
当一个站点在页面顶部有很多JS文件时,这个问题非常明显,这些文件是从第三方、第四方、第五方到第N方广告供应商的服务器加载的。当广告供应商的服务器离线时,他们的广告就不能再提供了--这种情况经常发生--然后页面上的JS就会停下来,等待浏览器超时。这会导致页面在加载时被卡住。这造成了糟糕的用户体验。
开发人员将脚本标记移动到页面底部的技巧,有助于缓解这两个问题。它还使得网页加载更快,对用户和搜索机器人来说都更快。因为搜索引擎机器人关心页面加载时间,所以当他们的网页快速加载时,他们可以给网站带来提振。
因此,尽可能地将脚本标记移动到页面的底部是很重要的。
https://stackoverflow.com/questions/36228495
复制相似问题