导言

有时候,觉得很简单的东西,往往会更忽略。有句话说得好

视野中若出现了焦点,自然也出现了盲点

我们将复习一下下面这些东西:

使用<\script>元素
嵌入脚本与外部脚本
文档模式对js的影响
考虑禁用js的场景

<\script> 元素

向HTML 页面中插入 javaScript 的主要方法,就是使用 <\script> 元素。HTML5为 <\script>定义了下列6个属性:

async : 可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
defer: 可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
src : 可选。表示包含要执行代码的外部文件。
type : 必选。表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。虽然 text/javascript

使用<\script>元素的方法有两种:

直接在页面中嵌入 javaScript 代码
包含外部 javaScript 文件

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

标签的位置

按照传统的做法,所有 <\script>元素都应该放在页面的 <\head>元素中。
可是,在文档的 <\head>元素中包含所有javaScript文件,意味着必须等到全部javaScript代码被下载,解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<\body标签才开始呈现内容>)。

那些需要很多javaScrpt代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口将是一片空白

现代web应用程序一般都把全局javaScript引用放在<\body>元素中页面内容的后面 这样,在解析包含的javaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了

延迟脚本

HTML为 <\script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕再运行。因此,在 <\script>中设置 defer 属性,相当于告诉浏览器立即下载,但延迟执行。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./1.js" defer></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

在这个例子中,其包含的脚本将延迟到浏览器遇到</\html>标签再执行。HTML5规范要求脚本按照他们出现的先后顺序执行,因此第一个延迟脚本会先于第二个脚本执行。

异步脚本

HTML5 为 <\script>元素定义了 async 属性。这个属性与 defer 属性类似,都用于改变处理脚本的行为。同样与 defer 类似, async 只适用于外部脚本文本, 并告诉浏览器立即下载文件。

指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM

<\noscript>元素

早期链路都面临一个特殊问题,即当浏览器不支持 javaScript 时如何让页面平稳地退化。对这个问题,方案就是创建一个 <\noscript>元素,用以在不支持 javaScript的浏览器中显示替代的内容。在<\noscript>元素只有在下列情况下才会显示出来:

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

回归基础-在HTML使用js

导言

<\script> 元素

标签的位置

延迟脚本

异步脚本

<\noscript>元素