说一说 HTML 中的 script 标签

时间 2019-12-09

标签一说 html script 标签栏目 HTML 繁體版

原文原文链接

咱们在《Javascript简史》这遍文章中说过，「Javascript」这门语言是由 Netscape开发而来，当初开发的时候为了能让「Javascript」这门语言能与 HTML 页面共存，并且不影响页面的其余内容，为此增长了一个统一的脚本支持（ script 脚本元素）。javascript

script 元素

在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素，script 元素内部的代码从上而下依次执行。html

在引入多个 script 元素的时候，浏览器会按照 script 元素在页面的中的前后顺序进行解析，当上一个解析完成时，才会进行下一个 script 元素中的内容java

在 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> 元素中async

这种作法意味着，咱们必须等待全部的 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>

关注微信公众号：六小登登。领取全套学习资源