原生js之script基本属性

在这里插入图片描述

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

你可能感兴趣的:(js,web前端,javascript,开发语言,ecmascript)