JS学习笔记——HTML中的JavaScript

标签位置

现代Web应用程序通常将所有JavaScript引用放在元素中的页面后面

推迟执行脚本

HTML4.01为

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script defer src = "example1.js"></script>
		<script defer src = "example2.js"></script>
	</head>
	<body>
	</body>
</html>

derfer属性只对外部脚本文件才有效

异步执行脚本

HTML5为

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script async src = "example1.js"></script>
		<script async src = "example2.js"></script>
	</head>
	<body>
	</body>
</html>

第二个脚本可能先于第一个执行,重点是他们之间有没有依赖关系
异步脚本保证会在页面的load事件前执行,但可能在DOMContentLoaded之前或之后

动态加载脚本

创建一个script元素并将其添加到DOM即可

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

以这种方式创建的

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

这种方式可能会严重影响性能可任意在文档头部显式声明它们

<link rel = "preload" herf = "gibberish.js">
上一篇:JS性能优化之创建文档碎片(document.createDocumentFragment)


下一篇:常见目标检测数据增强方法