共计 3303 个字符，预计需要花费 9 分钟才能阅读完成。
HTML 中的 JavaScript
<script>元素
模式
-
行内
其中的代码会被从上到下解释。计算实现之前，页面其余内容不会被加载，也不会被显式。
-
内部
下载与解析都会阻塞 HTML 解析，扩展名.js 不是必须的，前提是确保服务器返回正确的 MIME 类型。
同时行内有 JavaScript 代码的话，行内代码会被疏忽。
浏览器在解析资源时，会向 src 指定的门路发送一个 GET 申请，以获得相应资源。这个初始的申请不受浏览器同源策略限度（但仍受父页面 HTTP/HTTPS 协定的限度），但返回并被执行的 JavaScript 则受限制。
长处：
- 能够让咱们通过不同的域散发 JavaScript（确保是本人所有或者可信起源）
- 能够动静加载和执行 JavaScript 代码
- 能够将内容集中管理，进步可维护性，可独立编辑，可多处共享，可更好利用缓存（进步加载速度）
- 不至于让 HTML 文件过大
- 兼容 HTML 和 XHTML（不用额定思考 XHTML 中的正文 hack）
- 对于反对 SPDY/HTTP2 的浏览器，能够轻量、独立 JavaScript 组件模式向客户端送达脚本，从同一个中央获得一批文件，并将它们一一放到浏览器缓存中。（Push Cache？）
属性
- src：要执行的代码的内部文件。一个 URL。
-
type：代码块中脚本语言的内容类型（MIME 类型）
常规为 ”text/javascript”。
JavaScript 文件的 MIME 类型通常是 ”application/x-javascript”，不过给 type 设置这个值可能导致脚本被疏忽。
设置为 ”module”会被当作 ES6 模块，可应用 import 和 export 关键字。行为相似加 defer，模块依赖关系也会被下载，等 HTML 解析实现后执行；如果再设置 async，行为相似 async，模块依赖关系都下载完后就开始执行（无论 HTML 解析是否实现）
-
defer（只对外部脚本文件无效，IE7 及更早版本中行内脚本也可指定）不阻塞文档解析
脚本下载与 HTML 解析并行，等 HTML 解析实现后 每个脚本会有序执行（HTML5 规定的有序，并在 DOMContentLoaded 事件（所有同步 js 代码执行结束后触发）之前执行，理论不一样按程序，且加载慢的话可能在 Loaded 事件之后执行，因而最好只蕴含一个这样的脚本）
思考兼容，最好还是把要提早执行的脚本放在页面底部。
XHTML 中指定 defer 须要写成：defer=”defer”
-
async（只对外部脚本文件无效）下载过程不阻塞文档解析
下载 脚本与 HTML 解析并行。不阻塞其余页面动作（如下载资源或其余脚本加载（读取？））
脚本执行 时还是会中断 HTML 解析，不保障执行程序与插入 DOM 的程序统一。
动静导入的脚本（createElement，.src），默认 append 到文档中的
script会异步执行（相似 async），如果须要的 js 按程序执行，须要设置async为 false。不应在页面加载期间批改 DOM，与其余异步脚本没有依赖关系。
保障会在页面的 load 事件（所有资源实现加载后触发）前执行。
XTML 中指定 async 须要写成：async=”async”
- language：（废除）
- charset：（很少用），应用 src 属性时指定的代码字符集
-
crossorigin：配置相干申请的 CORS（跨源资源共享）设置。默认不应用 CORS。
属性值：
- anonymous 配置文件申请不用设置凭据标记（不携带 cookie）
- use-credentials 设置凭据标记，意味着出站申请会蕴含凭据（携带 cookie）
- 空或非法值 默认当作 anonymous
这个配置次要是想在以后我的项目中援用跨域的资源文件时，能捕捉到具体的报错信息（
window.onerror）如果设置了 crossorigin，浏览器启用 CORS 拜访查看，服务器端必须返回一个
Access-Control-Allow-Origin的 header，否则资源无法访问。 -
integrity：容许 比对接管到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。（不是所有浏览器都反对）
如果接管到的资源的签名与该属性指定的签名不匹配，则页面报错，脚本不执行。可用于确保 CDN（内容散发网络，Content Delivery Network）不会提供歹意内容（XSS 危险）。
搁置地位
head 还是 body？
过来都集中搁置在页面的 <head> 标签内，这会导致必须把所有 JavaScript 代码都下载、解析和解释完后，才开始渲染页面。如果 JavaScript 内容过多，就会导致页面渲染的显著提早。
古代 Web 利用通常把所有 JavaScript 援用放在 <body> 元素中的内容前面。避免渲染被阻塞导致的白屏。JS 只能获取曾经解析的 DOM。
动静加载脚本
应用 DOM API。默认以异步形式加载，相当于增加了 async 属性。不是所有浏览器都反对 async 属性，要对立行为，能够明确设置 async 为 false（同步加载）。
以此种形式获取的资源对浏览器的预加载器不可见。会重大影响它们在资源获取队列中的优先级。可能会重大影响性能。要让预加载器晓得这些动静申请文件的存在，能够在文档头部显式地申明它们：
<link rel="preload" href="xxx.js">XHTML
必须指定 type 属性且为 ”text/javascript”
编写代码的规定比 HTML 中严格，在 HTML 中，解析 \<script\> 元素会利用非凡规定，但 XHTML 中没有这些规定。例子：小于号 < 被解释成一个标签的开始
- 把小于号替换成对应的 HTML 实体模式 \< ——影响浏览
-
把所有代码都蕴含到一个 CDATA 块中——能够蕴含任意文本的区块，其内容不作为标签来解析
<script type="text/javascript"><![CDATA[function () {}]]></script>在不反对 CDATA 块的非 XHTML 兼容浏览器中，须要应用 JavaScript 正文来对消：
<script type="text/javascript"> //<![CDATA[function () {} //]]> </script>
XHTML 模式会在页面的 MIME 类型被指定为 ”application/xhtml+xml” 时触发，不是所有浏览器都反对
兼容
- xml 中的利用
-
noscript 以及不反对 JavaScript 的浏览器
-
（Netscape 联结 Mosaic）把脚本代码蕴含在一个 HTML 正文中，如：
<script><!-- function () {} //--></script>当初已不用再应用。在 XHTML 模式下，这样写也会导致脚本被疏忽，因为代码处于无效的 XML 正文当中。
-
<noscript>元素能够蕴含任何能够呈现在
<body>中的 HTML 元素。触发条件：浏览器不反对脚本；浏览器对脚本的反对被敞开
-
文档模式的影响 doctype
次要区别：次要体现在通过 CSS 渲染的内容方面，对 JavaScript 也有一些关联影响（副作用）
-
混淆模式 quirks mode
让 IE 像 IE5 一样（反对一些非标准个性）
以省略文档结尾的 doctype 申明作为开关。——在不同浏览器中差别十分大，须要 hack
-
规范模式 standards mode
让 IE 具备兼容规范的行为
<!-- HTML 4.01 Strict --> <!DOCTYPE ....> <!-- XHTML 1.0 Strict --> <!DOCTYPE ...> <!-- HTML5 --> <!DOCTYPE html> -
准规范模式 almost standards mode
次要区别在于，如何看待图片元素四周的空白。
通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发。
<!-- HTML 4.01 Transitional --> <!DOCTYPE ....> <!-- HTML 4.01 Frameset --> <!DOCTYPE ....> <!-- XHTML 1.0 Transitional --> <!DOCTYPE ...> <!-- XHTML 1.0 Frameset --> <!DOCTYPE ...>
