Fatal编程技术网
  • javascript/
  • 我应该在哪里声明页面中使用的JavaScript文件？在<；头></头>；或接近</车身>；？

我应该在哪里声明页面中使用的JavaScript文件？在<；头></头>；或接近</车身>；？

javascript html

我应该在哪里声明页面中使用的JavaScript文件？在<；头></头>；或接近</车身>；？,javascript,html,Javascript,Html,我正在阅读一篇教程，作者提到在HTML中的body标记（）附近包含Javascript文件 我想知道我不应该在head部分声明/定义JavaScript的功能类型是什么？在我看来，在结尾的body标记附近加入类似于谷歌分析的JavaScript是有意义的。在定义JavaScript include时，我应该注意什么地方？在结束正文标记附近？通常会有人认为，为了提高速度，应该将脚本标记放在文档末尾（在结束正文标记之前）。虽然这将导致最快的页面加载，但它有一些严重的缺点 首先，一个常见的网页开发习语

我正在阅读一篇教程，作者提到在HTML中的
body
标记（
）附近包含Javascript文件

我想知道我不应该在
head
部分声明/定义JavaScript的功能类型是什么？在我看来，在结尾的
body
标记附近加入类似于谷歌分析的JavaScript是有意义的。在定义JavaScript include时，我应该注意什么地方？在结束
正文
标记附近？
通常会有人认为，为了提高速度，应该将脚本标记放在文档末尾（在结束正文标记之前）。虽然这将导致最快的页面加载，但它有一些严重的缺点

首先，一个常见的网页开发习语是头文件、页脚文件和中间内容。为了将不必要的Javascript保持在最低限度，您通常需要在各个页面中放置代码片段

例如，如果您在文档末尾包含jquery，那么jquery代码片段（如文档准备就绪的内容）必须在之后出现。从开发的角度来看，这可能会很尴尬

其次，根据我的经验，由于页面加载速度更快，您最终可能会注意到应用了某些效果，因为在应用这些效果时页面已经加载了

例如，如果在文档中放置一个表，并将其放在body close标记put之前：


$(function() {
  $("tr:nth-child(odd)").addClass("odd");
});


通过适当的样式，应用的效果通常是可见的。就我个人而言，我认为这可能会造成糟糕的用户体验。我认为如果你没有得到令人不安的视觉效果，通常你最好让页面加载稍微慢一点（把脚本放在顶部）

我通常提倡有效的缓存策略，这样您只需在Javascript文件发生变化时下载它们，就像在中一样（但原则适用于任何语言，而不仅仅是PHP），并且仍然将脚本放在首位。更方便。
有以下建议：

脚本引起的问题是
他们阻止并行下载。这个
HTTP/1.1规范建议
浏览器下载不超过两个
每个主机名并行的组件。
如果您从多个站点提供图像
主机名，您可以获取两个以上的主机名
下载将并行进行。虽然
脚本正在下载，但是
浏览器不会启动任何其他浏览器
下载，即使是在不同的网站上
主机名

在某些情况下，要做到这一点并不容易
将脚本移动到底部。如果，为了
例如，脚本使用
document.write插入
页面的内容，无法移动
在页面的下方。也可能有
范围界定问题。在许多情况下
有办法解决这些问题吗
情况

另一个经常出现的建议
出现的是使用延迟脚本。
DEFER属性表示
脚本不包含
document.write，并且是
浏览器，他们可以继续
翻译不幸的是，Firefox
不支持“延迟”属性。
在Internet Explorer中，脚本可能会
被推迟，但不如
渴望的如果脚本可以延迟，
它也可以移动到屏幕的底部
这一页。这将使你的网站
页面加载速度更快


声明接近结尾的原因是，您的页面可以在等待获取.js之前开始绘制


因此，最后需要的内容对页面呈现没有影响，反之亦然。
脚本标记通常应位于页眉部分。例外情况是，当他们执行重要的即时处理时，应该在页面加载中延迟到尽可能晚的时间，以避免干扰即将出现的页面（如谷歌分析），或者当脚本标记的实际位置是其行为的一部分时。
您应该在
附近执行此操作。原因很简单：如果将其放入
头部
区域，则必须先加载文件，然后才能加载主体区域。此时，用户只看到一个白色屏幕


但这取决于你的网站。我会在head区域加载mootools之类的框架，其他事件函数或AJAX或者应该在
附近加载的东西。将其放在正文末尾AFAIK的唯一原因是，在web浏览器解析完HTML文档后，能够执行JavaScript。例如，如果您的JavaScript处理“名为
hello
的所有元素”，则浏览器需要在执行JavaScript之前读取整个文档。有道理，对吧

例如，在JQuery中，您可以将JavaScript放在文档中的任何位置，并使用：


$(document).ready(function () {
  // your code here
});



…以确保在执行内部函数之前已将整个文档加载到DOM中。当然，这也可以通过普通的JavaScript实现，但请注意不要破坏与某些浏览器的兼容性，因为它们的需求往往会有很大差异。
将它们放在
中，可以强制浏览器在呈现页面之前下载文件。这会导致感知的加载时间减慢

通过将它们放置在页脚中，正好在结束正文标记之前，浏览器将不会加载它们，直到它在解析HTML时到达该点。这意味着脚本将在页面加载过程中稍后运行，但不会阻止资产下载和呈现过程

哪种方法最有效取决于您以及您如何开发代码。
谷歌有一些关于如何并行下载脚本的知识


他们的建议仍然是将它们放在页面的头部。
我喜欢在头部加载一个小的js文件，它可以处理（1）页面呈现之前发生的任何事情，以及（2）页面加载之后或根据需要加载其他脚本文件。
我认为最好将脚本标记放在结束体标记之前。因为：<!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>



<!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script>
</head>
<body>
    ...
</body>
</html>



<!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    ...
    <script src="all_20100426.js"></script>
</body>



<script src="jquery.js"></script>
<script src="custom.js"></script>
</body>
</html>



<script src="jquery.js"></script>
<script src="custom.js"></script>



</body>
</html>



<?php
  require 'footer-start.php';
  require 'footer-end.php';



<?php require 'footer-start.php'; ?>
<script>...</script>
<?php require 'footer-end.php'; ?>