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属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行
同时其它浏览器可以使用async="true"属性，声明脚本异步加载。
分享到：
相关推荐
在网页开发中，有时我们需要在页面加载过程中动态地向`<head>`标签内添加`<script>`元素，以便实现异步加载脚本、延迟加载或按需加载等功能。这种技术对于优化网页性能、减少首屏加载时间以及提高用户体验至关重要。...
- 当`src`属性存在时，`<script>`标签必须为空，即不能包含内联脚本。 - 在使用`async`或`defer`属性时，需要注意它们之间以及与脚本依赖关系之间的相互影响。 ### 总结 `<script>`标签是HTML5中非常重要的元素之一...
`defer`属性是`<script>`标签的一个可选属性，它允许我们控制脚本的加载和执行顺序，从而改善页面的加载速度和用户体验。本文将深入探讨`defer`属性的工作原理、优点以及如何正确使用。 首先，了解`defer`的基本...
1. **延迟脚本执行**：可以使用`<script>`标签的`defer`属性，这会让浏览器等待HTML解析完成后再执行JavaScript，但不会阻止页面渲染。 ```html <script defer src="your-script.js"></script> ``` 2. **异步加载*...
传统做法是将`<script>`标签放在`<head>`标签中，但这会导致页面内容直到所有JavaScript下载并执行完毕后才显示。为提高用户体验，现代做法是将`<script>`标签放在`<body>`标签的底部，例如： ```html ... <body...
总结起来，网页跳转可以通过服务器端编程或客户端脚本实现，有多种方式可以选择，包括直接使用JavaScript的`window.location`，HTML的`<meta>`标签，以及针对不同浏览器特性的定制代码。选择哪种方式取决于具体需求...
`defer`表示延迟加载，所有`defer`脚本按顺序执行，但在`<body>`标签结束前。示例： ```html <script async src="script1.js"></script> <script defer src="script2.js"></script> ``` #### 4. 动态创建`<script>`...
然后，通过`<script>`标签引入jQuery和PgwMenu的脚本，并使用`$('#myMenu').pgwMenu();`一行代码初始化菜单。 在压缩包文件“PgwMenu-master”中，除了核心的JavaScript和CSS文件外，可能还包含文档、示例和源码，...
这通常通过在 `<head>` 标签内添加 `<script>` 标签来完成。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/jquery.menu-1.0.js"></script> ``` 然后，你...
<br>Safari 2 3575ms 475ms 753% <br>Opera 9.1 3196ms 326ms 980% <br>Average improvement: 867% <br><br>下表为jQuery1.1.3与常用的一些JS库选择器的对比：<br>Browser Prototype jQuery Mootools Ext Dojo <br>...
HTML4规范允许在<head>和<body>中任意位置放置<script>，但传统做法是将样式表<link>和脚本<script>放在<head>中，以便尽早定义页面外观和行为。然而，这样做会导致页面加载延迟，因为所有<script>都会阻塞页面渲染...
2. **引入API**：在`</body>`标签之前添加`<script>`标签，指定`src`属性为API的URL，这样当页面加载时，JavaScript会自动执行这个URL指向的脚本。 需要注意的是，这种方法依赖于第三方服务，如果服务不可用或被...
传统的做法是将<script>标签放置在HTML文档的<head>部分，但随着网页复杂性的增加，这种做法可能会导致页面加载延迟，尤其是在依赖大量JavaScript代码的场景下。 首先，当JavaScript文件位于<head>中时，浏览器会...
Yahoo的YSlow优化规则建议将<script>标签放在<body>标签的底部，而不是<head>中，原因在于浏览器在遇到<script>标签时会暂停页面的解析，无论是内联脚本还是外部引用的脚本。例如，在以下代码中，<script>标签用于在...
这种机制意味着如果在<head>部分放置过多的<script>标签，尤其是大型或多个外部脚本，会导致页面加载显著延迟，因为浏览器必须等待每个脚本下载并执行完成才能继续解析HTML。 例如，考虑以下HTML代码片段： ```...
我们可以在`<head>`或`<body>`标签内添加一个`<script>`标签，然后编写一段JavaScript代码来实现自动跳转。下面是一个示例： ```html <!DOCTYPE html> <html> <head> <title>5秒后自动跳转页面</title> <script> ...
值得注意的是，如果`<script>`标签包含外部资源（如引用外部JS文件），这可能会延迟页面内容的呈现，因为浏览器需要等待脚本加载和执行完毕才能继续解析HTML。 2. 放在`<body>`部分： 如果JavaScript代码用于响应...
在HTML5中，`<script>`标签新增了`async`和`defer`两个属性。`async`表示异步加载，脚本下载不会阻塞页面渲染，但下载完成后会立即执行，可能会影响执行顺序。`defer`则表示延迟执行，脚本在HTML解析完毕后，...
此外，还提到了外部JavaScript文件的引入，通过`<script>`标签的`src`属性指向.js文件： ```html <script src="xxx.js"></script> ``` 这样，浏览器会请求指定URL的.js文件，并将其内容作为JavaScript代码执行。 在...
在HTML文件中，通过`<script>`标签链接到这些资源。接着，可以通过jQuery选择器选取要应用动画的元素，并调用`.animate3d()`方法来初始化插件。此方法允许设置各种参数，如动画速度、3D旋转的角度以及是否启用硬件...