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

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></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）来触发。
```


<!DOCTYPE ....>



<!DOCTYPE ....>



<!DOCTYPE ...>



<!DOCTYPE ...>
```