<script>

  • 现代web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<!--页面内容-->
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
  • 推迟执行——属性defer:浏览器立即下载并解析但延迟执行脚本,延迟到整个页面都解析完毕后再执行

    • 仅对外部脚本文件有效
    • HTML5规范要求他们按顺序执行(最好只包含一个这样的脚本)
  • 异步执行——属性async:浏览器立即下载并解析脚本,之后可立即执行

    • 仅对外部脚本文件有效
    • 不一定会按在页面中嵌入的顺序执行
    • 异步脚本不应该在加载期间修改DOM
  • 动态加载脚本:向DOM动态添加script元素

    let script = document.createElement('script');
    script.src = 'hello.js';
    script.async = false;
    document.head.appendChild(script);
    • 默认情况下以此形式创建的<script>元素为异步加载(相当于添加了async属性),但并不是所有浏览器都支持async属性;因此,可以明确其为同步加载【script.async = false;】
  • XHTML中的变化

    • XHTML编写规则更加严格

      • 使用JavaScript必须指定type属性为"text/javascript"

      • html中的<script>标签内会应用特殊规则,而xhtml不会(script标签内的js中的'<'在xhtml中会被解释为一个标签的开始)

    • 解决:将所有代码包含在一个CDATA块中

      • 在不支持CDATA的非XHTML兼容浏览器中不可行——CDATA标记使用JavaScript注释来抵消
      <script type="text/javascript">
      //<![CDATA[
      function compare(a,b){
      if(a<b) console.log("a is smaller");
      else if(a>b) console.log("b is smaller");
      else console.log("a is equals to b"),
      }
      //]]>
      </script>

<noscript>

  • 可以包含任何可以出现在<body>中的HTML元素,<script>除外
  • 当:
    • 浏览器不支持脚本
    • 浏览器对脚本的支持被关闭

​ 满足其一时,<noscript>中的内容将被渲染

《JavaScript高级程序设计》Chapter02 <script>元素的更多相关文章

  1. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  2. javascript高级程序设计阅读笔记(一)

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  3. 《JavaScript高级程序设计》学习笔记

    系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...

  4. 读书时间《JavaScript高级程序设计》一:基础篇

    第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...

  5. 《JavaScript高级程序设计》 -- 基本概念(一)

    之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...

  6. JavaScript高级程序设计学习(三)之变量、作用域和内存问题

    这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...

  7. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  8. 《Javascript高级程序设计》阅读记录(一):第二、三章

    <Javascript高级程序设计>阅读记录(一) 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释 ...

  9. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  10. 《JavaScript高级程序设计》——第二章在HTML使用JavaScript

    这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...

随机推荐

  1. SQL命令--合并查询union

    union命令作用:连接两个以上的 SELECT 语句的结果组合到一个表中 一. 示例: select id, url, auth_status as authStatus, enterprise_n ...

  2. centos7升级内核 ,wireguard优化

    一.centos7升级内核 uname -r 查看内核版本 升级前 升级后 参考链接: https://www.cnblogs.com/rick-zhang/p/14944510.html # 启用 ...

  3. 简述Linux零拷贝原理

    什么是零拷贝 零拷贝描述的是在计算机操作系统中,CPU不执行将数据从一个内存区域,拷贝到另一个内存区域的任务. 通过网络传输文件时,零拷贝通常可以节省CPU周期和内存带宽. 零拷贝的好处 节省了CPU ...

  4. class声明中初始化静态成员变量的问题

    1. const静态变量,允许整型或枚举类型成员直接初始化. 2. constexpr静态变量,允许literal类型成员直接初始化. 3. c++17引入inline变量,允许其他类型成员直接初始化 ...

  5. ubuntu20.0.4 安装influxdb

    官网:https://docs.influxdata.com/influxdb/v2.3/install/?t=Linux1.命令:# Ubuntu/Debian wget https://dl.in ...

  6. Solution - ARC152D Halftree

    首先 \(n\) 为偶数时无解,这是显然的,因为一次加两条边,总边数一定是偶数. 下面我们证明 \(n\) 为奇数时一定有解,直接进行构造. 首先将每一个点编号加上 \(k\) 再模 \(n\) 的答 ...

  7. createrepo 命令详解

    createrepo 命令用于创建yum源(软件仓库),即为存放于本地特定位置的众多rpm包建立索引,描述各包所需依赖信息,并形成元数据. 语法: createrepo [option] <di ...

  8. PostProcess

    后处理器: AutowiredAnnotationBeanPostProcess.class 可以处理@Autowired.@Value 如何注册:context.registerBean(xxx.c ...

  9. 什么时候用多线程什么时候用多进程呢?GUL

    那么在 Python 中什么时候用多线程什么时候用多进程呢?当在CPU-bound(计算密集型:绝大多数时间在计算) 时最好用 - 多进程, 而在 I/O bound(I/O密集型 : IO 处理 并 ...

  10. JavaSE——面向对象(类与对象)

    package com.zhao.test1; public class GirlFriend { //属性 String name; int age; String gender; //行为 pub ...