我应该在哪里声明我的页面中使用的JavaScript文件?在附近?

时间:2009-06-18 14:51:50

标签: javascript html

我正在阅读教程,并且作者提到要在HTML中关闭body标记(</body>)附近的Javascript文件。

我想知道我不应该在head部分声明/定义JavaScript包含哪些类型的功能?在结束body标记附近包含像Google Analytics这样的JavaScript是有道理的。在结束body标记附近定义JavaScript时应该注意哪些地方?

12 个答案:

答案 0 :(得分:38)

通常会争辩说,出于速度目的,您应该将脚本标签放在文档的末尾(在关闭正文标记之前)。虽然这会导致最快的页面加载,但它有一些严重的缺点。

首先,网页开发的一个常见习惯是在头文件,页脚文件和中间内容。为了将不必要的Javascript保持在最低限度,您通常希望将代码段放在单独的页面中。

如果你包含jquery,例如,在文档的末尾,你的jquery代码片段(比如文档就绪的东西)必须在之后发生。从发展的角度来看,这可能很尴尬。

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

例如,如果您将一个表放在文档中并且正好放在正文关闭标记之前:

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

通过适当的样式,应用的效果通常是可见的。我个人认为这可能会导致糟糕的用户体验。我认为,如果你没有令人不安的视觉效果,你最好让页面加载稍微更慢(通过将脚本置于顶部)。

我通常提倡有效的缓存策略,因此您只需在更改时下载Javascript文件,如Supercharging Javascript in PHP(但原则适用于任何语言,而不仅仅是PHP),并且仍然将脚本放在顶部。它更方便。

答案 1 :(得分:12)

Yahoo YSlow tool对此提出了建议:

  

脚本引起的问题是   他们阻止并行下载。该   HTTP / 1.1规范表明   浏览器下载不超过两个   每个主机名并行的组件。   如果您从多个图像提供图像   主机名,你可以得到两个以上   下载并行发生。而   然而,脚本正在下载   浏览器不会启动任何其他   下载,甚至是不同的   主机名。

     

在某些情况下,这并不容易   将脚本移到底部。如果,为   例如,脚本使用   document.write插入部分内容   页面的内容,它无法移动   在页面下方。可能还有   范围问题。在许多情况下,那里   是解决这些问题的方法   的情况。

     

经常提出另一种建议   出现的是使用延迟脚本。   DEFER属性表示   脚本不包含   document.write,是一个线索   浏览器,他们可以继续   渲染。不幸的是,Firefox   不支持DEFER属性。   在Internet Explorer中,脚本可以   被推迟,但没有那么多   期望。如果脚本可以延期,   它也可以移到底部   这页纸。这将使你的网络   页面加载速度更快。

答案 2 :(得分:12)

通过将它们放入<head/>,您可以强制浏览器下载文件,然后才能呈现页面。这导致感知的加载时间减慢。

通过将它们放在页脚中,就在关闭正文标记之前,浏览器将不会加载它们,直到它到达解析HTML的那一点。这意味着脚本将在页面加载过程中稍后运行,但不会阻止资产下载和呈现过程。

最有效的取决于您以及您如何开发代码。

答案 3 :(得分:4)

Google pagespeed有一些关于如何并行下载脚本的nice explanation

他们仍然建议将它们放在页面的头部。

答案 4 :(得分:2)

脚本标记通常应位于head部分。例外情况是,当他们执行重要的即时处理时,应尽可能延迟到页面加载中,以避免干扰页面出现,例如Google Analytics,或者脚本标记的实际放置是其行为的一部分。

答案 5 :(得分:1)

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

Ergo,你最终想要的东西对页面渲染没有影响,反之亦然。

答案 6 :(得分:1)

我喜欢在头部加载一个小的js文件,它处理(1)在呈现页面之前发生的任何事情,以及(2)在页面加载之后加载其他脚本文件,或者根据需要加载。

答案 7 :(得分:1)

我认为最好在关闭正文标记之前放置脚本标记。这是因为:

  • 如果元素低于脚本,则会阻止渲染。
  • 在IE6中,如果页面中的IE7资源低于脚本,则会阻止其下载。

来自this文章。雅虎的表现规则6也是Move Scripts to the Bottom

答案 8 :(得分:0)

你应该在</body>附近做。原因很简单:如果将其放入head区域,则必须在正文区域之前加载文件。那时,用户只看到一个白色的屏幕。

但这取决于您的网站。我会在头部区域加载mootools等框架,事件或AJAX的其他函数或者应该在</body>附近加载。

答案 9 :(得分:0)

将它放在身体末端AFAIK附近的唯一原因是能够在 Web浏览器解析HTML文档后执行JavaScript 。例如。如果您的JavaScript处理“名为hello的所有元素”,则浏览器需要在执行JavaScript之前阅读整个文档。有道理,对吧?

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

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

...确保在执行内部函数之前已将整个文档加载到DOM中。当然,这也可以使用普通的JavaScript来完成,但要注意不要破坏与某些浏览器的兼容性,因为它们的需求往往会有很大不同。

答案 10 :(得分:0)

&lt; script&gt;的位置元件

脚本元素阻止渐进式页面下载 浏览器一次下载几个组件,但是当它们遇到外部脚本时,它们会停止进一步下载,直到下载,解析和执行脚本文件为止。
这会损害整个页面时间,特别是如果在页面加载期间多次发生这种情况 要最小化阻止效果,可以将脚本元素放在末尾 页面,在结束标记之前。
这样,脚本就没有其他资源可以阻止。 其余的页面组件将被下载并且已经吸引用户 最糟糕的反模式是在文档的头部使用单独的文件:

<!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>

“JavaScript模式,由Stoyan Stefanov撰写 (O'Reilly出版)。版权所有2010 Yahoo!,Inc.,9780596806750。“     

答案 11 :(得分:0)

你应该在</body>之前放置JavaScript。理想情况下,您的HTML应该在没有JavaScript的情况下运行,因此它应该是最后加载的内容之一。

请记住,您应该使用CSS来隐藏元素而不是JavaScript。这样可以避免在页面加载时看到元素出现和消失。

您可能还会遇到以下问题......

问题

在这种情况下,我将以PHP为例。

您的footer.php文件目前可能如下所示:

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

但是,在极少数情况下,您想要为一个页面添加一些<script>会发生什么?你不能在footer.php之后把它放在<body>之后,因为你不再在jquery.js标签中,但你不能把它放在之前,因为那样你&# 39;将丢失代码中的footer-start.php

解决方案

拥有<script src="jquery.js"></script> <script src="custom.js"></script> 个文件:

footer-end.php

</body> </html> 文件:

footer.php

让你的<?php require 'footer-start.php'; require 'footer-end.php'; 变得简单:

<script>

然后,在极少数情况下您需要为一个页面使用自定义<?php require 'footer-start.php'; ?> <script>...</script> <?php require 'footer-end.php'; ?> ,请执行以下操作:

footer.php

这样做意味着您不必更改以前引用package com.nt; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.sql.Statement; import java.util.*; import java.io.*; public class DBResult { public static void main(String[] args)throws Exception { //genaral setting try{ Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con=DriverManager.getConnection("jdbc:odbc:oradsn","username","pass"); Statement st=con.createStatement(); ResultSet rs=st.executeQuery("select snum,sname,sadd from student"); //here resultset ResultSetMetaData rm=rs.getMetaData(); //get column count int cnt=rm.getColumnCount(); //prints col name for(int i=0;i<=cnt;++i) { System.out.println(rm.getColumnLabel(i)+"\t\t\t"); }//for System.out.println(); //code to prints column value //System.out.println(rm.getColumnDisplaySize(i)); while(rs.next()) { for(int i=0;i<cnt;++i) { System.out.println(rs.getString(i)+"\t\t\t"); }//for System.out.println(); }//while //close jdbc conn rs.close(); st.close(); con.close(); //class } catch (ClassNotFoundException e) { e.printStackTrace(); } } } 的所有代码。