第一章什么是JavaScript

1.2 JavaScript的实现

1.2.1 ECMAScript

ECMAScript定义了js语言的语法、类型、语句、关键字、保留字、操作符、全局对象

1.2.2 DOM

文档对象模型是一个应用编程接口。DOM将整个页面抽象为一组分层节点。
DOM的作用 为了保持Web跨平台性的本性。（让一个HTML页面可以在多个浏览器中运行）
DOM的级别 Level1的目标是映射文档结构。Level2新增了DOM视图、DOM事件、DOM样式、DOM遍历和范围。Level3增加了以统一的方式加载和保存文档的方法。
其他DOM 1.可伸缩矢量图SVG 2.数学标记语言MathML 3.同步多媒体集成语言SMIL

1.2.3 BOM

浏览器对象模型，用于支持访问和操作浏览器的窗口。BOM主要针对浏览器窗口和子窗口（frame).
BOM的拓展

弹出新浏览器窗口的能力
移动、缩放和关闭浏览器窗口的能力
navigator对象，提供关于浏览器的详尽信息
location对象，提供浏览器加载页面的详尽信息
screen对象，提供关于用户屏幕分辨率的详尽信息
performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息。
对cookie的支持
其他自定义对象

1.3 JavaScript的版本

1.4 小结

JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。

ECMAScript
文档对象模型（DOM）
浏览器对象模型（BOM）

第二章 HTML中的JavaScript

2.1 <script>元素

将JavaScript插入HTML,改元素有8个属性

async 可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。支队外部脚本文件有效。
charset 可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
crossorigin 可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。“crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
defer 可选。表示在文档解析和显示完成后再执行脚本是没有问题的。只对外部脚本文件有效。
integrity 可选。允许比对接收到的资源和指定的加密签名以验证字子元完整性（SRI）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN）不会提供恶意内容。
language 废弃。
src 可选。表示包含要执行的代码的外部文件。
type 可选。代替language，表示代码块中脚本语言的内容类型（也称MIME类型）。JavaScript文件的MIME类型通常是"application/xjavascript"。
使用<script>的方式有两种：通过它直接在网页中嵌入javaScript代码，，以及通过它在网页中包含外部JavaScript文件。

<script>  
   function sayHi(){
        console.log("Hi");
   }
</script>

包含在<script>内的代码会被从上到下解释。在上面的例子中，被解释的是一个函数定义,并且该函数会被保存在解释器环境中。而<script>元素中的代码被计算完成之前，页面的其余内同不会被加载，也不会被显示。
要包含外部文件中的JavaScript，就必须使用src属性。

<script src="example.js"></script>

与解释行内Js一样，在解释外部JS文件时，页面也会被阻塞。
使用了src属性的<script>元素不应该再在<script>和<\script>中在包含其他代码。如果包含，浏览器只会加载并执行脚本文件，忽略行内代码。
src中的URL指向的资源可以和包含它的HTML页面不在同一个域中。
浏览器在解析这个资源时，会向src属性执行的路径发送一个GET请求。假定是一个JavaScript文件，这个初始的请求不受浏览器同源策略限制，但返回并被执行的JavaScript受限制。这个请求受父页面HTTP/HTTPS协议的限制。
如果浏览器没有使用defer和async，浏览器会按照<script>在页面中出现的顺序依次解释它们。

2.1.1 标签占位符

过去，所有<script>元素都被放在页面的<head>

<head>
    <title>
    <script></script>
    <script></script>
</head>

这种做法把外部的css和JavaScript文件都集中放在一起。把所有JavaScript文件都放在<head>里，意味着要把所有js代码都下载、解析完成后才能开始渲染页面。(页面在浏览器解析到<body>的起始标签时才开始渲染）。对于很多需要js的页面渲染之前页面完全空白。现在通常将JS的引用放在<body>元素中的页面的内容后面。

2.1.2推迟执行脚本

defer属性在script标签上设置这个属性，会告诉浏览器应该立即开始下载，但执行推迟。这时候如果script标签放在head里面，script会到浏览器解析到结束的</html>标签后才会执行。defer是个也许不该只对外部脚本文件才有效。

2.1.3异步执行脚本

async属性，与defer一样，只适用于外部脚本，都会告诉浏览器立即开始一下载，但是async的脚本并不保证能按照它们出现的次序执行。给脚本家async是告诉浏览器，不必等脚本下载和执行完再加载页面。

2.1.4动态加载脚本

除了<script>标签，还有其他方式可以加载脚本，通过向DOM中动态添加script元素可以加载指定的脚本。只要创建一个script元素并将其添加到DOM就可以了。

let script = document.createElement('script');
script.src='xxx.js";
document.head.appendChild(script);

把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于加了async属性。但是所有浏览器都支持createElement()方法，但不是所有浏览器都支持async属性，所以可能出问题。
因此，要统一动态脚本的加载行为，可以明确将其设置为同步加载。

let script = document.createElement('script');
script.src='xxx.js";
script.async=false;
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的，会严重影响它们在资源获取队列中的优先级。想要让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们。

<link rel="preload" href="xxx.js">

2.1.5 XHTML中的变化（不看了，已经退出历史舞台）

可拓展超文本标记语言(XHTML)是将HTML作为XML的应用重新包装的结果。与HTML不同，在XHTML中舒勇JS必须执行type属性且值为text/javascript/

2.1.6 废弃的语法

2.2 行内代码与外部文件

行内代码在HTML文件中嵌入JS代码。
外部文件更好，有以下优点

可维护性。JS代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有JS文件，则更容易维护。
缓存。浏览器根据特定的设置缓存所有外部链接的js文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。页面加载更快。
SPDY/HTTP2 第50页

2.3 文档模式

可以使用doctype切换文档模式。

混杂模式让IE像IE5一样。在所有浏览器中都以省略文档开头的doctype声明作为开关。
标准模式让IE具有兼容标准的行为。这两种模式的主要区别只体现在通过CSS渲染的内容方面，对JS也有一些关联影响。后面会提到。
第三种文档模式：准标准模式。这种模式下的浏览器支持很多标准的特性。通过过渡性文档类型（Transitional）和框架集文档类型（Frameset)来触发。准标准模式和标准模式非常接近，很少需要徐芬。

2.4 <noscript>元素

为了应对早期浏览器不支持JavaScript的问题，被用于给不支持JS的浏览器提供替代内容。
<noscript>元素可以包含任何出现在<body>中的HTML元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscript>中的内容。

浏览器不支持脚本
浏览器对脚本的支持被关闭任何一个条件满足，包含在<noscript>中的内容就会被渲染，否则浏览器不会渲染这个<noscript>中的内容。

2.5 小结

JavaScript是通过<script>元素插入到HTML页面中。

引用外部JS文件，必须将src属性设置上文件的url。
所有<script>元素会按照它们在网页中出现的次序被解释
对不延迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，才能继续渲染页面的其他部分，因此一般把<script>标签放在页面末尾，介于主内容之后和body之前。
可以使用defer属性把脚本推迟到文档渲染完毕后执行。
可以使用async属性表示脚本不需要等待其他脚本，同时也不会阻塞文档渲染，即异步加载。异步加载不能保证按照它们在页面中出现的次序执行。
<noscript>元素可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启动脚本，这个标签里面的内容不会被渲染。

JavaScript高级应用 笔记一

第一章 什么是JavaScript