说一说 HTML 中的 script 标签

2023年8月4日 151次阅读 来源: 六小登登

我们在 《Javascript简史》这遍文章中说过，「Javascript」这门言语是由 Netscape开辟而来，当初开辟的时刻为了能让 「Javascript」这门言语能与 HTML 页面共存，而且不影响页面的其他内容，为此增加了一个一致的剧本支撑（ script 剧本元素）。

script 元素

在 HTML 页面中运用「Javascript」言语重要的要领就是运用 script 元素，script 元素内部的代码从上而下顺次实行。

在引入多个 script 元素的时刻，浏览器会根据 script 元素在页面的中的先后递次举行剖析，当上一个剖析完成时，才会举行下一个 script 元素中的内容

在 HTML 中运用 Javascript 的两种要领

//第一种要领：直接在标签内运用 javascript 即可
<script>
    console.log('第一种运用要领');
</script>

//第二种要领：援用外部文件
<script src="example.js"></script>

script 元素的属性

script 元素比较经常使用的几个属性

  • src：可选，用于援用外部 javascript 文件
  • type：可选，编写代码运用的剧本言语的范例（也成MIME范例），默认值为 text/javascript
  • async：可选，异步加载剧本，只对外部剧本文件有用
  • defer：可选，耽误剧本加载，在文档完整被剖析后在实行，只对外部剧本文件有用

script 元素在 HTML 中的位置

因为「Javascript」言语是一门单线程言语，在统一时间内，只能实行一个使命，所以只要当上一个使命完成以后才举行下一个使命，因此会致使 script 元素在 HTML 中的位置差别，会表现出差别效果。

一切 script 元素都放在 <head> 元素中

这类做法意味着，我们必需守候一切的 Javascript 代码必需实行完成以后才最先展现页面的内容，假如页面的 Javascript 代码异常多，这类要领就会致使我们看到页面的加载会异常慢，用户体验异常差，那末这么样去优化呢？实在很简单。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <div>页面的内容地区</div>
    </body>
</html>

一切 script 元素都放在页面内容的背面

优化上面所说的页面加载慢的题目，只需要把我们运用的 Javascript 代码放到页面的内容以后即可，如许页面会起首加载内容然后实际出来，再去实行 Javascript 代码，如许用户就不会守候良久页面才会显现内容。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>页面的内容地区</div>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

剧本的延时加载

剧本怎样举行延时加载，这个就要应用 script 元素的 defer 属性，在元素运用 defer 属性时，剧本会被耽误到全部页面剖析完成后在实行。

//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));

//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

你会发在没有到场 defer 属性时控制台会打印出以下效果

example1
null
example2
null

当给元素加上 defer 属性时，效果会发生变化，能够发如今 div 元素的内容加载完成以后 Javascript 代码才会实行。

example1
<div id="content">这里页面的内容</div>
example2
<div id="content">这里页面的内容</div>

剧本的异步加载

剧本的异步加载，要用到 script 元素到 async 属性，它与 defer 属性相似，都是修正 script 元素的加载行动，不过 async 属性不会影响页面的其他加载，不会壅塞文档显现，而且带有 async 属性的剧本不能保证它们实行的前后递次，这一点与 defer 属性有着差别之处。

换句话说 example2.js 的代码可能会先于 example1.js 中的代码实行，所以在运用 async 属性时，要防止两个 js 相互依赖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

noscript 元素

初期的浏览器都邑又一个题目，那就是当浏览器不支撑 Javascript 言语时怎样显现页面内容，为此的解决方案就是创建了一个 noscript 元素，它能够在不支撑 Javascript 的浏览器中显现内容，而且只会在不支撑 Javascript 的浏览器中才会显现个中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <noscript>
        当前浏览器不支撑 Javascript 请替换浏览器
    </noscript>
</body>
</html>

关注微信民众号：六小登登。领取全套进修资本

    原文作者：六小登登
    原文地址: https://segmentfault.com/a/1190000016264201
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞