DOM (Level 2) 事件流
闲暇无事复习下 DOM 事件流，顺便做做笔记记录一些重点。
先看一段简单的 HTML 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div"></div></body></html>当我们点击 div 时，事件流的传播过程如下：
1. 捕获阶段
最先开始的是捕获阶段。
按照 DOM Level 2 标准要求，事件会从 document 开始向内部传播，途径 html、body，最终在事件目标 (event target) div 之前停止。从而有机会在事件流到达目标之前捕获。
然而实际上是这样的：
- IE9, Safari, Chrome, Opera, Firefox 会从
window开始捕获事件。 - IE9，Safari，Chrome，Firefox，Opera 9.5+ 等浏览器，捕获阶段不会在事件目标前停止，会继续传播到事件目标。
JavaScript 中的多行文本
有时候，我们需要使用 JavaScript 构造一些 HTML 代码，如下：
<div id="outer"> <div id="inner"> 内容 </div></div>用 JavaScript 字符串来表示就是：
const html = '<div id="outer"><div id="inner">内容</div></div>'为了可读性和避免写错，就有强烈的写成带缩进的多行文本的需求。 现阶段，JavaScript 的多行文本，大家马上能想到的就是用 ES6 的字符串模板字面量来创建。
const html = `<div id="outer"> <div id="inner"> 内容 </div></div>`忆苦思甜，以前都是怎么做的呢？
可能大家还有印象，最笨拙的字符串拼接方法：
var html = ''+ '<div id="outer">'+ '<div id="inner">'+ '内容'+ '</div>'+ '</div>'还有利用反斜杠的方式：
var html = '\<div id="outer">\ <div id="inner">\ 内容\ </div>\</div>\'利用数组的方式：
var html = ['<div id="outer">',' <div>',' 内容',' </div>','</div>'].join('')不走寻常路的利用读取函数内容的方式：
function hereDoc(docFn) { return docFn.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '')}
var html = hereDoc(function(){/*!<div id="outer"> <div id="inner"> 内容 </div></div>*/})在浏览器环境中，也可以直接在 HTML 中写模板代码，然后 JavaScript 读取内容：
<script id="template" type="text/template"> <div id="outer"> <div id="inner"> 内容 </div> </div></script>var html = document.getElementById('template').textContent讲了这么多种书写多行字符串的方法，有什么用处呢？
其实什么用都没，大部分场景，无脑使用 ES6 的模板字面量即可。
全文完
READ MORE...常见跨域通讯技术总结
背景
基于安全性的考虑，浏览器会遵守一个叫做同源策略的安全策略，默认情况下，XmlHttpRequest 对象只能访问其所在页面同一个域 (域名、协议、端口均相同) 的资源。然而，许多应用程序开发过程中，对跨域资源的访问也是很常见的需求。因此，掌握各种合理的跨域资源访问技术是很重要的。
下面列举一些常见的跨域技术。
CORS ( Cross-Origin Resource Sharing )
W3C 推出的 CORS 规范，定义了访问跨源资源时，浏览器和服务器的沟通方式。
使用这种跨域资源访问技术，需要服务器、浏览器同时支持。现代浏览器的支持情况：
- Firefox 3.5+
- Safari 4+
- IE 10+
- iOS Safari
- Android Browser
- Chrome
IE 8 开始引入的 XDomainRequest 也实现了一部分的 CORS 规范。
XDomainRequest 的使用跟 XMLHttpRequest 略有不同，
如 open 方法只支持两个参数（因为所有xdr请求都异步）、不能发送cookie、只支持 get、post方法等等。
CORS 具体实现是，通过 HTTP 首部字段进行交互。大致过程：
READ MORE...WebSocket
WebSocket 是一个比较新的浏览器 API，有着诸多激动人心的特性。
概述
WebSocket 可以用来实现客户端和服务器的实时通讯，并且比较其他实时通讯技术，例如轮询，有着独特的优势，如实时性更好、网络开销更低等等。
WebSocket 使用 HTTP 协议建立连接，但并不是使用 HTTP 传输数据，而是在建立连接后，会切换到一个自定义协议，体现在 URL 上为：ws://、wss://（ 加密版，类似 HTTP 与 HTTPS 的关系 ）。
使用自定义协议带来了一个好处是，每次通讯可以发送更少的数据。
而使用 HTTP 请求的时候，单单首部字段都会引入很多流量消耗。一个主要的原因是，HTTP 请求是无状态的，服务器不会记住请求是谁发送的，每次请求都需要携带识别用的信息。
而 WebSocket 是可以记住状态的，于是可以使用自定义协议仅发送真正有意义的数据，从而节省大量的流量开销。
这在移动应用上特别重要。
WebSocket 分为握手和传输两部分。
其中握手阶段，是使用 HTTP 请求的，并有个协议升级的过程，可以从 HTTP 请求头中观察到这个过程，下面详细说明。
READ MORE...TCP 协议知识整理
TCP
TCP (Transmission Control Protocol) 是一种传输层通信协议。
在因特网协议族（Internet protocol suite）中，TCP层是位于IP层之上，应用层之下的中间层。
不同主机的应用层之间经常需要可靠的、像管道一样的连接，但是IP层不提供这样的流机制，而是提供不可靠的包交换。
TCP 传输过程
一个典型的传输过程，就是一个对数据的逐层封装：
-
一、应用层向传输层发送用于网间传输的、用8位字节表示的数据流(Stream)。
用户数据 -
二、传输层的 TCP 把数据流分割成适当长度(受所处网络的数据链路层 MTU 限制)的报文段(segment)。
TCP 头 用户数据 -
三、TCP 把结果传给网络层。网络层的 IP 将报文段封装成数据报(Datagram)。
IP 头 TCP 头 用户数据 -
四、IP 层再将数据报交由数据链路层封装成帧(Frame)用于发送。
帧头 IP 头 TCP 头 用户数据 帧尾 -
五、通过物理层传输数据。
接收端对数据的操作是个反向操作，称为解封装，逐层移除头信息。
TCP 连接创建（三次握手 three-way handshake）
建立一个 TCP 连接，需要经过三次握手：
READ MORE...