html的script元素，载入外部脚本库、延迟执行脚本、异步执行脚本以及当浏览器不支持JavaScript时

本文链接：https://blog.youkuaiyun.com/weixin_44745009/article/details/107500084

本文介绍了四种JavaScript脚本加载方法：载入外部脚本库、延迟执行脚本、异步执行脚本及处理不支持JavaScript的浏览器情况。通过使用script元素的不同属性，如src、defer和async，以及noscript标签，可以优化脚本加载效率并提供替代内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 载入外部脚本库
2. 延迟执行脚本
3. 异步执行脚本
4. 当浏览器不支持JavaScript时

1.载入外部脚本库
使用的是script元素的type属性

 <script type="text/javascript" src="hi.js"></script>

src=" ",里面填的是要引用的外部脚本库名字

延迟执行脚本
使用的是script元素的defer属性，该属性只能用于引用外部脚本文件，对内嵌脚本不起作用。

html代码

<!DOCTYPE html>
<html>

<head>
    <title>
        <html>

        </html>
    </title>
    <!--指定网页编码-->
    <meta charset="UTF-8">
    <!--为了让网页尺寸实现自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--定义网页的作者-->
    <meta name="author" content="lan">
    <!--描述网页内容-->
    <meta name="description" content="html">
    <script type="text/javascript" src="patch.js" defer></script>
</head>

<body>
    <p>你好呀</p>
    <p>你想干嘛呀</p>
    <p>没事就看看闲着干嘛呢</p>
</body>

</html>

js代码

var x = document.getElementsByTagName("p");

for (var i = 0; i < x.length; i++) {
    x[i].innerText = "闲着干嘛呢";

}

在这里插入图片描述
html代码解析是一行一行的，这个文件主要是讲将p标签里的文字，全部替换为“闲着干嘛呢”。按道理来说，应该先执行到 script /script这一行，由于前面都没出现p标签，所以不会替换，所以加上“deter”，让脚本延迟执行，html解析到后面时，再去执行script那行代码，此时就可将p标签里的全部替换掉。

3.异步执行脚本
使用的是script元素的async属性，该属性只能用于引用外部脚本文件，对内嵌脚本不起作用。

4.当浏览器不支持JavaScript时，
noscript标签:用来向不支持 JavaScript 的浏览器显示一些替代内容。
虽然现在很多浏览器都支持JavaScript，还是可以了解一下当不支持时，怎么解决这个问题。
首先，先将自己的浏览器关于JavaScript的设置修改一下，
在这里插入图片描述
html代码

<!DOCTYPE html>
<html>

<head>
    <title>
        <html>

        </html>
    </title>
    <!--指定网页编码-->
    <meta charset="UTF-8">
    <!--为了让网页尺寸实现自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--定义网页的作者-->
    <meta name="author" content="lan">
    <!--描述网页内容-->
    <meta name="description" content="html">
    <script type="text/javascript" src="hi.js"></script>
    <noscript>
        <p>呀！竟然不支持JavaScript</p>
        <img alt="哭泣" src="D:\前端\JavaScript\哭泣.jpg" width="300px" height="400px">
    </noscript>
</head>

<body>
    <p>你好呀</p>
</body>

</html>