天天看点

在HTML中JavaScript以及async和defer的使用

本文是阅读红宝书后对知识进行的总结和梳理

一.<script>元素

<script>标签定义了6个属性,分别有async,defer,charset,src,language,type。

讲到script标签,不得不提async和defer这两个属性,所以对这两个属性划重点。

1. async

红宝书中定义:表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

解释:很显然,浏览器会立即下载含有async属性的脚本,也就是加载脚本和加载页面文档是并行进行的(异步),脚本加载完成后立即执行,当页面进行解析时,脚本将被执行。只对外部引入的JavaScript代码有效,对嵌入代码无法使用。

2. defer

红宝书中定义:表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性

解释:设置defer属性时,相当于告诉浏览器立即下载,但延迟执行。脚本的加载与后续的文档加载是并行进的(异步),但是script脚本的执行要在文档的解析完成后才执行,DOMContentLoaded事件触发之前完成。和async一样都是只对外部JavaScript代码有效。

在HTML中JavaScript以及async和defer的使用

注:脚本的加载过程是异步进行的。

3. async和defer的区别:

当页面中引入的多个script脚本文件时,async中脚本的执行顺序与引入顺序无关,即乱序执行;而defer中其执行顺序与引入顺序有关,即顺序执行。(因此async则适用于对于没有形成相互依赖的脚本之间)

4. 不使用async和defer的执行情况

无论如何包含代码,只要不存在 defer 和 async 属性,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析,然后才是第三个、第四个……

5. 兼容问题:

然而以上两种异步加载的方式都会有浏览器兼容问题,还有一种异步加载的处理方式就是将script标签放在文档中</body>的上方,也就是当文档加载和解析完成后,再加载并执行脚本文件,防止脚本文件的加载和执行对文档的解析造成阻塞而导致长时间白屏。因此,把延迟脚本放在页面底部仍然是最佳选择。

二. 嵌入代码与外部文件

支持外部文件的优点:

  • 可维护性:将JavaScript统一放在一起便于维护,并且能够更加专注于JavaScript代码的编写。
  • 可缓存:浏览器能通过设置缓存链接对应的外部JavaScript文件。当多个页面请求同一个文件时可以节省资源浪费。
  • 适应未来:HTML和XHTML包含外部文件的语法是相同的。

三. 文档模式

文档模式可通过设置文档类型<!DOCTYPE>切换实现。在还没有文档类型声明这一说法之前,所有浏览器默认开启混杂模式。

文档模式包括:混杂模式和标准模式。

影响:两种模式的不同主要影响CSS内容的呈现,但某些情况下也会影响JavaScript的解析执行。

标准模式的使用:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE html>
           

准标准模式的使用(兼容):

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
           

四. <noscript>元素

<noscript>是用于在不支持JavaScript的浏览器中显示替代的内容,标签内包含能够出现在文档<body>中的任何HTML元素,显示的条件:

  • 浏览器不支持脚本
  • 浏览器支持脚本,但脚本被禁用
(本文纯属个人学习笔记,如有不足请留言!)

继续阅读