JS <script>标签的位置

按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：

<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" src="example1. js"></script>
        <script type="text/javascript" src="exarnple2. js"></script>
    </head>
    <body>
        <!-- 这里放置内容 -->
    </body>
</html>

这种做法的目的就是把所有外部文件（包指CSS 文件和JavaScript 文件）的引用都放在相同的地方。可是，在文挡的<head>元素中包含所有JavaScript 文件，意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元索中，放在页面的内容后面。如下例所示：

<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- 这里放置内容 -->
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </body>
</ htrnl>

这样，在解析包含的JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

JavaScript入门教程

专题分析

学习助手

JS <script>标签的位置