原生js之script基本属性

news2025/2/26 8:04:31

在这里插入图片描述

async:异步执行脚本
defer:延迟脚本下载
src:要执行的代码外部文件地址
noscript:表示浏览器不支持或拒绝支持script脚本时出现的内容

async和defer

async和defer本质都是为了让脚本推迟到整个页面解析后再下载，不同的是async是异步无序的，而defer是同步有序的。

src是外部脚本文件地址

下面举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 脚本延迟，脚本会被延迟到整个页面都解析完毕后在运行 -->
	<script defer src="js/初始script.js"></script>
	<script src="js/初始script.js"></script>
	<link rel="preload" href="js/初始script01.js">
	<body>
		<script>
			// 如何打印<\/script>
			console.log("<\/script>")
			demo()
			// 动态加载脚本
			let script=document.createElement('script')
			script.src='js/初始script01.js'
			script.async='false'
			document.head.appendChild(script);
		</script>
		<!-- 如果浏览器不支持脚本，或者支持脚本的功能被关闭 -->
		<noscript>
			<p>该浏览器不支持script脚本</p>
		</noscript>
	</body>
</html>

在上述代码中，加上defer的外部脚本文件可以实现延迟加载的效果，为了让浏览器显示空白页面的时间变短了，增强对应的性能优化。如果不想加defer也可以把script外部脚本代码放在body下面执行也可以实现相同的效果，在下面的script中我们想打印一个</script>,可以通过转义字符\来实现这个效果，同时下面的demo()实际上是defer引入的外部文件中的方法，在下面又解释了动态生成script外部脚本的实现流程，首先我们定义一个块变量script，用dom中的createElement，创建一个script元素，同时定义这个script元素下的src属性为想要的文件路径，默认情况下，这种创建方法是异步的，也就是async的模式下，但有的浏览器不支持async，所以我们要调用这个属性并给它赋false值，最后在文档流下的head标签加一个孩子节点，但同时这种方式获取到的资源对浏览器预加载器来说是不可见的，会影响它们在资源获取队列中的优先级。如果在head头后加上link标签，并且把rel设置成preload，则可以让预加载器知道这些动态请求文件的存在，并把创造好的script变量赋到HTML当中，最后就是当浏览器不支持脚本或者支持脚本的功能被关闭时，我们可以使用noscript来实现不支持的显示效果。
在这里插入图片描述