预加载 - 掘金

方法一：使用静态标签
index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="preload" href="./myScript.js" as='script'>
	</head>
	<body>
		<script src='./myScript.js'></script>
		<script>
			myFunction();
		</script>
	</body>
</html>

myScript.js文件

function myFunction(){
	console.log("脚本加载成功");
}
// myFunction();

方法二：使用脚本，动态插入
index.js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var myLink = document.createElement('link');
			myLink.rel = 'preload';
			myLink.href = './myScript.js';
			myLink.as = 'script';
			document.head.appendChild(myLink);
			
			var aScript = document.createElement('script');
			aScript.src = './myScript.js';
			document.body.appendChild(aScript);
		</script>
	</body>
</html>

myScript.js文件

function myFunction(){
	console.log("脚本加载成功");
}
myFunction();

简单聊一聊预加载：有些资源在页面加载后，立刻需要，为了减少等待，避免阻塞渲染，提升性能和用户体验，我们可以在生命周期早期获取资源。