Javascript高级程序设计--读书笔记--第二章--Script标签

最新推荐文章于 2023-04-24 16:22:42 发布

Planetlll_hh

最新推荐文章于 2023-04-24 16:22:42 发布

阅读量374

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_61066898/article/details/122027013

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在HTML 中使用JavaScript

一、script元素属性

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
defer：可选。表示脚本可以延迟到文档完全呗解析和显示之后再执行。只对外部脚本有效
src：可选。表示包含要执行代码的外部文件。
charset type 略。

二、script标签的位置

按照惯例，所有<script>元素都应该放在页面的<head>元素中。这种做法带来两个缺点：

把所有外部文件的引用都放在相同的地方。但这样一来浏览器加载页面时就必须等到全部JavaScipt代码都被下载、解析和执行完成后，才能开始呈现页面的内容。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。
JavaScript用于管理页面上的 DOM 元素，如果 JavaScript 脚本的加载先于 HTML 的加载，JavaScript 操纵一个不存在的 DOM 元素，必然会出错。

为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面的内容后面。这样的方案又带来了新的问题：只有在所有 HTML DOM 加载完成后才开始脚本的加载/解析过程。对于有大量 JavaScript 代码的大型网站，可能会带来显著的性能损耗。这也是 async 属性诞生的初衷。

补充：HTML5规范要求HTML 元素是按其在页面中出现的次序调用的。

async和defer的区别：

async：浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

三、嵌入代码与外部文件

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

可维护性：把所有的JavaScript文件都放在一个文件夹中，开发人员能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都是用同一个文件，那么这个文件只需下载一次。最终结果就是能够加快页面加载的速度。

四、文档模式

IE5.5引入了文档模式的概念，而这个概念时通过使用文档类型（doctype）切换实现的。最初的两种文档模式是：混杂模式、标准模式。后来IE又提出了准标准模式。

<!-- 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>

在文档开头没有发现文档声明类型时，所有浏览器默认开启混杂模式，这种模式在不同的浏览器下的行为差异很大，会出现很多兼容问题，跨浏览器的行为根本没有一致性可言。