小麒麟

V1

2022/09/03阅读:15主题:全栈蓝

帮你读《JavaScript高级程序设计(第3版)》--第2章:在HTML使用JavaScript

2.1 <script>元素

  1. HTML5中为<script>元素定义了下列6个属性
    • async:可选;表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本;只对外部脚本有效;
    • charset:可选;表示通过src属性置顶的代码的字符集;大多数浏览器会忽略这个值;
    • defer:表示脚本可以延迟到文档完全被解析和显示之后再执行;只对外部脚本有效;改变script元素加载顺序
    • language:已废弃;
    • src
    • type:必选;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)
  2. 包含在<script>元素内部的JavaScript代码将被从上到下依次解释
  3. 不要在代码中的任何位置出</script>字符串,即使是alert('</script>'),但可以使用转义字符“\”解决,eg:alert('<\/script>')
  4. 在解析外部JavaScript文件(包括下载该文件)时,与解析嵌入式JavaScript代码一样,页面的处理也会暂时停止
  5. 外部JavaScript文件带有.js扩展名,但是这个扩展名不是必需的,因为浏览器不会检查包含JavaScript的文件的扩展名,但是服务器通常还是需要看扩展名决定为响应应用哪种MIME类型
  6. 带有src属性的<script>元素中间不应该再出现其他代码,即使有,也只会加载外部src中的脚本文件,<script>元素中间的代码会被忽略

2.1.1 标签的位置

按照传统的做法,所有的<script>元素都应该放在页面的<head>元素中,但是为什么现在不这样做?

首先说,这种做法的目的就是把所有的外部文件的引用都放在相同的地方;

但是,在文档的<head>元素中包含所有JavaScript文件,意味着必须等到所有的JavaScript文件都下载、解析、执行完毕之后,才开始呈现页面内容,这会使得浏览器在呈现页面时出现明显的延迟,在这期间页面一片空白,因此现在的通用做法是,将JavaScript引用放在<body>元素中页面内容的后面

2.1.2 延迟脚本--defer属性

  1. 这个属性的用途:表明脚本在执行时不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行(立即下载,但延迟执行)
  2. HTML5规范要求脚本按照他们出现的先后顺序执行,因此几个延迟脚本同时出现的时候,会按照顺序延迟执行,且这些延迟脚本会先于DOMContentLoaded事件
  3. 在现实中,延迟脚本不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本
  4. 部分浏览器会忽略defer属性,因此,把延迟脚本放在页面底部仍然是最佳选择

2.1.3 异步脚本--async属性

  1. 与defer属性不同之处:async的脚本并不保证按照指定他们的先后顺序执行,因此确保脚本之间互不依赖非常重要
  2. 建议异步脚本不要在加载期间修改DOM
  3. 异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发前或者后执行

2.1.4 在XHTML中的用法----略

2.1.5 不推荐使用的用法--不支持JavaScript的浏览器已经不存在--略

2.2 嵌入代码与外部文件

在HTML中嵌入JavaScript代码没有问题,但是一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码,优点:

  • 可维护性:遍及不用HTML页面的JavaScript会造成维护问题
  • 可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件
  • 适应未来:XHTML和HTML包含外部文件的语法是相同的

2.3 文档模式

  1. IE5.5引入文档模式的概念,这个概念是通过使用文档类型切换实现的,最初的文档模式分为两种:

    • 混杂模式:会让IE的行为与包含非标准特性的IE5相同
    • 标准模式:让IE行为更接近标准行为

    虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行

  2. 在此之后,IE又提出一种准标准模式:浏览器特性很多都是符合标准的,这种模式可以通过使用过渡型或者框架集型文档类型来触发

  3. 如果在文档开始处没有发现文档类型说明,则所有浏览器都会默认开启混杂模式

  4. 准标准模式和标准模式非常接近,一般提到标准模式,指的是除混杂模式以外的其他模式

2.4 <noscript>元素

  1. 早期浏览器面临一个问题:即当浏览器不支持JavaScript时如何让页面平稳退化。----<noscript>元素

  2. 包含<noscript>元素中的内容只有在下列情况才会显示出来:

    • 浏览器不支持脚本
    • 浏览器支持脚本,但是脚本被禁用

    除此之外,浏览器不会呈现<noscript>元素中的内容

分类:

前端

标签:

JavaScript

作者介绍

小麒麟
V1