html的script标签,关于html:彻底弄懂script标签

一、 标签个性

标签次要用于从服务器端加载一段javascript脚本并在以后页面中执行。因为其须要从服务器端中加载，所以会在肯定水平上影响到web的性能。在性能优化中，标签的优化至关重要。

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

② 当遇到标签的时候会立刻渲染一次。当HTML页面加载的过程中，遇到了一个标签，如果之前曾经加载了局部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);

hello script 0

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个标签，并去加载服务器http://localhost:8080/test返回的脚本，因为该脚本须要5秒后返回，所以咱们能够看到页面白屏了5秒后，执行了加载的脚本，而后再才显示页面内容hello script 0。

阐明页面加载过程中，如果遇到了标签，那么会中断页面的加载，必须期待对应的javascript的脚本加载并执行实现后才会持续页面加载。

**

② 验证个性2，咱们批改一下标签的程序，将标签放到hello script 0前面**。

hello script 0

hello script 1

当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个

标签，而后才遇到了一个标签，同样会去加载服务器http://localhost:8080/test返回的脚本，同样该脚本也须要5秒后返回，然而这次咱们能够看到页面中首先呈现了hello script 0内容，期待5秒白屏后，脚本加载实现并执行脚本输入后果，接着持续渲染HTML页面，显示hello script 1内容。

阐明，页面加载过程中，如果遇到了标签，那么会将之前曾经解析的HTML内容先渲染进去，而后再去服务器加载对应的javascript。所以咱们通常须要将标签放到

标签之后，以便尽早的展示HTML内容。

三、标签优化

标签默认是同步加载的，然而其提供了一些属性能够变成异步加载，如: async、defer、type=”module”。

① 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);

});

hello script 0

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

hello script 0

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