1、<script>元素
1.1标签位置
问题:在文档的<head>元素中包含所有JavaScript 文件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能解析body中的代码开始呈现页面的内容。(白屏)
解决:JavaScript 引用放在<body>元素中页面内容的后面
1.2 引入方式
HTML 网页中,浏览器通过
<script>
标签加载 JavaScript 脚本,JavaScript 代码将被从上至下依次解释。不设置async和defer属性, 那么脚本会同步下载并执行, 阻塞后续dom的渲染。
- 如果是外部脚本,还必须加入脚本下载的时间。
- 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了。
<!-- 内嵌式 -->
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
<!-- 外链式 -->
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
1.3 标签属性
1.3.1 type
其默认值为text/javascript。
1.3.2 defer
<script>
标签打开defer
或async
属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。另外,如果有多个defer
脚本,会按照它们在页面出现的顺序加载,而多个async
脚本是不能保证加载顺序的。
只对外部脚本文件有效,表示脚本可以延迟到文档完全被解析和显示之后再执行(</html>标签后再执行,即DOM 结构完全生成,以及其他脚本执行完成)。defer 属性,相当于告诉浏览器立即下载,但延迟执行。defer
是“渲染完再执行”。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!-- 脚本将延迟到浏览器遇到</html>标签后再执行 -->
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
</body>
</html>
1.3.3 async
只对外部脚本文件有效,立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源,从而异步加载页面其他内容。async
一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。async
是“下载完就执行”。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<!-- 标记为async 的脚本并不保证按照指定它们的先后顺序执行 -->
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
</body>
</html>
2、<noscript>元素
<noscript>元素,用以在不支持JavaScript 的浏览器中显示标签内替代的内容。
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。
</noscript>
</body>
</html>