1、标签的位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
这种做法的目的是把所有外部文件（包含CSS文件和javascript文件）的引用都放在相同的地方。可是，在文档<head>元素中包含所有的js文件，意味着必须等到全部javascript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部javascript引用放在<body>元素中，放在页面的内容后面，如下例所示：
<html>
<head>
<title> New Document </title>
</head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样，在解析包含的javascript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
2、延迟脚本
HTML4.0为<script>标签定义了defer的属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到整个页面都解析完毕后在执行。因此，在<script>元素中设置defer属性（如下面的例子），实际上与上面介绍的把<script>元素放在页面底部的效果是一样的。
<html>
<head>
<title> New Document </title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>
这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后在执行。
不过，问题是并非所有浏览器都支持defer属性，IE和firefox3.0是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行
分享到：
相关推荐
`defer`属性是`<script>`标签的一个可选属性，它允许我们控制脚本的加载和执行顺序，从而改善页面的加载速度和用户体验。本文将深入探讨`defer`属性的工作原理、优点以及如何正确使用。 首先，了解`defer`的基本...
- 当`src`属性存在时，`<script>`标签必须为空，即不能包含内联脚本。 - 在使用`async`或`defer`属性时，需要注意它们之间以及与脚本依赖关系之间的相互影响。 ### 总结 `<script>`标签是HTML5中非常重要的元素之一...
`defer`表示延迟加载，所有`defer`脚本按顺序执行，但在`<body>`标签结束前。示例： ```html <script async src="script1.js"></script> <script defer src="script2.js"></script> ``` #### 4. 动态创建`<script>`...
1. **延迟脚本执行**：可以使用`<script>`标签的`defer`属性，这会让浏览器等待HTML解析完成后再执行JavaScript，但不会阻止页面渲染。 ```html <script defer src="your-script.js"></script> ``` 2. **异步加载*...
HTML4规范允许在<head>和<body>中任意位置放置<script>，但传统做法是将样式表<link>和脚本<script>放在<head>中，以便尽早定义页面外观和行为。然而，这样做会导致页面加载延迟，因为所有<script>都会阻塞页面渲染...
- `defer`: 可选，延迟脚本执行到文档解析完成之后，适用于外部脚本。IE7及更早版本也支持内联脚本的延迟执行。 - `language`: 已废弃，原本用于指定脚本语言，如JavaScript。 - `src`: 可选，指定包含JavaScript...
在`<script>`标签中，`defer`和`async`是两个重要的属性，它们都允许脚本在后台下载，不会阻塞页面的其他处理过程。 1. 不使用`defer`或`async`属性的`<script>`标签 当`<script>`标签中不包含`defer`或`async`...
在HTML5中，`<script>`标签新增了`async`和`defer`两个属性。`async`表示异步加载，脚本下载不会阻塞页面渲染，但下载完成后会立即执行，可能会影响执行顺序。`defer`则表示延迟执行，脚本在HTML解析完毕后，...
根据页面的需求和用户体验的考虑，可以灵活选择将脚本放在<head>、<body>底部或利用`defer`属性来平衡加载速度和页面呈现。对于大型应用或高性能要求的网站，可能还需要结合异步加载（async attribute）等技术进一步...
Yahoo的YSlow优化规则建议将<script>标签放在<body>标签的底部，而不是<head>中，原因在于浏览器在遇到<script>标签时会暂停页面的解析，无论是内联脚本还是外部引用的脚本。例如，在以下代码中，<script>标签用于在...
在HTML文档中，`<script>`标签用于引入JavaScript代码或者外部JS文件，它们的位置对于页面的加载和执行顺序有着重要影响。本文将深入探讨`<script>`在HTML中的最佳摆放位置，以及为什么需要考虑这个位置。 HTML文档...
- `defer`属性：当`defer`属性被添加到`<script>`标签中，脚本将在整个HTML文档解析完成后，但在`<body>`标签之前执行。这允许脚本按顺序执行，不会阻塞DOM的构建。 - `async`属性：添加`async`属性的脚本将以异步...
如果希望脚本延迟执行或者不阻塞页面渲染，可以使用`async`或`defer`属性。 另外，注意到注释在JavaScript中的表示方式，如： ```javascript <!-- 这是一个HTML注释 --> <script type="text/javascript"> // 这是...
值得注意的是，如果`<script>`标签包含外部资源（如引用外部JS文件），这可能会延迟页面内容的呈现，因为浏览器需要等待脚本加载和执行完毕才能继续解析HTML。 2. 放在`<body>`部分： 如果JavaScript代码用于响应...
HTML的`<script>`标签是最常见的加载脚本的方式。通过设置`src`属性，可以指定外部JavaScript文件的URL。例如： ```html <script src="path/to/script.js"></script> ``` 然而，这种方式是静态加载，所有脚本会...
动态创建的<script>标签可以被放置在文档的任意位置，包括<head>内。脚本的加载和执行不会阻塞页面其他内容的下载和渲染，从而提高了页面性能。动态脚本加载还允许开发者在脚本加载完成后执行回调函数，增强了脚本...
4. **延迟加载（defer）**：`<script defer src="script.js"></script>`这个特性允许脚本延迟执行，直到整个HTML文档解析完成，但在`DOMContentLoaded`事件触发之前。这样，脚本执行的顺序按照它们在HTML中的出现...
此外，利用`<script>`标签的`defer`和`async`属性，可以实现非阻塞的JavaScript加载。`defer`属性使得脚本在文档解析完成后、`DOMContentLoaded`事件触发之前执行，而`async`属性则表示脚本加载完毕后立即执行，不...
【第八章】JavaScript【Script标签与访问HTML页面(2)】这一主题主要涵盖了JavaScript在网页中的应用，特别是关于`<script>`标签的使用以及如何通过JavaScript来操作和访问HTML页面内容。JavaScript是一种广泛用于Web...