• 原生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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在上述代码中，加上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来实现不支持的显示效果。
    在这里插入图片描述

  • 相关阅读:
    JavaScript 判断客户端是手机还是pad
    Util应用框架Web Api开发环境搭建
    css3的attr函数使用，加载unicode矢量图标
    Visual Studio 2022 开发 STM32 单片机 - 环境搭建点亮LED灯
    化工厂人员定位方案
    Linux权限管理【理论讲解+实操演示】
    Java集合Map接口详解——含源码分析
    时序预测 | MATLAB实现RBF径向基神经网络时间序列多步预测
    vue-router路由知识
    电脑清理c盘怎么清理全教程，教你彻底清理所有垃圾
  • 原文地址：https://blog.csdn.net/lplovewjm/article/details/133098433