文章目录
🍹 JavaScript 概念
ECMAScript
ECMA，读音类似 “ec ma”，是欧洲计算机制造商协会（European Computer Manufacturers Association）的简称，是一家国际性会员制度的信息和电信标准组织。1994 年之后，由于组织的标准牵涉到很多其他国家，为了体现其国际性，更名为 Ecma 国际（Ecma International），因此 Ecma 就不再是首字母缩略字了，现多写为 Ecma。
ECMA-262 就是 ECMA 262 号标准，具体就是指 ECMAScript 遵照的标准，简称 ES。1996 年 11 月，网景公司将 JavaScript 提交给 Ecma 国际 进行标准化。ECMA-262 的第一个版本于 1997 年 6 月被 Ecma 国际采纳。
🍉ECMAScript 和 JavaScript 的区别：JavaScript 是 ECMAScript 的一个标准，把 ECMAScript 看作一个类，Javascript 就是类的一个实例。
ECMAScript is a Standard for scripting languages such as JavaScript, JScript, etc. It is a trademark scripting language specification. JavaScript is a language based on ECMAScript. A standard for scripting languages like JavaScript, JScript is ECMAScript. JavaScript is considered as one of the most popular implementations of ECMAScript.
可粗略地认为：
🧃Javascript 的这三个部分得到了五大浏览器(IE、FireFox、Chrome、Safari、Opera)不同程度的支持，目前(2022年04月18日)，所有浏览器对 ES5 的支持都已经较为完善，对 DOM 的支持各不相同，对 BOM 的支持因浏览器而异。
🍗常见的 ES8 、 ES9 表示 ECMAScript 的版本，例如 ES9 表示 ECMA-262第9版
🍧大多数浏览器对 Javascript 的支持，指的是实现 ECMAScript 和 DOM 的程度。
DOM：与网页内容交互的方法与接口
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将Web页面和脚本或程序语言连接起来。对浏览器而言，DOM就是使用 ECMAScript 实现的。
W3C(万维网联盟)制定了DOM标准，否则人们将不得不面向浏览器开发网页（不同浏览器支持的网页格式不同，例如，Chrome上的网页在IE上不兼容）。
BOM：与浏览器交互的方法与接口
BOM：Browser Object Model 是浏览器对象模型，BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗之间通信等功能。BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
🌏 HTML 中的 JavaScript
使用 <script> 的方式有三种：
1️⃣通过它直接在网页中嵌入 JavaScript 代码。
2️⃣通过它在网页中包含外部 JavaScript 文件。
3️⃣动态加载脚本。
XHTML
XHTML 与 HTML 的主要区别
XHTML 是更严谨更纯净的 HTML 版本。XHTML是HTML向XML 过渡的一个桥梁，而 XML 是web发展的趋势。XML，可扩展标记语言（Extensible Markup Language），是一种跨平台标记语言。
2000年XHTML出现，变成了冷库严苛无情(语法要求严格)，世人挂念HTML，大概是逝去的那一瞬间，HTML就活在了人们的记忆里了，在人们的记忆里被无限美化，在人们的祈愿下，继承了HTML信仰的HTML5出现，XHTML以墙倒众人推之势退出了历史舞台，HTML5终究是封神而来。
在 XHTML 中：
-
元素必须被正确地嵌套
-
XHTML 元素必须被关闭，空标签也必须被关闭，空标签也必须使用结束标签，或者其开始标签必须使用
/>结尾。<p>This is a paragraph</p> A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> -
XHTML 元素必须小写，XHTML 规范定义：标签名和属性对大小写敏感。
-
XHTML 文档必须拥有一个根元素，所有的 XHTML 元素必须被嵌套于
<html>根元素中。 -
在XHTML中使用JavaScript必须指定
type属性且值为text/javascript, HTML中则可以没有这个属性。
更多的 XHTML 语法规则：
-
属性名称必须小写
-
属性值必须加引号
-
属性不能简写
-
用 id 属性代替 name 属性
<table width="100%">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
<img src="picture.gif" id="picture1" />
重要的兼容性提示：
应该在 “/” 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容。
XHTML 与 HTML5
XHTML is case sensitive, while HTML5, as well as HTML, are not. XHTML has much more complex doctypes than HTML5. The next difference is browser compatibility: HTML5 is supported by all the browser, while XHTML is not. HTML5 is better suited for mobile devices, whereas XHTML is better suited for computer screens. And one more difference is that HTML5 is more lenient than XHTML.
CDATA块
JavaScript 示例：
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
</script>
在HTML中，解析 <script> 元素会应用特殊规则。XHTML中则没有这些规则。这意味着 a < b 语句中的小于号（ < ）会被解释成一个标签的开始，并且由于作为标签开始的小于号后面不能有空格，这会导致语法错误。
避免XHTML中这种语法错误的方法有两种：
1️⃣第一种是把所有小于号（ < ）都替换成对应的HTML实体形式（ < ）。
2️⃣第二种方法是把所有代码都包含到一个 CDATA块 中。在XHTML（及XML）中， CDATA块 表示文档中可以包含任意文本的区块，其内容不作为标签来解析，因此可以在其中包含任意字符，包括小于号，并且不会引发语法错误。但在不支持 CDATA块 的非XHTML兼容浏览器中则不行。为此，CDATA标记必须使用JavaScript注释来抵消。
<script type="text/javascript">
//<![CDATA[
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
//]]>
</script>
**这种格式适用于所有现代浏览器。**虽然有点黑科技的味道，但它可以通过XHTML验证，而且对XHTML之前的浏览器也能优雅地降级。
🌈 页面的加载和渲染过程
-
浏览器通过
HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM； -
在构建
DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件； -
样式文件下载完成后，构建
CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM； -
完成文档解析后，将
DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口 。
🧃在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。
⏰ script 标签属性
async
① async 属性仅适用于外部脚本（只有在使用 src 属性时）,下载完毕立即解释执行代码。
② 如果 async= "async" ：脚本相对于页面的其余部分异步地执行（页面解析和脚本的执行同时进行）
async 只适用于外部脚本文件，并告诉浏览器立即下载文件，下载完成后立即执行。
html解析 遇到async script 下载和执行 （此时HTML继续解析）HTML解析完毕。
因为 async 有可能在HTML没有完全解析完成时，就下载完成并执行，所以在async script 最好不要执行DOM操作。如果有多个async script 那么 谁先下载就先执行谁 和书写顺序无关，所以要确保多者之间互不依赖。
<script type="text/javascript" src="demo_async1.js" async="async"></script>
<script type="text/javascript" src="demo_async2.js" async="async"></script>
defer
① 用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
② 只对外部脚本文件有效。
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。
async是乱序的，而defer是顺序执行，这也就决定了async比较适用于百度分析或者谷歌分析这类不依赖其他脚本的库。一个普通的<script>标签的加载和解析都是同步的，会阻塞DOM的渲染，这也就是我们经常会把<script>写在<body>底部的原因之一，为了防止加载资源而导致的长时间的白屏，另一个原因是js可能会进行DOM操作，所以要在DOM全部渲染完后再执行。
如果既不使用 async 也不使用 defer ：浏览器先读取并执行脚本，然后继续解析页面。
src
① src 属性规定外部脚本文件的 URL。
② 外部文件不能包含 <script> 标签，只包含标签之间的内容。
③ 如果设置了 src 属性，那么content中直接写的代码就会被屏蔽掉。
有时，我们需要在网站的多个页面中运行
JavaScript。不需要重复编写相同的脚本，只需在单独的文件中创建JavaScript，并以.js为后缀保存，然后使用<script>标签中的src属性引用该文件即可。
动态加载脚本
JavaScript 可以使用 DOM API ，所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到 DOM 即可。
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
默认情况下，以这种方式创建的 <script> 元素是以异步方式加载的，相当于添加了 async 属性。但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false; // 明确将其设置为同步加载
document.head.appendChild(script);
以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级，可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
<link rel="preload" href="gibberish.js">
noscript 标签
浏览器对 Javascript 脚本的支持被关闭时，包含在 <noscript> 中的内容就会被渲染。否则，浏览器不会渲染 <noscript> 中的内容。
下面是一个例子：
<! DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer="defer" src="example1.js"></script>
<script defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>This page requires a JavaScript-enabled browser.</p >
</noscript>
</body>
</html>
这个例子是在 Javascript 脚本不可用时让浏览器显示一段话，如果浏览器支持脚本，则用户永远不会看到它。
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
