您的位置：首页 > Web前端 > JavaScript

js学习笔记：script元素

2016-09-08 21:48 260 查看

script元素

在解释器对 < script > 元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

在解析外部js文件（包括下载该文件）时，页面的处理也会暂时停止。

带有src属性的< script >元素内部不应该再包含额外的代码了。如果包含嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

只要不存在async和defer属性，浏览器都会按照< script >元素在页面中出现的先后顺序对它们依次进行解析。第一个被解析完后解析第二个……

标签的位置

因为浏览器遇到body标签才开始呈现内容，因此如果把script标签放到head中，就意味着必须等到全部js代码都被下载、解析和执行完毕后才开始呈现页面内容。因此一般把script标签放到body中页面内容的后面。

延迟脚本（defer）与异步脚本（async）

1.这两个属性都只适用于外部脚本。

2.都是立即下载，且下载期间不阻塞html解析，但defer是延迟执行，async是解析完马上执行。

3.都不保证执行的先后顺序。

defer属性表明脚本在执行时不会影响页面的构造，即脚本会被延迟到整个页面都解析完毕后再运行。因此，defer属性表明立即下载，但延迟执行。

<head>
<script defer="defer" src="a.js"></script>
<script defer="defer" src="b.js"></script>
</head>

虽然把script放到head中，但其中包含的脚本将延迟到浏览器遇到< /html>后再执行。

但延迟脚本并不会一定按照顺序执行，因此最好只包含一个延迟脚本。

async脚本的目的是不让页面等待脚本下载和执行，从而异步加载页面其它内容，因此异步脚本最好不要在加载期间修改DOM。 异步脚本一定会在页面的load事件前执行。

<head>
<script async src="a.js"></script>
<script async src="b.js"></script>
</head>

< noscript>元素

浏览器不支持脚本

脚本被禁用

这两种情况下浏览器就会显示< noscript>中的内容，让不支持js的页面平稳退化。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航