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来实现不支持的显示效果。


相关文章
|
5天前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
5天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
6天前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
9 0
|
6天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
12 1
|
6天前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。
|
6天前
|
JavaScript
js Array map映射对象多个属性
js Array map映射对象多个属性
5 0
|
6天前
|
存储 JavaScript 前端开发
js的基本属性
【4月更文挑战第20天】js的基本属性
21 8
|
6天前
|
JavaScript 前端开发
js改变元素的内容、属性、样式
js改变元素的内容、属性、样式
15 3
|
6天前
|
JavaScript 前端开发 API
JQuery的attr()属性和JS的属性的方法
JQuery的attr()属性和JS的属性的方法
10 0
|
6天前
|
存储 JavaScript 前端开发
了解JavaScript中属性遍历的三种方法
了解JavaScript中属性遍历的三种方法
24 1