JavaScript代码在网页的使用方式及注意事项

JavaScript简介与实验基础可参见 https://blog.csdn.net/cnds123/article/details/109165450

JavaScript代码在网页的使用方式

★内联脚本（Inline Script）：将代码直接嵌入到HTML文件中的<script>标签中放置在<head>或<body>签内部。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script>
    // JavaScript代码放置在这里
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

内联脚本的优点是简单、直接，但对于大量的JavaScript代码来说，会使HTML文件变得冗长，可维护性较差。

★外部脚本（External Script）：将JavaScript代码放在外部的.js文件中，然后通过<script>标签的src属性引入。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

外部脚本的优点是可以将JavaScript代码与HTML文件分离，提高代码的可维护性和复用性。同时，浏览器可以缓存外部脚本文件，提高页面加载速度。

<script>标签的async属性和defer属性

async属性和defer属性是在HTML5中引入的，于2014年成为HTML规范的一部分。它们的引入是为了改善JavaScript在页面加载过程中的性能和用户体验。async属性和defer属性是为了优化JavaScript在页面加载过程中的性能而引入的，它们在HTML5规范中成为了标准的一部分。

☆异步脚本（Asynchronous Script）：通过添加async属性，使脚本在下载时不会阻塞页面的渲染。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js" async></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

异步脚本适用于不依赖于页面加载顺序的代码，可以提高页面加载性能。

☆延迟脚本（Deferred Script）：通过添加defer属性，使脚本在页面解析完毕后再执行，但在DOMContentLoaded事件之前执行。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js" defer></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

延迟脚本适用于需要在页面加载完毕后执行的代码，可以避免阻塞页面的渲染。

注意事项

在早期的HTML规范中，JavaScript通常被放置在<head>或<body>标签中，这会导致浏览器在加载和执行JavaScript代码时阻塞页面的渲染，从而延迟页面的显示和交互。为了解决这个问题，async属性和defer属性被引入。JavaScript代码写在<head>里面、写在<body>里面、写在<body>后面的区别：

1）JavaScript代码写在<head>里面：这种情况下，JavaScript代码会在页面加载过程中被解析和执行。由于JavaScript代码在<head>中执行时，页面的内容还没有完全加载和解析，所以如果JavaScript代码依赖于页面中的元素，可能会导致找不到元素或操作错误。为了避免这种情况，通常会将JavaScript代码放在window.onload事件处理程序中，确保在页面完全加载后再执行。

2)JavaScript代码写在<body>里面：这种情况下，JavaScript代码可以直接与页面中的元素进行交互，因为在<body>中的JavaScript代码会在页面加载和解析过程中执行。这种方式适用于需要与页面元素交互的代码，例如获取元素、修改元素属性等。

3)JavaScript代码写在<body>后面：这种情况下，整个网页已经加载完毕，包括页面内容和JavaScript代码。因此，这里适合放置需要立即执行的命令，例如初始化操作、调用函数等。但是，如果JavaScript代码依赖于页面中的元素，仍然需要确保在元素加载完毕后再执行相关操作，可以使用window.onload事件或其他等待页面加载的机制。

async属性允许浏览器异步加载和执行JavaScript代码，而不会阻塞页面的渲染。这样可以提高页面的加载性能，特别是对于独立的、不依赖于页面内容的脚本。

将<script>标签的async属性设置为true时，浏览器会异步加载并执行JavaScript代码，不会阻塞页面的渲染。这意味着页面的加载和渲染可以继续进行，而不必等待JavaScript代码加载和执行完成。适用于独立的、不依赖于页面内容的脚本。然而，使用async属性加载的脚本的执行顺序是不确定的，因此如果脚本之间有依赖关系，可能会导致错误。

defer属性也允许浏览器异步加载JavaScript代码，但会在页面解析完毕后按照顺序执行。这样可以确保脚本的执行顺序是可控的，适用于需要按照特定顺序执行的脚本。

将<script>标签的defer属性设置为true时，浏览器会异步加载JavaScript代码，但会在页面解析完毕后按照顺序执行。这意味着页面的加载和渲染不会被阻塞，而且脚本的执行顺序是可控的。适用于需要按照特定顺序执行的脚本，例如操作页面元素或依赖于DOM结构的代码。

选择使用async属性还是defer属性取决于脚本的执行顺序需求。如果脚本之间没有依赖关系，且可以并行加载和执行，则可以使用async属性。如果脚本之间有依赖关系，需要按照特定顺序执行，则可以使用defer属性。

需要注意的是，async和defer属性只对外部脚本有效，对于内联脚本无效。这是因为内联脚本已经在页面加载和解析过程中被解析和执行，无需异步或延迟加载。

小结

在综合权衡使用<script>标签的async属性和defer属性以及将JavaScript代码写在<head>里面、写在<body>里面、写在<body>后面的规则时，可以考虑以下几个因素：

1）页面加载性能：如果你希望最大程度地减少对页面加载和渲染的阻塞，提高页面加载性能，可以将JavaScript代码写在<body>后面，并使用async或defer属性。这样可以使脚本的加载和执行与页面的加载和渲染并行进行。

2）脚本依赖关系：如果你的脚本之间存在依赖关系，即某个脚本需要在另一个脚本加载和执行完成后才能正常运行，那么使用defer属性可以确保脚本按照它们在页面中的顺序加载和执行。

3）脚本执行顺序：如果你希望脚本尽快执行，不需要等待页面解析完毕，可以使用async属性。但是要注意，使用async属性加载的脚本的执行顺序是不确定的，所以如果脚本之间存在顺序要求，不适合使用async属性。

4）脚本功能和依赖资源：如果你的脚本需要访问DOM元素或其他资源，确保这些资源在脚本执行之前已经加载完成。如果将JavaScript代码写在<head>里面，可以确保脚本在页面解析过程中加载，但可能会阻塞页面的渲染。如果将JavaScript代码写在<body>里面或<body>后面，可以减少对页面渲染的阻塞，但需要确保所需的资源已经加载完成。