JavaScript红宝书第1.2章:script基本属性

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


相关文章
|
1月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
34 1
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
24 1
JavaScript基础知识-枚举对象中的属性
|
13天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1
|
1月前
|
JavaScript 前端开发
JS - 正则替换富文本内容的所有图片地址,并提取src、alt、style等属性
这篇文章提供了使用JavaScript正则表达式来替换富文本中所有图片地址,并提取`src`、`alt`、`style`等属性的示例代码和方法。
98 1
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
28天前
|
JavaScript 前端开发
js常用属性
js常用属性
10 0
|
1月前
|
JavaScript 前端开发
JavaScript常用的属性
JavaScript常用的属性
|
2月前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
23 1
|
2月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
87 0
|
2月前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
31 0