JavaScript高级程序设计读书笔记02-----HTML中的JavaScript

本文链接：https://blog.csdn.net/m0_55842907/article/details/125110918

本文详细介绍了HTML中<script>标签的使用，包括async和defer属性的区别，以及动态加载脚本的方法。强调了外部脚本的可维护性和缓存优势，并提及文档模式对JavaScript执行的影响。推荐将JavaScript引用放在<body>标签后面，以优化页面加载性能。

摘要由CSDN通过智能技术生成

目标导航：

1、在HTML中使用<script></script>标签以及主要属性

2、行内脚本与外部脚本的区别

3、文档模式对于JavaScript有什么影响

一、<script>元素

1.1 关于script元素

此元素是由网景公司所创造的，用于在HTML中嵌入JS代码，现在已经成为了HTML的规范。

主要使用的有以下几个属性：

1、async 可选，表示立即开始下载脚本，但不能阻止页面的其他动作，包括下载资源或等待其它脚本的加载，仅对于外部的脚本文件有效。

2、defer 可选，表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。

3、src 可选，表示包含要执行的代码的外部文件的路径，可以是相对路径，也可以是绝对路径。

4、type 可选，当其为module时，代码中才可以出现export和import,一般默认为text\javascript。

特别注意的一点：外部JavaScript文件的扩展名是.js，这并不是必须的，因为浏览器不会检查所包含JavaScript文件的扩展名是否为js,这就为使用服务器端脚本语言动态生成JavaScript代码，或者在浏览器中将JavaScript扩展语言（如TS，JSX）转译为js提供了可能性。

几点提醒：

1、浏览器在解析元素中src引用的外部js文件的时候，会向src属性指定的路径发送一个GET请求，以取得相应的资源，如果是一个JavaScript文件，初始的请求不受同源策略的限制，但返回的并执行的JS文件则受限制。

2、在没有使用async和defer的条件下，不同的<script>元素是按照顺序严格依次执行的。

3、现在Web应用程序一般将所有的外部JavaScript引用放在<body>后面。页面渲染后再对js资源进行加载。

4、在多个script元素中使用defer可以保证按照顺序执行，其作用是告诉浏览器立即下载，但是等到页面渲染完成之后再执行。而async在多个script元素中使用则不能保证按照出现的顺序依次执行。

1.2 如何动态加载脚本

在JavaScript中可以调用DOM API，因此可以通过下面的方法实现脚本的动态加载；

let script=document.createElement('script');
script.src='gibberish.js';
document.head.appendChildren(script);

浏览器的预加载器对此是不可见的，会严重影响其在资源获取队列中的优先级。应该在头部进行显式的声明：

<link rel='preload' href="gibberish.js">

二、关于XHML的一些补充说明

所谓XHML就是指可扩展超文本标记语言Extensible HyperText Markup Language，将HTML作为XML的应用重新包装的结果，其必须使用type值且属性为text/javascript。目前XHTML已经退出了历史舞台，仅做概念了解即可。

三、行内代码与外部文件

虽然可以使用<script>元素将JavaScript代码嵌入到HTML页面中，但是一般并不推荐。最佳实践是尽可能地将JS代码放在外部文件通过src属性引入使用，这样做地好处有以下几点：

1、可维护性，大量的JS代码分布在不同的HTML文件中对于后期的维护来说是并不友好的。

2、缓存，浏览器会根据特定的设置缓存所有外部链接的JS文件，可以提高页面的加载速度。

在初次请求时，如果浏览器支持SPDY/HTTP2,就可以从同一个地方取得一批文件，并将其逐个放入到浏览器缓存中。

四、文档模式

文档模式指可以通过doctype切换文档模式，不同的模式主要体现在通过CSS渲染的内容方面，但是对于JavaScript也有一些关联的影响。

五、总结归纳

在使用<script>元素时，使用src属性设置需要包含文件的URL,文件可以跟网页在同一个服务器上，也可以在完全不同的作用域中。

JavaScript高级程序设计读书进度 20/865