关于html:彻底弄懂script标签

1次阅读

共计 2995 个字符，预计需要花费 8 分钟才能阅读完成。

① <script> 标签默认是同步加载的 。当 HTML 页面在加载的过程中，遇到了一个 <script> 标签，就会 中断 HTML 页面的加载 ，而后依据对应的 src 地址向服务器发动申请，当对应的 javascript 脚本加载实现后，HTML 页面依然不能加载，还 必须等加载的 javascript 脚本执行实现后，HTML 页面能力持续往下加载。

② 当遇到 <script> 标签的时候会立刻渲染一次 。当 HTML 页面加载的过程中，遇到了一个 <script> 标签， 如果之前曾经加载了局部 HTML 内容 ，那么 会先将之前加载的 HTML 内容渲染进去，而后再去加载对应的 javascript 脚本。

① 验证个性 1 ，咱们通过服务器设置一个申请，这个申请须要期待 5 秒后返回，来模仿缩短 javascript 的加载工夫。

const express = require("express");
const app = express();
app.use(express.static("./public"));
app.use("/test", (req, res) => {setTimeout(() => {res.send(`console.log(document.getElementsByTagName("h1).length)`);
    }, 5000); // 缩短 javascript 脚本的加载工夫
});
app.listen(8080);

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://localhost:8080/test"></script>
</head>
<body>
    <h1>hello script 0</h1>
</body>

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个 <script> 标签，并去加载服务器 http://localhost:8080/test 返回的脚本，因为该脚本须要 5 秒后返回，所以咱们能够看到 页面白屏了 5 秒 后，执行了加载的脚本，而后再才显示页面内容 hello script 0。
阐明页面加载过程中，如果遇到了 <script> 标签，那么会中断页面的加载，必须期待对应的 javascript 的脚本加载并执行实现后才会持续页面加载 。
**
② 验证个性 2 ，咱们批改一下 <script> 标签的程序， 将 <script> 标签放到 hello script 0 前面 **。

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <h1>hello script 0</h1>
    <script src="http://localhost:8080/test"></script>
    <h1>hello script 1</h1>
</body>

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个 <h1> 标签，而后才遇到了一个 <script> 标签，同样会去加载服务器 http://localhost:8080/test 返回的脚本，同样该脚本也须要 5 秒后返回，然而这次咱们能够看到 页面中首先呈现了 hello script 0 内容 ，期待 5 秒白屏后，脚本加载实现并执行脚本输入后果，接着持续渲染 HTML 页面，显示 hello script 1 内容。
阐明，页面加载过程中，如果遇到了 <script> 标签，那么 会将之前曾经解析的 HTML 内容先渲染进去 ，而后再去服务器加载对应的 javascript。所以咱们通常须要 将 <script> 标签放到 <body> 标签之后，以便尽早的展示 HTML 内容。

① async: 异步加载对应的 javascript 脚本 ，不阻塞 HTML 页面的渲染，当对应的 javascript 加载实现后，如果此时 HTML 页面还未加载实现，那么 会阻塞页面的渲染 ， 等 javascript 执行实现后再持续 HTML 页面的加载。

② defer: 异步加载对应的 javascript 脚本 ，不阻塞 HTML 页面的渲染，当对应的 javascript 加载实现后，如果此时 HTML 页面还未加载实现，那么 不会阻塞页面的渲染 ， 等 HTML 页面加载实现后再接着执行加载实现的 javascript 脚本。

③ type=”module”: 也是能起到异步加载的成果，成果同 defer，不过其能够配合 async 属性让 javascript 加载实现后立刻执行。

app.use("/deferHTML", (req, res) => {setTimeout(() => {res.send(`console.log("提早 html 加载")`);
    }, 8000);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://localhost:8080/test" async></script>
    <!-- 提早 HTML 加载过程 -->
    <script src="http://localhost:8080/deferHTML"></script>
</head>
<body>
    <h1>hello script 0</h1>
</body>

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个带 async 属性的 <script> 标签，此时 会立刻去加载 test 脚本 ，不阻塞页面的加载， 持续加载 HTML 内容 ，而后又遇到了一个同步加载的 <script> 标签，而后去加载 deferHTML 脚本， 阻塞页面的加载 ，阻塞工夫为 8 秒，而 5 秒后 test 脚本加载实现，此时会立刻执行该脚本，该脚本执行会输入以后已加载 h1 标签的个数， 从输入后果能够看到为 0 。所以咱们能够看出，async 是异步加载脚本，并且会在脚本加载实现后立刻执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://localhost:8080/test" defer></script>
    <!-- 提早 HTML 加载过程 -->
    <script src="http://localhost:8080/deferHTML"></script>
</head>
<body>
    <h1>hello script 0</h1>
</body>

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个带 defer 属性的 <script> 标签，此时 会立刻去加载 test 脚本 ，不阻塞页面的加载， 持续加载 HTML 内容 ，而后又遇到了一个同步加载的 <script> 标签，而后去加载 deferHTML 脚本， 阻塞页面的加载 ，阻塞工夫为 8 秒，而 5 秒后 test 脚本加载实现，此时 不会立刻执行该脚本 ，8 秒后 deferHTML 脚本加载实现，持续加载 HTML 页面， 当 HTML 页面加载实现后，test 脚本才会开始执行 ，输入以后已加载 h1 标签的个数， 从输入后果能够看到为 1 。所以咱们能够看出，defer 是异步加载脚本，并且会在 HTML 加载实现后再执行。

正文完