关于javascript: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 ...>
```