Question

我是javaScript的新手，几天前开始学习它。所以我正在学习功能和我正在阅读的大多数教程都说应该将函数放在head标记中的脚本标记中，以便可以先加载它们。那是什么意思？因为我写了这段代码

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
function1();
function function1 () {
document.getElementById("demo").innerHTML="HEY";
}
</script>
</body>
</html>

并且代码有效。事情是我不明白怎么做。你如何称呼一个没有被加载的功能＆＃34;然而？浏览器是否以与HTML文档其余部分不同的方式读取脚本标记？任何人都可以解释它是如何工作的？

Answer 1

您编码的方式是正确的脚本必须位于底部

根据雅虎加快网站的最佳做法

将脚本放在底部标记： javascript引起的问题脚本是他们阻止并行下载。 HTTP / 1.1 规范建议浏览器下载不超过两个每个主机名并行的组件。如果你提供的图像多个主机名，您可以获得两次以上的下载平行。但是，在下载脚本时，浏览器不会即使在不同的主机名上，也可以启动任何其他下载。在一些在将脚本移到底部并不容易的情况下。如果，为例如，该脚本使用document.write插入页面的一部分内容，它不能在页面中移动较低。可能还有范围问题。在许多情况下，有办法解决这些问题的情况。经常出现的另一种建议是使用延迟脚本。 DEFER属性表示脚本有不包含document.write，并且是浏览器的线索继续渲染。不幸的是，Firefox不支持DEFER 属性。在Internet Explorer中，脚本可能会延迟，但不会延迟尽可能多。如果可以延迟脚本，也可以移动它到页面底部。这将使您的网页加载速度更快。顶部|讨论这条规则

来源：Best Practices for Speeding Up Your Web Site

根据Google Apps脚本最佳做法

最后加载JavaScript 。许多Web开发人员建议在底部加载JavaScript代码提高响应能力的页面，这一点更为重要使用HTML服务。在NATIVE沙箱模式中，您可以使用所有脚本负载被扫描并消毒客户端，这可能需要几个秒。将标记移动到页面末尾即可 HTML内容在处理JavaScript之前呈现，允许您向用户呈现微调器或其他消息。

来源：Load JavaScript last

变量和函数Hoisting in JavaScript

<script>

function function1 () {
     document.getElementById("demo").innerHTML="HEY";
}

function1();
</script>

Answer 2

这主要是一种优化，script标签可以放在很多地方（不仅仅是head）。在过去，它们被放置在body的末尾以优化页面的加载，因此浏览器可以在解析javascript之前显示页面，因此页面看起来响应更快。

现在，javascript通常放在一个单独的文件中，建议将它们放在head中并使用async或defer标记添加到它们（你不能async或defer内嵌javascript）。

声明如下函数：

myFuncName(); //Valid
function myFuncName () {}

使其可以在定义它的整个范围内调用。同时为变量分配函数不允许这种情况发生：

myFuncName(); //Invalid
var myFuncName = function () {};

来源和进一步阅读：

Answer 3

脚本标记是整个块。在加载整个脚本标记后调用funtion1（）。

在javascript中加载函数

3 个答案: