JavaScript高级程序设计（第四版）学习笔记（第二章 HTML中的JavaScript）

程序员文章站 2022-07-07 18:54:35

...

第二章 HTML中的JavaScript

文章目录

1.<script>元素

1.1标签位置

1.2推迟执行脚本和异步执行脚本

1.3动态加载脚本

2.行内代码和外部文件

3.文档模式

4.<noscript>元素

1.<script>元素

将JavaScript插入HTML的方法是使用<script>元素，它具有八个属性，分别是：

async：可选。表示应该立即开始下载脚本,但是不能阻止其它页面的动作，只对外部脚本有效。
charset：略
crossorigin:可选，配置相关请求的CORS(跨资源共享)设置。默认不使用CORS。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行
integrity:略
language:废弃，略
src:可选。表示要执行的代码的外部文件。
type：可选，代替language,表示代码块中的脚本语言的内容类型（也称为MIME类型）。一般值为text/javascript,如果为module,则代码会被当做ES6模块

使用<script>的两种方式：通过它直接在网站中嵌入JavaScript代码，以及通过它在网页中包含的外部JavaScript文件

<script>

alert('hi')

</script>

或者

<script src="demo.js"></script>

注意：使用第二种方式（在网页中包含外部JavaScript文件）的同时不要使用第一种方式（在网站中嵌入JavaScript代码），如果同时使用，浏览器会忽略行内代码。

浏览器在解析<script>资源的时候，发送的请求不受浏览器同源策略限制，但是返回的JavaScript文件则受限制，当然了，这个请求仍然受父页面HTTP/HTTPS协议的限制。

在不使用defer和async属性的情况下，浏览器会按照页面中出现的顺序依次解释它们，下一个<script>元素一定要等到上一个<script>元素解释完毕才会开始解释。在使用defer和async的情况下就不一样了，具体的后面会分析。

1.1标签位置

过去常把<script>标签放在<head>标签内，这样就必须在等所有的JavaScript文件下载，执行完成后才开始渲染页面（页面在浏览器解析到<body>标签时候才开始渲染），对于JavaScript文件较多的页面，这样的做法会导致页面渲染的明显延迟（浏览器窗口空白）。为解决这个问题，我们通常会将所有的JavaScript引用放在body元素中的页面后面。

代码如下（示例）：

<!DOCTYPE html>

    <html>

        <head>

        </head>

        <body>

        这里是页面内容
        <script src="demo1.js"></script>
        <script src="demo2.js"></script>
        </body>

</html>

1.2推迟执行脚本和异步执行脚本

首先我们要知道<script>从服务器到本地运行会经历三个过程————下载，解析，执行

那么，首先下载是按照顺序执行下去的，先出现的<script>元素包含的资源文件先下载，解析，执行后才会轮到下一个<script>。如果之前的<script>元素含有defer属性,那么脚本会放到当前页面解析完成后执行，下载，解析还是会立即执行的。同时有多个推迟执行脚本时，会按照顺序执行，但最好只包含一个推迟执行脚本，因为在实际使用中，不一定会按照顺序执行。

异步执行脚本可以理解为尽快执行脚本

JavaScript高级程序设计（第四版）学习笔记（第二章 HTML中的JavaScript）

根据这个图总结一下

无defer和async属性的情况下，浏览器会按照顺序单线程下载，解析，执行脚本。当脚本具有defer和async属性的时候，浏览器会（多线程）下载脚本，defer属性的脚本会等页面渲染完成后执行，async属性的脚本会在该脚本下载，解析完成后立即执行，注意：执行脚本的时候会阻塞页面的渲染。

1.3动态加载脚本

除了<script>标签，还有其他方式可以加载脚本。因为JavaScript可以使用DOM API，所以通过向DOM中动态添加script元素同样可以加载指定脚本，只要创建script元素并将其添加到DOM中即可。

let script = document.createElement('script');
script.src = 'demo.js';
document.head.appendChild(srcipt);

默认情况下，这种方式创建的元素是以异步的方式加载的，相当于添加了async属性。这种方式对浏览器预加载器是不可见的（可见就怪了，预加载器才不会看你写了什么代码），所以在执行过程中可能会严重影响到性能，这时候可以在头部显式声明它们的存在：

<link rel="preload" herf="demo.js"></link>

2.行内代码和外部文件

虽然可以直接在HTML文件中嵌入JavaScript代码，但通常认为最佳实践是尽可能将JavaScript代码放在外部文件中，理由如下：

可维护性：将JavaScript文件集合到一个文件夹下面比分散到各个HTML文件下更好管理，更好维护。
缓存:浏览器会根据特定的设置缓存好所有外部链接的JavaScript文件,当下次遇到同样的文件的时候就直接使用缓存好的文件，提高了页面的性能。
适应未来：不用考虑到XHTML中的一些问题。现在XHTML已经推出历史舞台了。

3.文档模式

分两种：混杂模式和标准模式（后面又出现了准标准模式，暂时不讨论，也可以理解为除了混杂模式后就只有标准模式了）

主要区别只体现在CSS渲染的内容方面，但是对JavaScript也会有一些关联影响，或称为副作用。

4.<noscript>元素

对早期不兼容JavaScript浏览器的一个优雅降级的方案。

现在如果浏览器禁用JavaScript的话，浏览器就会显示包含在<noscript>中的内容。

上一篇： JS监听回车键

下一篇： JavaScript高级程序设计第四版学习--第二十三章

JavaScript高级程序设计（第四版）学习笔记（第二章 HTML中的JavaScript）

第二章 HTML中的JavaScript

文章目录

1.<script>元素

1.1标签位置

1.2推迟执行脚本和异步执行脚本

1.3动态加载脚本

2.行内代码和外部文件

3.文档模式

4.<noscript>元素