none，关闭一个元素的显示，该元素如同不存在。
inline，该元素生成一个或多个行内元素盒。
block，该元素生成一个块元素盒。
list-item，该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。
inline-block，该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）。
inline-table，在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。
table，这个元素的作用就像  <table> 元素. 它定义了一个块级盒子。
table-caption，这个元素的作用的就像<caption> 一样。
table-header-group，这个元素的作用就像<tfoot> 一样。
table-footer-group，这个元素的作用就像<thead> 一样。
table-cell，这个元素的作用就像<td> 一样。
table-row，这个元素的作用就像<tr> 一样。
table-row-group，这个元素的作用就像<tbody> 一样。
table-column，这个元素的作用就像<col> 一样。
table-column-group，这个元素的作用就像<colgroup> 一样。
flex，该元素的行为类似于块级元素，并根据Flexbox模型来描述其内容。
inline-flex，该元素的行为类似于行内块级元素，并根据Flexbox模型来描述其内容。
grid，网格布局。
inline-grid，行内网格布局。

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。
另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

visible，元素正常显示。
hidden，隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
collapse，用于表格行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间。

当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，top属性的效果和position为relative等同；如果元素在viewport外面，top属性的效果和position为fixed等同。
当position设置为static时，top属性无效。

inline-table，在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。
table，这个元素的作用就像  <table> 元素. 它定义了一个块级盒子。
table-caption，这个元素的作用的就像<caption> 一样。
table-header-group，这个元素的作用就像<tfoot> 一样。
table-footer-group，这个元素的作用就像<thead> 一样。
table-cell，这个元素的作用就像<td> 一样。
table-row，这个元素的作用就像<tr> 一样。
table-row-group，这个元素的作用就像<tbody> 一样。
table-column，这个元素的作用就像<col> 一样。
table-column-group，这个元素的作用就像<colgroup> 一样。

1. column-count，列数
2. column-width，列宽
3. column-gap，间隙

break-after，描述在生成的盒子之后的页面，列或区域中断行为（换句话说，如何以及是否中断）。
break-before，定义页面，列或区域在生成的盒子之前应如何处理中断。
break-inside，描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。
column-fill
column-rule
column-rule-color，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。
column-rule-style，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的样式。
column-rule-width，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。
column-span，设置为all的时候跨越所有列

display: grid;

显式网格：
    grid-template-columns
    grid-template-rows
隐式网格：
    grid-auto-rows
    grid-auto-columns
fr单位：等份
定义重复部分：repeat()
轨道大小：minmax()
布局算法：grid-auto-flow，[ row | column ] || dense

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
grid-column-start
grid-column-end
grid-row-start
grid-row-end

grid-template-areas
grid-area

grid-gap
grid-column-gap
grid-row-gap

嵌套网格和他的父级并没有关系。

z-index

容器：
grid
grid-area
grid-gap

显示网格：
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

隐式网格：
grid-auto
grid-auto-columns
grid-auto-rows

布局算法：
grid-auto-flow：控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

定位：
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-row
grid-row-end
grid-row-gap
grid-row-start

back()，回退
forward()，前进
go(step)

HTML5 新增了几个API， history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用，用于无刷新变更历史记录。——他们的作用非常大，可以做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中。

pushState(stateObj, title, URL)
replaceState(stateObj, title, URL)

第三个参数RUL必须是同域的。

popstate事件，window.addEventListener('popstate', cb)

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)

通常情况下， File 对象是来自用户在一个   <input> 元素上选择文件后返回的 FileList 对象；
也可以是来自由拖放操作生成的 DataTransfer 对象；
或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。
比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob  和 File。

Promise<Response> fetch(input[, init]);

?input，定义要获取的资源。这可能是：
一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
一个 Request 对象。

init（可选），一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
cache:  请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括请求的  subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

Body（由Request 和Response实现）：
Body.bodyUsed，指示body是否被读取过的 Boolean 值。
Body.arrayBuffer()，使用一个buffer数组来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.blob()，使用一个Blob对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.formData()，使用一个 FormData 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.json()，使用一个 JSON 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
Body.text()，使用一个USVString (文本) 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。

Headers（Request.headers 和Response.headers）：
Headers.append()，给现有的header添加一个值, 或者添加一个未存在的header并赋值.
Headers.delete()，从Headers对象中删除指定header.
Headers.entries()，以 迭代器 的形式返回Headers对象中所有的键值对.
Headers.get()，从Headers对象中返回指定header的第一个值.
Headers.getAll()，以数组的形式从Headers对象中返回指定header的全部值.
Headers.has()，以布尔值的形式从Headers对象中返回是否存在指定的header.
Headers.keys()，以迭代器的形式返回Headers对象中所有存在的header名.
Headers.set()，替换现有的header的值, 或者添加一个未存在的header并赋值.
Headers.values()，以迭代器的形式返回Headers对象中所有存在的header的值.

Response：
Response.type（只读），包含Response的类型 (例如, basic, cors).
Response.url（只读），包含Response的URL.
Response.useFinalURL，包含了一个布尔值来标示这是否是该Response的最终URL.
Response.status （只读），包含Response的状态码 (例如, 200 成功).
Response.ok （只读），包含了一个布尔值来标示该Response成功(状态码200-299) 还是失败.
Response.redirected （只读），表示该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个.
Response.statusText （只读），包含了与该Response状态码一致的状态信息 (例如, OK对应200).
Response.headers （只读），包含此Response所关联的Headers 对象.

Request：
new Request(input, init)，跟fetch(input[, init]);一样

LEVEL 1：
受同源策略的限制，不能发送跨域请求；
不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

LEVEL 2：
可以发送跨域请求，在服务端允许的情况下；
支持发送和接收二进制数据；
新增formData对象，支持发送表单数据；
发送和获取数据时，可以获取进度信息；
可以设置请求的超时时间；

window.requestAnimationFrame(callback);

callback：
一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。

返回值：
一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

window.cancelAnimationFrame()，取消requestAnimationFrame注册的回调。

var handle = window.requestIdleCallback(callback[, options])

callback：
一个即将被调用的函数的引用。函数会接收到一个名为 deadline 的参数，它具有如下属性 :
    timeRemaining：一个返回DOMHighResTimeStamp的函数的引用
    didTimeout： 布尔型，如果 callback 在空闲时间被客户端执行，它的值为 false，其他情况它的值为 true(例如：options 中给了超时时间，并且在超时过期时仍没有足够的空闲时间)。

options：
包括可选的配置参数。具有如下属性：
    timeout：timeout 值被指定为正数时，当做浏览器调用 callback 的最后期限。它的单位是毫秒。

返回值：
一个无符号长整数，可以把它传入 Window.cancelIdleCallback() 方法，来结束回调

属性：
navigation，对象，提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等。
onresourcetimingbufferfull，事件处理器，当触发 resourcetimingbufferfull 事件的时候会被调用。
timeOrigin，数值，返回性能测量开始时的时间的高精度时间戳。
timing，对象，包含延迟相关的性能信息。

方法：
clearMarks()
clearMeasures()
clearResourceTimings() 
getEntries()
getEntriesByName() 
getEntriesByType()
mark()，标记
measure(name, startMark, endMark)，测量
now()
setResourceTimingBufferSize()
toJSON()

下面的样式：
.oneClass .twoClass {
    width: 100px;
    margin: 20px;
}

会被分解如下：
.oneClass{
    width: 100px;
}
.oneClass{
    margin-left: 20px;
}
.oneClass{
    margin-right: 20px;
}
.oneClass{
    margin-top: 20px;
}
.oneClass{
    margin-bottom: 20px;
}
.twoClass{
    width: 100px;
}
.twoClass{
    margin-left: 20px;
}
.twoClass{
    margin-right: 20px;
}
.twoClass{
    margin-top: 20px;
}
.twoClass{
    margin-bottom: 20px;
}

1. 重要声明，!important，放在声明的最后
2. 内联样式特殊性，1, 0, 0, 0
3. ID选择器，0, 1, 0, 0
4. 类选择器、属性选择器或伪类，0, 0, 1, 0
5. 元素选择器和伪元素，0, 0, 0, 1

1. 为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则
2. 无视DOM树中的距离
3. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级

/**
* position: sticky的polyfill
* 推荐在文档加载完成之后（‘DOMContentLoaded’事件）调用
* @param {String} selectors 选择器
* @param {String} top 距离顶部的偏移量
*/
function sticky(selectors, top = 0) {
  let elements = document.querySelectorAll(selectors);
  for (let i = 0; i < elements.length; ++i) {
    elements[i].dataset['originOffsetTop'] = elements[i].getBoundingClientRect().top + ((window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop)
  }
  window.addEventListener('scroll', onScroll(elements, top));

  function onScroll(elements, top) {
    let shouldRun = true
    return () => {
      let scrollY = window.pageYOffset;
      if (shouldRun) {
        // 节流代码
        shouldRun = false
        for (let i = 0; i < elements.length; ++i) {
          let element = elements[i];
          console.log(element)
          // 判断是relative条件还是fixed条件
          if (element.dataset['originOffsetTop'] - scrollY <= top && !element.$isSticky) {
            // fixed条件
            fixed(element, top)
          }
          if (element.dataset['originOffsetTop'] - scrollY > top && element.$isSticky) {
            // relative条件
            element.$unFixed && element.$unFixed()
          }
        }
        setTimeout(() => {
          shouldRun = true
        }, 100)
      }
    }
  }

  function fixed(element, top) {
    let originCss = element.style.cssText;
    element.style.cssText += ";position: fixed; top: " + top + "px;";
    element.$isSticky = true
    element.$unFixed = () => {
      element.$isSticky = false
      element.style.cssText = originCss;
    }
  }
}

/**
* position: sticky的polyfill
* 推荐在文档加载完成之后（‘DOMContentLoaded’事件）调用
* @param {String} selectors 选择器
* @param {String} top 距离顶部的偏移量
*/
function sticky(selectors, top = 0)

infinite：无限循环
<number>：设置次数

normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性
alternate：动画交替反向运行，反向运行时，动画按步后退
reverse：反向运行动画，每周期结束动画由尾到头运行
alternate-reverse：反向交替， 反向开始交替

none：动画执行前后不改变任何样式
forwards：目标保持动画最后一帧的样式
backwards：动画采用相应第一帧的样式
both：动画将会执行 forwards 和 backwards 执行的动作。

transition：<property> <duration> <timing-function> <delay>;

.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

原因是在重绘操作中：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers，
而transform是位于Composite Layers层，而width、left、margin等则是位于Layout层

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、
scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

使用连字符分隔字符串
BEM：
    B：用一个连字符连接单词表示一个独立的区块
    E：两个下划线表示子组件
    M：两个连字符表示修饰符
JS-类名：表示使用在js代码里，请谨慎修改

a:link{} /* 未访问链接 */ 
a:visited{} /* 已访问链接 */ 
a:hover{} /* 用户鼠标悬停，当鼠标悬浮在链接上面。 */ 
a:active{} /* 激活链接，鼠标按下和松开链接期间。 */ 

display: flex;
flex-direction: row;
justify-content: center;
align-items: middle;

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

element.style.height

element.setAttribute(key, value)
element.setAttribute("style", "key: value")

element.className += ""

element.style.cssText += "key: value"

document.styleSheets[0].addRule("css_name", "key: value")
document.styleSheets[0].insertRule("css_name", "key: value")

http://www.xxx.com/users

get方法：
http://www.xxx.com/graphql?query={}
post方法（在请求体里写查询语句）：
http://www.xxx.com/graphql

dgram.createSocket(options[, callback])，创建一个 dgram.Socket 对象. 一旦创建了套接字，调用 socket.bind() 会指示套接字开始监听数据报消息。
dgram.createSocket(type[, callback])，同上。

socket.addMembership(multicastAddress[, multicastInterface])
socket.address()，返回一个包含 socket 地址信息的对象。
socket.bind([port][, address][, callback])，对于 UDP socket，该方法会令dgram.Socket在指定的port和可选的address上监听数据包信息。
socket.bind(options[, callback])，对于 UDP socket，该方法会令dgram.Socket在指定的port和可选的address上监听数据包信息。
socket.close([callback])，关闭该 socket 并停止监听其上的数据。
socket.dropMembership(multicastAddress[, multicastInterface])
socket.getRecvBufferSize()，socket 接收到的字节大小。
socket.getSendBufferSize()，socket 发送的字节大小。
socket.ref()，默认情况下，绑定一个 socket 会在 socket 运行时阻止 Node.js 进程退出。socket.unref() 方法用于将 socket 从维持 Node.js 进程的引用列表中解除。 socket.ref() 方法用于将 socket 重新添加到这个引用列表中，并恢复其默认行为。
socket.send(msg, [offset, length,] port [, address] [, callback])，msg参数包含了要发送的消息。
socket.setBroadcast(flag)，设置或清除 SO_BROADCAST socket 选项。
socket.setMulticastInterface(multicastInterface)
socket.setMulticastLoopback(flag)
socket.setMulticastTTL(ttl)，设置IP_MULTICAST_TTL套接字选项。
socket.setRecvBufferSize(size)，设置 SO_RCVBUF 套接字选项。设置最大的套接字接收缓冲字节。
socket.setSendBufferSize(size)，设置 SO_SNDBUF 套接字选项。设置最大的套接字发送缓冲字节。
socket.setTTL(ttl)，设置 IP_TTL 套接字选项。 
socket.unref()，参考socket.ref()

net.connect()
net.createConnection(options[, connectListener])，一个用于创建 net.Socket 的工厂函数，立即使用 socket.connect() 初始化链接，然后返回启动连接的 net.Socket。
net.createConnection(path[, connectListener])，同上。
net.createConnection(port[, host][, connectListener])，同上。
net.createServer([options][, connectionListener])，创建一个新的TCP或IPC server。
net.isIP(input)，测试 input 是否是 IP 地址。
net.isIPv4(input)，如果 input 是 IPv4 地址则返回 true，否则返回 false。
net.isIPv6(input)，如果 input 是 IPv6 地址则返回 true，否则返回 false。

close，当server关闭的时候触发。
connection，当一个新的connection建立的时候触发。
error，当错误出现的时候触发。
listening，当服务被绑定后触发。

server.address()，如果在IP socket上监听,则返回绑定的ip地址，一个有 port, family, 和 address 属性: { port: 12346, family: 'IPv4', address: '127.0.0.1' }的对象。
server.close([callback])，停止 server接受建立新的connections并保持已经存在的connections。
server.getConnections(callback)，异步获取服务器的当前并发连接数。当 socket 被传递给子进程时工作。
server.listen(handle[, backlog][, callback])，为 connections 启动一个 server 监听. 一个 net.Server 可以是一个 TCP 或者 一个 IPC server，这取决于它监听什么。
server.listen(options[, callback])，同上。
server.listen(path[, backlog][, callback])，同上。
server.listen([port[, host[, backlog]]][, callback])，同上。
server.listening，一个布尔值， 表明 server 是否正在监听连接。
server.maxConnections，设置该属性使得当 server 连接数过多时拒绝连接。
server.ref()
server.unref()

close，一旦 socket 完全关闭就发出该事件。
connect，当一个 socket 连接成功建立的时候触发该事件。 
data，当接收到数据的时触发该事件。
drain，当写入缓冲区变为空时触发。可以用来做上传节流。
end，当 socket 的另一端发送一个 FIN 包的时候触发，从而结束 socket 的可读端。
error，当错误发生时触发。
lookup，在找到主机之后创建连接之前触发。
timeout，当 socket 超时的时候触发。该事件只是用来通知 socket 已经闲置。

socket.address()
socket.bufferSize，net.Socket 具有该属性，socket.write() 工作时需要。
socket.bytesRead，接收的字节数量。
socket.bytesWritten，发送的字节数量。
socket.connect(options[, connectListener])
socket.connect(path[, connectListener])
socket.connect(port[, host][, connectListener])
socket.connecting
socket.destroy([exception])，确保在该 socket 上不再有 I/O 活动。
socket.destroyed，一个布尔值，用来指示连接是否已经被销毁。
socket.end([data][, encoding])，半关闭 socket。例如发送一个 FIN 包。服务端仍可以发送数据。
socket.localAddress，远程客户端连接的本地 IP 地址字符串。
socket.localPort，用数字表示的本地端口。
socket.pause()，暂停读写数据。
socket.ref()
socket.remoteAddress，用字符串表示的远程 IP 地址。
socket.remoteFamily，用字符串表示的远程 IP 协议族。
socket.remotePort，用数字表示的远程端口。
socket.resume()，在调用 socket.pause() 之后恢复读取数据。
socket.setEncoding([encoding])，设置作为可读流（Readable Stream）的编码。
socket.setKeepAlive([enable][, initialDelay])，启用/禁用长连接功能， 并且在第一个长连接探针被发送到一个空闲的 socket 之前可选则配置初始延迟。
socket.setNoDelay([noDelay])，禁止 Nagle 。默认情况下 TCP 连接使用 Nagle 算法，在发送之前缓冲数据。将 noDelay 设置为 true 将会在每次 socket.write() 被调用的时候立即发送数据。noDelay默认是 true。
socket.setTimeout(timeout[, callback])，当 socket 在 timeout 毫秒不活动之后将其设置为超时状态。
socket.unref()
socket.write(data[, encoding][, callback])，在 socket 上发送数据。第二个参数制定了字符串的编码 - 默认是 UTF8 编码。

new Agent([options])
agent.createConnection(options[, callback])，创建一个用于 HTTP 请求的 socket 或流。
agent.keepSocketAlive(socket)
agent.reuseSocket(socket, request)
agent.destroy()
agent.freeSockets
agent.getName(options)
agent.maxFreeSockets
agent.maxSockets
agent.requests
agent.sockets

abort
connect
continue
information
response
socket
timeout
upgrade

request.abort()，标记请求为终止。
request.aborted
request.connection
request.end([data[, encoding]][, callback])，结束发送请求。 如果部分请求主体还未被发送，则会刷新它们到流中。 如果请求是分块的，则会发送终止字符 '0\r\n\r\n'。
request.flushHeaders()
request.getHeader(name)
request.maxHeadersCount
request.removeHeader(name)
request.setHeader(name, value)
request.setNoDelay([noDelay])
request.setSocketKeepAlive([enable][, initialDelay])
request.setTimeout(timeout[, callback])
request.socket
request.write(chunk[, encoding][, callback])，发送请求主体的一个数据块。 通过多次调用该方法，一个请求主体可被发送到一个服务器，在这种情况下，当创建请求时，建议使用 ['Transfer-Encoding', 'chunked'] 请求头。

checkContinue
checkExpectation
clientError
close
connect，每当客户端发送 HTTP CONNECT 请求时触发。
connection，当新的 TCP 流被建立时触发。
request，每次接收到一个请求时触发。 
upgrade

server.close([callback])
server.listen()，开启HTTP服务器监听连接。
server.listening
server.maxHeadersCount
server.setTimeout([msecs][, callback])
server.timeout
server.keepAliveTimeout

两个全局事件，‘newListener’和‘removeListener’分别表示`EventEmitter`的子类添加或移除监听器的时候触发的事件。
EventEmitter.defaultMaxListeners，全局设置`EventEmitter`的单个事件的监听器数量。

addListener(eventName, listener)，添加 listener 函数到名为 eventName 的事件的监听器数组的末尾。
emit(eventName[, ...args])，按监听器的注册顺序，同步地调用每个注册到名为 eventName 事件的监听器，并传入提供的参数。
eventNames()，返回一个列出触发器已注册监听器的事件的数组。
getMaxListeners()，返回 EventEmitter 当前的最大监听器限制值。
listenerCount(eventName)，返回正在监听名为 eventName 的事件的监听器的数量。
listeners(eventName)，返回名为 eventName 的事件的监听器数组的副本。
off(eventName, listener)，removeListener的别名。
on(eventName, listener)，addListener的别名。
once(eventName, listener)，添加一个单次 listener 函数到名为 eventName 的事件。
prependListener(eventName, listener)，添加 listener 函数到名为 eventName 的事件的监听器数组的开头。 
prependOnceListener(eventName, listener)，添加一个单次 listener 函数到名为 eventName 的事件的监听器数组的开头。
removeAllListeners([eventName])，移除全部或指定 eventName 的监听器。
removeListener(eventName, listener)，从名为 eventName 的事件的监听器数组中移除指定的 listener。
setMaxListeners(n)，修改指定的 EventEmitter 实例的限制。
rawListeners(eventName)，返回一个监听某具名为eventName事件的数组的拷贝，包括任何被包装的事件(例如由.once()创建的事件)。

Buffer，用于处理二进制数据。
console，用于打印 stdout 和 stderr。
global，全局的命名空间对象。
process，进程对象。
URL，URL对象。
URLSearchParams，URLSearchParams对象。
Timer，定时器：
    setImmediate(callback[, ...args])
    setInterval(callback, delay[, ...args])
    setTimeout(callback, delay[, ...args])
    clearImmediate(immediateObject)
    clearInterval(intervalObject)
    clearTimeout(timeoutObject)

1. __dirname，当前模块的文件夹名称。
2. __filename，当前模块的文件名称---解析后的绝对路径。
3. exports，这是一个对于 module.exports 的更简短的引用形式。
4. module，对当前模块的引用。
5. require()，引入模块。

1. require.cache
2. require.main
3. require.resolve，使用内部的 require() 机制查询模块的位置, 此操作只返回解析后的文件名，不会加载该模块。
4. require.resolve.paths，返回一个数组，其中包含解析 request 过程中被查询的路径。 如果 request 字符串指向核心模块（例如 http 或 fs），则返回 null。

module.children，被该模块引用的模块对象。
module.exports，导出的对象。
module.filename，模块的完全解析后的文件名。
module.id，模块的标识符。 通常是完全解析后的文件名。
module.loaded，模块是否已经加载完成，或正在加载中。
module.parent，最先引用该模块的模块。
module.paths，模块的搜索路径。
module.require(id)

A instanceof B

0 instanceof Number // false
new Number(0) instanceof Number // true

function Parent () {};
function Child () {};
Child.prototype = new Parent();
var child = new Child();

child instanceof Child; // true
child instanceof Parent; // true

function Bar(params) {
    if (!(this instanceof Bar)) {
      return new Bar(params);
    }
}

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

function Parent () {};
function Child () {};
Child.prototype = new Parent();
var child = new Child();

function Parent () {};
function Child () {
    Parent.call(this);
};
var child = new Child();

function Parent () {};
function Child (prop) {
    var instance = new Parent ();
    instance.prop = prop || 'default_prop';
    return instance;
}

function Parent () {};
function Child (prop) {
    var instance = new Parent ();
    for (var p in Parent) {
        Child.prototype[p] = Parent[p];
    }
    instance.prop = prop || 'default_prop';
    return instance;
}

function Parent () {};
function Child () {
    Parent.call(this);
};
Child.prototype = new Parent();
var child = new Child();

function Parent () {};
function Child () {
    Parent.call(this);
};
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child = new Child();

// Polyfill
if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        // 这里省略一些安全检查
        var o;
        function F() {};
        F.prototype = proto;
        o = new F();
        o.defineProperties(propertiesObject)
        return o
    }
}

Task = {
    setID: function (ID) { this.id = ID; },
    outputID: function () { console.log(this.id); }
};
// 让XYZ 委托Task
XYZ = Object.create(Task);
XYZ.prepareTask = function (ID, Label) {
    this.setID(ID);
    this.label = Label;
};
XYZ.outputTaskDetails = function () {
    this.outputID();
    console.log(this.label);
};

let person = {
    name: 'Bar'
}

let handler = {
    get: function (target, name) {
        if (name === 'getName') {
            return () => target['name']
        }
    }
}

let p = new Proxy(person, handler)

console.log(p.getName()) // Bar

// initData 方法里有如下代码，说明我们传给Vue构造函数的options.data被绑定到了vm._data
let data = vm.$options.data
data = vm._data = typeof data === 'function' ?
    getData(data, vm) :
    data || {}

// 通关代理的方式，使vm[key] === vm._data[key]
const sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
}

export function proxy(target: Object, sourceKey: string, key: string) {
    sharedPropertyDefinition.get = function proxyGetter() {
        return this[sourceKey][key]
    }
    sharedPropertyDefinition.set = function proxySetter(val) {
        this[sourceKey][key] = val
    }
    Object.defineProperty(target, key, sharedPropertyDefinition)
}

proxy(vm, `_data`, key) // 遍历设置代理

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
// 它们引用相同的对象！
vm.a === data.a // => true

class A {
  constructor () {/**constructor code**/}

  foo () {/**foo code**/}
}

会被转化为下面：

var A = function () {
  function A () {/**constructor code**/}

  A.prototype.foo = function () {/**foo code**/}

  return A
}

class Father {
    constructor() {
        this.fatherSelf = function () { }
    }

    fatherPrototype() { }
}

class Child extends Father {
    constructor() {
        super()
        this.childSelf = function () { }
    }

    childPrototype() { }
}

var child = new Child()

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

var o1 = { a: 1 }
var o2 = { b: 2 }
var f = function () {
    console.log(this)
    console.log([].slice.call(arguments))
}

var f1 = f.bind(o1, 1, 2) // A行
var f2 = f1.bind(o2, 3, 4) // B行

f2(5, 6) // C行

f2(5, 6) === return f1.apply(o2, [3, 4, 5, 6])

return f1.apply(o2, [3, 4, 5, 6])  === return f.apply(o1, [1, 2, 3, 4, 5, 6]

{a: 1}
[1, 2, 3, 4, 5, 6]

this instanceof fNOP ? this : oThis

var f = function () {
    this.c = 3
    console.log(this)
    console.log([].slice.call(arguments))
}

var f2Obj = new f2(5, 6);

// 运行过程，下面的this指将要创建的新对象：
f2(5, 6) === return f1.apply(this, [3, 4, 5, 6] === return f.apply(this, [1, 2, 3, 4, 5, 6]

// 结果（在chrome上执行）
打印：
f {c: 3}
[1, 2, 3, 4, 5, 6]

并且 f2Obj.c === 3

visibility: hidden;

iframe.addListener('', function() {
  iframe.contentDocument.body.textContent || iframe.contentWindow.document.body.textContent;
})

this.form.submit();

new FormData (form? : HTMLFormElement)

formData.append(name, value[, filename]);FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
formData.set(name, value[, filename[);对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
formData.get(name);返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用getAll()方法。
formData.getAll(name);返回该 FormData 对象指定 key 的所有值。
formData.has(name);
formData.delete(name);从 FormData 对象中删除指定 key 和它对应的 value(s)

formData.entries();
formData.keys();
formData.values();

指令
根元素
  头部
    元数据
    外部资源
  网页结构
    网页内容
      多媒体
        文本，有很多相关的文本标签，分为块元素和行内元素
        图片
        音频
        视频
      内嵌内容
        iframe
        object
        canvas
        svg
        script
        table
        form
        交互元素：dialog
        web component：slot、shadow、template

<!DOCTYPE html>

<html>：
    lang，指定语言。

<link>，链接外部资源：
    rel，指明被链接文档对于当前文档的关系——链接类型：stylesheet、shortcut icon、icon、manifest、preload
    type，用于定义链接的内容的类型。text/css
    href，指定被链接资源的URL。

<meta>，元数据信息：
    charset，声明当前文档所使用的字符编码
    http-equiv，允许站点管理者在指定的页面控制用户代理的资源，refresh（秒）
    name，author、description、generator、keywords、viewport
    content，为 http-equiv 或 name 属性提供了与其相关的值的定义

<style>，包含文档的样式信息或者文档的部分内容：
    type，MIME类型（不应该指定字符集）定义样式语言。默认为 text/css。
    media，用于媒体查询，默认值为 all。
    scoped，如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。

<title>，义文档的标题，显示在浏览器的标题栏或标签页上。

color：rgb | rgba | hsl | hsla
direction： ltr | rtl
line-height：设置多行元素的空间量，比如文本。
text-align：定义行内内容（例如文字）如何相对它的块父元素对齐。start | end | left | right | center | justify | justify-all | match-parent
text-justify：只有 text-align: justify; 才会生效
vertical-align：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
text-indent：规定了 一个元素首行文本内容之前应该有多少水平空格。
text-decoration：用于设置文本排版（下划线、顶划线、删除线或者闪烁）。
text-decoration-[color, line, style]：line——none、underline、overline、line-through；style——solid、double、dotted、dashed、wavy
text-shadow：为文字添加阴影。
text-transform，大小写。none | capitalize | uppercase | lowercase | full-width

white-space：设置如何处理元素中的空白。normal | pre | nowrap | pre-wrap | pre-line
word-spacing：声明标签和单词直接的间距行为。normal | <length> | <percentage>
letter-spacing：明确了文字的间距行为。normal | <length>

换行相关：
word-break：单词内断行。normal | break-all | keep-all | break-word
overflow-wrap（word-wrap）：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。normal | break-word
hyphens：连字符。none | manual | auto
line-break：指定如何断行拉丁文字。 auto | loose | normal | strict

font
font-family：<family-name>, <generic-name>。serif——带衬线字体；sans-serif——无衬线字体；monospace——等宽字体；cursive——草书字体；fantasy——艺术字体。
font-size：xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
font-size-adjust：定义字体大小应取决于小写字母，而不是大写字母。
font-stretch
font-style：normal | italic | oblique
font-variant：设置或检索对象中的文本是否为小型的大写字母。normal | small-caps
font-weight：粗细程度。normal | bold | lighter | bolder

list-style
list-style-image：指定一个能用来作为列表元素标记的图片。<url> | none
list-style-position：inside | outside
list-style-type：指定一个列表元素的外观。none | disc | circle | square | decimal(默认) | decimal-leading-zero

border-collapse：决定表格的边框是分开的还是合并的。 separate | collapse
border-spacing：指定相邻单元格边框之间的距离。
caption-side：将表格的标题<caption> 放到规定的位置。top | bottom | block-start | block-end | inline-start | inline-end
empty-cells：定义了用户端 user agent 应该怎么来渲染表格 <table> 中没有可见内容的单元格的边框和背景。show | hide
table-layout：定义了用于布局表格单元格，行和列的算法。auto | fixed
vertical-align：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

outline:<outline-color> | <outline-style> | <outline-width>
outline-color:<color> | invert
outline-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit 
outline-width:thin | medium | thick | <length>

position：static | relative | absolute | fixed | sticky
top、bottom、left、right

vertical-align：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。初始值是baseline。baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
text-align：定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制它的行内内容的对齐。start | end | left | right | center | justify | match-parent

background：
background-attachment：如果指定了background-image，那么该属性决定背景是在视窗中固定还是随包含它的区块滚动。scroll（相对于元素本身固定） | fixed（相对视窗固定） | local（相对于元素的内容固定） | inherit
background-color：在指定的图像的下面
background-image：先指定的图像会在之后指定的图像上面绘制。url("RUL")
background-repeat：属性定义背景图像的重复方式。repeat-x | repeat-y | repeat | space | round | no-repeat
background-size：设置背景图片大小。auto | cover | contain | <length> | <percentage>
background-clip：裁剪边界，设置元素的背景（背景图片或颜色）是否延伸到边框下面。border-box | padding-box | content-box | text
background-origin：图像起始位置，规定了指定背景图片background-image 属性的原点位置的背景相对区域。border-box | padding-box | content-box
background-position：指定背景图片的初始位置，以origin为基准，可以给多背景设置。<position> | [水平偏移，垂直偏移]

border
border-[top, bottom, left, right]
border-[top, bottom, left, right]-[color, style, width]
border-[top, bottom]-[left, right]-radius
border-color
border-style
border-width
border-image
border-image-[outset, repeat, slice, source, width]

同行内元素；
但是作为盒模型的背景，会更灵活；
过滤器（filter）产生特效。
object-fit，替换元素该如何调整大小来适应容器

cursor：光标属性
quotes：引号，open-quote、close-quote、no-close-quote
counter-reset：重置
counter-increment：递增

:active，当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
:empty，代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。
:focus
:focus-within，元素自身或者它的某个后代匹配:focus伪类。
:hover
:link
:not()
:visited
:target，匹配URL的一个片段 (以#标识的) 
:root，匹配文档树的根元素。对于HTML来说是<html>元素

表单相关：
:checked
:default
:disabled
:enabled
:in-range
:out-of-range
:invalid
:valid
:required
:read-only
:read-write

定位元素：
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

::before
::after
::first-letter
::first-line
::selection，应用于文档中被用户高亮的部分

overflow：visible | hidden | scroll | auto | overlay

clip-path：创建一个只有元素的部分区域可以显示的剪切区域
mask：遮盖

scroll-container, html {
    scroll-behavior: smooth;
}

var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

/**
 * 缓慢置顶动画
 * @param {Number} duration 动画持续时间
 */
function scrollToTop(duration) {
    /**
     * 获取滚动条与页面顶部的距离，注意兼容性
     */
    function getOffSetY() {
        return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
    }
    /**
     * 计算每一帧移动的距离（1秒60帧）
     * @param {Number} duration 动画持续时间
     */
    function getDistancePerFrame(duration) {
        var time = duration || 0.5;
        return getOffSetY() / (time * 60)
    }
    /**
     * 根据计算的距离来滚动
     */
    function scrollByDistance() {
        window.scrollBy(0, -distancePerFrame);
        console.log(-distancePerFrame, document.body.scrollTop);
        if (getOffSetY() > 0) {
            rAF(scrollByDistance)
        }
    }
    var distancePerFrame = Math.floor(getDistancePerFrame());
    var rAF = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame ||
        msRequestAnimationFrame || oRequestAnimationFrame;// 兼容性代码
    rAF(scrollByDistance);// 开始动画
}

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

baseURI，表示base URL的DOMString。
childNodes，返回一个包含了该节点所有子节点的实时的NodeList。
firstChild，返回该节点的第一个子节点，如果该节点没有子节点则返回null。
innerText，表示一个节点及其后代的“渲染”文本内容的属性。
isConnected，如果该节点与 DOM 树连接则返回 true , 否则返回 false。
lastChild，返回该节点的最后一个子节点，如果该节点没有子节点则返回null。
nextSibling，只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。
nodeName，返回当前节点的节点名称。
nodeType，只读属性 Node.nodeType 表示的是该节点的类型。
nodeValue，返回或设置当前节点的值。
outerText
ownerDocument，只读属性会返回当前节点的顶层的 document 对象。
parentElement，返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则 返回null.
parentNode，返回指定的节点在DOM树中的父节点。
previousSibling，返回当前节点的前一个兄弟节点,没有则返回null。
textContent，表示一个节点及其后代的文本内容。

appendChild()，将一个节点添加到指定父节点的子节点列表末尾。如果节点已经存在，则是移动到父节点。
cloneNode()，返回调用该方法的节点的一个副本。
compareDocumentPosition()，比较当前节点与任意文档中的另一个节点的位置关系。
contains()，返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。
hasChildNodes(),返回一个布尔值,表明当前节点是否包含有子节点。
insertBefore()，在参考节点之前插入一个节点作为一个指定父节点的子节点。
isDefaultNamespace()，接受一个命名空间URI作为参数,如果该命名空间是当前节点的默认命名空间,则返回true,否则返回false。
isEqualNode()，判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。
lookupNamespaceURI()
lookupPrefix()
normalize()，将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
removeChild()，从DOM中删除一个子节点。返回删除的节点。
replaceChild()，用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

accessKey，设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。
attributes，返回该元素所有属性节点的一个实时集合。
childElementCount，读属性返回一个无符号长整型数字，表示给定元素的子元素数。
children，只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
classList，只读属性，返回一个元素的类属性的实时 DOMTokenList集合。但是可以通过add、remove操作这个classList对象。
className，获取或设置指定元素的class属性的值。由空格分隔的多个class属性值。
clientHeight，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
clientLeft，表示一个元素的左边框的宽度，以像素表示。
clientTop，一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。
clientWidth，内部宽度，该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
firstElementChild，返回对象的第一个孩子 Element, 如果没有子元素，则为null。
id，获取和设置一个元素的标识符(id属性)。
innerHTML，设置或获取HTML语法表示的元素的后代。
lastElementChild，读属性返回对象的最后一个孩子Element ，如果没有子元素，则返回null。
localName，只读属性，返回本地名称的。
name，
namespaceURI，
nextElementSibling，返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的.
ongotpointercapture，事件处理器
onlostpointercapture，事件处理器
outerHTML，包括元素本身和后代元素的HTML语法。要求：必须有父元素；原变量依旧指向旧元素。
prefix，返回指定元素的命名空间前缀。
previousElementSibling，返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的。
scrollHeight，只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。不包括元素的border和margin
scrollLeft，可以读取或设置元素滚动条到元素左边的距离。
scrollTop，获取或设置一个元素的内容垂直滚动的像素数。
scrollWidth，只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。
tagName，当前元素的标签名。

getAttribute()，返回元素上一个指定的属性值。如果指定的属性不存在，则返回  null 或 "" （空字符串）。
getAttributeNames()，返回一个Array，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。
getAttributeNode()，返回指定元素的指定属性， 返回值是 Attr 节点类型。
getBoundingClientRect()，返回元素的大小及其相对于视口的位置。获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getClientRects()，返回一个指向客户端中每一个盒子的边界矩形的矩形集合。 
getElementsByClassName()，返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素。
getElementsByTagName()，返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。
hasAttribute()，返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。
insertAdjacentElement()，将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。
insertAdjacentHTML()，将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。
insertAdjacentText()，将一个给定的文本节点插入在相对于被调用的元素给定的位置。
matches()，如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。
querySelector(),返回与指定的选择器组匹配的元素的后代的第一个元素。
querySelectorAll(),返回一个 NodeList 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。
removeAttribute()，指定的元素中删除一个属性。
removeAttributeNode()，从当前的 element(元素节点) 删除指定的属性。
requestFullscreen()，用于发出异步请求使元素进入全屏模式。
setAttribute()，设置指定元素上的一个属性值。
setAttributeNode()，为指定的 Element 添加属性节点.
setCapture()，在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用。

contentEditable，用于表明元素是否是可编辑的。
dataset，HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。
dir，dir属性用于获取或设置当前元素的元素内容的文本书写方向。
hidden，如果想要隐藏文档，值设置为 true，否则值设置为false。
isContentEditable，只读属性返回一个布尔值：如果当前元素的内容为可编辑状态，则返回 true，否则返回 false。
lang，用来获取或设置元素属性值或文本内容的基语言（base language）。
offsetHeight，只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
offsetLeft，只读属性，返回当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移的像素值。
offsetParent，只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。
offsetTop，只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
offsetWidth，只读属性，返回一个元素的布局宽度。
on + [event + name]
outerText
style，返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。
tabIndex，获取或设置当前元素的tab键激活顺序。
title，属性表示元素的 title。当鼠标移到节点上时，会以“工具提示”（tool tip）的弹出形式显示该属性的属性值文本。

blur()，blur方法用来移除当前元素所获得的键盘焦点。
click()，click 方法可以用来模拟鼠标左键单击一个元素。
focus()，可以设置指定元素获取焦点。

body，返回当前文档中的<body>元素或者<frameset>元素。
characterSet，只读属性返回当前文档的字符编码。
childElementCount，只读属性返回一个无符号长整型数字，表示给定元素的子元素数。
children，只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
compatMode，表明当前文档的渲染模式是混杂模式还是"标准模式"。
contentType，返回当前文档的Content-Type(MIME)类型。
cookie，设置或读取cookie。
curreentScript，返回其所包含的脚本中正在被执行的 <script> 元素。
defaultView，在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null。
designMode，document.designMode 控制整个文档是否可编辑。有效值为 “on”和 “off”。
dir，代表了文档的文字朝向，是从左到右(默认)还是从右到左。
doctype，返回当前文档关联的文档类型定义(DTD)。
documentElement，返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。
documentURI，返回文档地址字符串。
domain，获取/设置当前文档的原始域部分, 用于 同源策略。
embeds，返回一个HTMLCollection对象,包含了嵌入到当前文档中的所有的OBJECT对象。
firstElementChild，只读属性，返回对象的第一个孩子 Element, 如果没有子元素，则为null。
forms，返回当前文档中的 <form>元素的一个集合(一个 HTMLCollection)。
head，返回当前文档中的 <head> 元素。如果有多个 <head> 元素，则返回第一个。
hidden，返回布尔值，表示页面是（true）否（false）隐藏。
images，返回当前文档中所有 image 元素的集合。
implementation，返回一个和当前文档相关联的DOMImplementation对象。
lastElementChild，只读属性返回对象的最后一个孩子Element ，如果没有子元素，则返回null。
lastModified，返回一个字符串,其中包含了当前文档的最后修改日期和时间。
lastStyleSheetSet，返回最后一个启用的样式表集合。
links，links 属性返回一个包含文档中所有具有 href 属性值的 <area> 元素 <a> 元素的集合。
location，本页面的Location对象。
on + [event-name]
pointerLockElement
readyState，一个document 的 Document.readyState 属性描述了文档的加载状态。loading、interactive、complete。
referrer，返回跳转或打开到当前页面的那个页面的URI。
scripts，返回一个HTMLCollection对象,包含了当前文档中所有<script>元素的集合。
scrollingElement，返回滚动文档的 Element 对象的引用。 在标准模式下, 这是文档的根元素, document.documentElement。
styleSheets，表示当前使用的样式表集合的名称。
selectedStyleSheetSet，表示当前使用的样式表集合的名称。
styleSheetSets，返回一个所有当前可用样式表集的实时列表。
title，获取或设置文档的标题。
tooltipNode
URL，返回当前文档的URL地址
visibilityState，返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.

adoptNode()，从其他的document文档中获取一个节点。
close()，用来关闭向当前文档的数据写入。
createAttribute()，创建并返回一个新的属性节点。
createComment()，创建并返回一个注释节点。
createDocumentFragment()，创建一个新的空白的文档片段。
createElement()，创建由tagName 指定的HTML元素，或一个HTMLUnknownElement，如果tagName不被识别。
createEvent()，使用new Event()代替。
createExpression()，编译生成一个 XPathExpression ,可以用来多次的执行。
createNodeIterator()，该函数的作用是用来筛选元素（节点）的。
createProcessingInstruction()，创建一个新的处理指令节点，并返回。
createRange()
createTextNode()
createTreeWalder()
elementFromPoint()，返回坐标点的顶端元素。
evaluate()，根据传入的 XPath 表达式以及其他参数，返回一个 XPathResult 对象。
execCommand()，操作当前focus元素，指令有参考。
exitFullscressn()，让当前文档退出全屏模式。全屏元素栈。
getElementById()，根据id属性返回节点列表集合。
getElementsByClassName()，根据css类属性返回节点列表集合。
getElementsByName()，根据name属性返回节点列表集合。
getElementsByTagName()，根据标签名字返回节点列表集合。
getSelection()，返回一个  Selection 对象，表示用户选择的文本范围或光标的当前位置。
hasFocus()，回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。
importNode()，将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。
open()，打开一个要写入的文档。如果目标中存在文档，则此方法将清除它。
queryCommandEnabled()，查询浏览器中指定的编辑指令是否可用。
queryCommandSupported()，确定浏览器是否支持指定的编辑指令。
querySelector()，返回与指定的选择器组匹配的元素的后代的第一个元素。
querySelectorAll()，返回一个 NodeList 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。
releaseCapture()
write()，将一个文本字符串写入由 document.open() 打开的一个文档流。
writeIn()，向文档中写入一串文本，并紧跟着一个换行符。

applicationCache，应用缓存对象的一个引用。
closed，表示所引用的窗口是否关闭。
console，控制台对象的引用。
crypto，返回与全局对象关联的 Crypto对象。
customElements，返回当前窗口的自定义元素注册表的CustomElementRegistry对象的实例。
devicePixelRatio，此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。
document，返回指向当前窗口内的文档节点
frameElement，返回嵌入当前window对象的元素
frames，返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
fullScreen，这个属性表明了窗口是否处于全屏模式下。
history，返回History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。
indexedDB，返回indexedDB的引用。
innerHeight，只读，浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。
innerWidth，只读，浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
length，返回当前窗口中包含的框架数量(框架包括frame和iframe两种元素)。
localStorage，返回localStorage的引用。
location，只读属性，返回一个 Location  对象，其中包含有关文档当前位置的信息。可以赋给它一个 DOMString。只要赋给 location 对象一个新值，文档就会使用新的 URL 加载。
locationbar，返回一个可以检查visibility属性的 locationbar 对象。
menubar，返回一个可以检测visibility属性的 menubar 对象。
name，窗口的名字主要用于为超链接和表单设置目标（targets）。窗口不需要有名称。
navigator，返回一个navigator对象的引用,可以用它来查询一些关于运行当前脚本的应用程序的相关信息。
on + [event-name]，各种事件类型。
opener，返回打开当前窗口的那个窗口的引用。
outerHeight，Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。
outerWidth，Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
pageYOffset，这是 scrollY 的别名。
parent，返回当前窗口的父窗口对象，如果一个窗口没有父窗口,则它的 parent 属性为自身的引用。
performance，Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。
personalbar，返回一个可以检测visibility属性的 personalbar 对象。
screen，返回当前window的screen对象。screen对象实现了Screen接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。
screenX，返回浏览器左边界到操作系统桌面左边界的水平距离。
screenY，返回浏览器顶部距离系统桌面顶部的垂直距离。
scrollbars，返回可以检查其可见性的滚动条对象。
scrollX，返回文档/页面水平方向滚动的像素值。
scrollY，返回文档在垂直方向已滚动的像素值。
self，返回一个指向当前 window 对象的引用。
sessionStorage，sessionStorage 属性允许你访问一个 session Storage 对象。
top，返回窗口体系中的最顶层窗口的引用。
URL，Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。
window，指向自己。

alert()，显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
atob()，对用base-64编码过的字符串进行解码 。
blur()，将焦点移出顶层窗口。
btoa()，编码。
cancelIndleCallback()，用于取消之前调用window.requestIdleCallback() 的回调。
clearImmediate()，清除 window.setImmediate
clearInterval()，取消用setInterval设置的重复定时任务。
clearTimeout()，取消了先前通过调用setTimeout()建立的定时器。
close()，关闭当前窗口或某个指定的窗口。
confirm()，显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。
createImageBitmap()
fetch()
focus()，请求将窗口显示在前（靠近屏幕），这可能由于用户设置而失败，并且该窗口在方法返回之前不能保证会显示在最前。
getComputedStyle()，返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
getSelection()，返回一个  Selection 对象，表示用户选择的文本范围或光标的当前位置。
matchMedia()，返回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
minimize()，让当前浏览器窗口最小化。
moveBy()，根据指定的值，移动当前窗口。备注：不能实现的原因。
moveTo()，将当前窗口移动到指定的坐标位置。备注：不能实现的原因。
open()，根据指定的参数，将一个资源加载到一个新的浏览上下文（如一个窗口）或一个已经存在的浏览上下文中。
postMessage(message, targetOrigin, [transfer])，可以安全地实现跨源通信。
print()，打开打印对话框打印当前文档。
prompt()，显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字。
requestAnimationFrame()，告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
requestIdleCallback()，会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。函数一般会按先进先调用的顺序执行，除非函数在浏览器调用它之前就到了它的超时时间。
resizeBy()，调整窗口大小。备注：不能实现的原因。
resizeTo()，动态调整窗口的大小。备注：不能实现的原因。
scroll()，滚动窗口至文档中的特定位置。
scrollBy()，在窗口中按指定的偏移量滚动文档。
scrollTo()，滚动到文档中的某个坐标。
setImmediate()，仅IE10支持。
setInterval()，重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
setTimeout()，设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
stop()，此方法用于阻止页面资源加载。

每个DOM节点都实现了EventTarget的接口，都可以注册事件处理器。

第一个阶段可以注册的事件的名称是不受限制的，比如你可以注册很多奇形怪状的事件的处理器。
但是，在触发阶段，浏览器只会生成规范的事件对象（比如`click`），也就是说，你注册的除了`click`事件处理器外，都不会被触发。
但是，这并没有阻止我们自己可以触发自己的事件，受限制的只是我们的想象力。

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean});
target.addEventListener(type, listener[, useCapture]);

options（默认值都为 false）：
一个指定有关 listener 属性的可选参数对象。可用的选项如下：
capture:  Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once:  Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
passive: Boolean，设置为true表示 listener 永远不会调用 preventDefault()，如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

useCapture：
Boolean，是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。如果没有指定，useCapture 默认为 false 。 

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

type
一个字符串，表示需要移除的事件类型，如 "click"。
listener
需要移除的 EventListener 函数（先前使用 addEventListener 方法定义的）。
options 可选
一个可选择的对象：指定有关事件侦听器的特征。可选项有：

- capture : 一个 Boolean 表示这个类型的事件将会被派遣到已经注册的侦听器，然后再派遣到DOM树中它下面的任何 EventTarget。
-  mozSystemGroup: 仅可运行于 XBL 或者 Firefox Chrome，它是一个 Boolean，用于定义是否将侦听器添加到系统组。

useCapture 可选
指定需要移除的 EventListener 函数是否为事件捕获。如果无此参数，默认值为 false。

cancelled = !target.dispatchEvent(event)

event 是要被派发的事件对象。
target 被用来初始化 事件 和 决定将会触发 目标。

var event = document.createEvent(type);

1. preventDefault，阻止执行默认行为，但是事件还是会继续传播
2. stopImmediatePropagation，阻止本节点中剩下的本类型事件处理器执行
3. stopPropagation，阻止事件流继续传播（不论是在捕获还是冒泡阶段）

bubbles，表示该事件是否在DOM中冒泡。
cancelable，表示这个事件是否可以取消。
cancelBubble，通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
composed，表示这个事件是否可以在阴影DOM和常规DOM之间的边界上浮动。
currentTarget，当前注册事件的对象的引用。这个值会在传递的途中进行改变。
defaultPrevented，表示了是否已经执行过了event.preventDefault()。
eventPhase，指示事件流正在处理哪个阶段。0: Event.NONE;1: Event.CAPTURING_PHASE,2: Event.AT_TARGET,3: Event.BUBBLING_PHASE。
isTrusted，指明事件是否是由浏览器（当用户点击实例后）——true或者由脚本（使用事件的创建方法，例如event.initEvent）启动——false。
srcElement，target的别名。
target，对事件起源目标的引用。
timeStamp，事件创建时的时间戳，毫秒级别。
type，事件的类型（不区分大小写）。

# demo.js
console.log(arguments);

# output：
{ '0': {},
  '1':
   { [Function: require]
     resolve: { [Function: resolve] paths: [Function: paths] },
     main:
      Module {
        id: '.',
        exports: {},
        parent: null,
        filename: 'E:\\myWorks\\Workbench\\web\\modu.js',
        loaded: false,
        children: [],
        paths: [Array] },
     extensions: { '.js': [Function], '.json': [Function], '.node': [Function] },
     cache: { 'E:\myWorks\Workbench\web\modu.js': [Object] } },
  '2':
   Module {
     id: '.',
     exports: {},
     parent: null,
     filename: 'E:\\myWorks\\Workbench\\web\\modu.js',
     loaded: false,
     children: [],
     paths:
      [ 'E:\\myWorks\\Workbench\\web\\node_modules',
        'E:\\myWorks\\Workbench\\node_modules',
        'E:\\myWorks\\node_modules',
        'E:\\node_modules' ] },
  '3': 'E:\\myWorks\\Workbench\\web\\modu.js',
  '4': 'E:\\myWorks\\Workbench\\web' }

name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字.

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

setTimeout(func,[delay,param1,param2,····]);
setInterval(func, delay[,param1, param2, ...]);

setTimeout(function(){
    // some code
    setTimeout(arguments.callee, interval); 
}, interval);

(function inter(num) {
    setInterval(() => {
        var t = +new Date();
        ++num;
        console.log(num, new Date());
        while (+new Date() - t < 1000); // 阻塞一秒
    }, 2000) // 间隔两秒
})(0)

NodeJs output（回调间隔3秒）：
1 2018-05-09T01:55:54.841Z
2 2018-05-09T01:55:57.842Z
3 2018-05-09T01:56:00.842Z
4 2018-05-09T01:56:03.842Z
5 2018-05-09T01:56:06.842Z

浏览器 output（回调间隔2秒）：
1 Wed May 09 2018 09:56:28 GMT+0800 (**标准时间)
2 Wed May 09 2018 09:56:30 GMT+0800 (**标准时间)
3 Wed May 09 2018 09:56:32 GMT+0800 (**标准时间)
4 Wed May 09 2018 09:56:34 GMT+0800 (**标准时间)
5 Wed May 09 2018 09:56:36 GMT+0800 (**标准时间)

setTimeout(()=>{
    var demoDiv = document.getElementById('test')
    demoDiv.innerText = 'hello world'; // 变更 DOM
    var t = +new Date();
    while(+new Date() - t < 3000) ; // 阻塞3秒，才会把变更的dom穿给GUI线程
})

<div id="example">{{message}}</div>
new Vue({
  el: '#example',
  data: {
    message: '123'
  }
  methods: {
    updateMessage: () => {
        vm.message = 'new message' // 更改数据
        console.log(vm.$el.textContent) // '123'，因为还未更新到dom属性
        console.log(vm.message) // 'new message'
    }
  }
})

Promise.all()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.prototype.then()
Promise.race()
Promise.reject()
Promise.resolve()

push-task-into-queue(callback, type)
// 其中的callback是放入队列的回调，type是队列的类型：macro-task还是micro-task

css 1：
none，关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。
inline，该元素生成一个或多个行内元素盒。
block，该元素生成一个块元素盒。
list-item，该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。需要父元素搭配padding，子元素搭配list-style-position: outside;list-style-type: disc;

css 2.1：
inline-block，该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）。外部看是inline元素，内部看是block元素
表格模型值：

css 3：
flex
inline-flex
grid
inline-grid

1. 如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
2. 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
3. 如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 。

数值与单位
收集与解析
布局
  盒模型
    块元素
    行内元素

// 函数声明形如：
// name是函数名，类似变量名可以被调用
function name([param,[, param,[..., param]]]) {
   [statements]
}

// 函数表达式形如：
// 其中的[name]是函数代名词，只是作为函数体的一个本地变量（意味着外部是不可以调用的），主要用于调用自身
var function_expression = function [name]([param1[, param2[, ..., paramN]]]) {
   statements
};

(function (a, b) {
    console.log(a, b)
    var a;
    function b() {};
    a = 1;
    console.log(a, b)
})(3, 4)

output：
3 [Function: b]
1 [Function: b]

伪代码转换：
(function (a, b) {
    var a=3,b=4;
    b=function () {}

    console.log(a, b)
    a = 1;
    console.log(a, b)
})(3, 4)

var x = 'windows';
function fun1() {
    var fun2 = () => {
        console.log(this.x)
    }
    fun2()
}
fun1();

var obj = {
    x: 'obj',
    showX: fun1
}
obj.showX()

浏览器非严格模式的output：
windows
obj

nodejs，默认就是严格模式：
undefined
obj

var x = 0;
function f(x = x) { // A行
    console.log(x)
    console.log(y) // B行
    let y = 1;
}
f()

output：
ReferenceError: x is not defined
ReferenceError: y is not defined