详谈HTML中script标签（附代码）-百分百源码网

详谈HTML中script标签（附代码）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于详谈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>
<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 属性时，结果会发生转变，可以发明在 p 元素的内容加载完成之后 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>
<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>