一、网络请求
1、DNS解析：
（1） 浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
（2） 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器 （ 网络接入服务器商)， 本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
（3） 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址
（4） 本地DNS服务器继续向域服务器发出请求， 域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器， 域名的解析服务器的地址。
（5） 本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
2.http请求方法：常用的post,get, 不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。
3.TCP三次握手：
（1） 客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；
（2） 服务端B收到数据包后，通过标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态。
（3） 客户端A收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端B，服务端B检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了。
目的：防止已经失效的连接再次请求报文，而服务器照常响应，客户端无响应，因此照成服务器资源浪费
4.TCP四次挥手
（1） 客户端发送一个FIN，用来关闭客户端到服务端的数据传送，客户端进入FIN_WAIT_1状态。
（2） 服务端收到FIN后，发送一个ACK给客户端，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），服务端进入CLOSE_WAIT状态
（3） 服务端发送一个FIN，用来关闭服务端到客户端的数据传送，服务端进入LAST_ACK状态。
（4） 客户端收到FIN后，客户端进入TIME_WAIT状态，接着发送一个ACK给服务端，确认序号为收到序号+1，服务端进入CLOSED状态，完成四次挥手。
5. Nginx反向代理（向客户端隐藏服务）
当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。此时，客户端不是直接通过HTTP协议访问某网站应用服务器，而是先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。
6. JS阻塞后续资源下载
当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。所以平时的代码中，js尽量放在html文档末尾。
7.跨域问题
（1）原因：同源政策
A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"：协议，域名，端口相同。“同源政策”的目的是为了保护用户信息，防止网站恶意窃取数据。限制主要在以下三个方面：Cookie，Local Storage，index DB无法获取；DOM无法获得；AJAX请求不能发送；
（2）解决方法
-
一级域名相同，二级域名不同：js设置document.domain相同，可以共享Cookie，拿到DOM；服务器设置Cookie的时候，指定Cookie所属域为一级域名，下属域名都可以进行访问Cookie；
-
window.name:只要在一个窗口，无论是否同源，前一个网页设置这个属性，后一个网页就可以读取，优点：容量很大；缺点：必须监听子窗口window.name的变化，影响性能
-
片段识别符：URL＃后面的部分，如果只是改变片段识别符，页面不会刷新；父子窗口可以互相把信息写进对方的片段识别符，并通过hashchange事件得到通知
-
window.postMessage:html5新引入的全新API，允许跨窗口通信，不论这两个窗口是否同源， postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源，即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com')
父窗口和子窗口都可以通过message事件，监听对方的消息， message事件的事件对象event，提供以下三个属性：event.source：发送消息的窗口；event.origin: 消息发向的网址；event.data: 消息内容
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
子窗口可以使用event.source引用父窗口发送消息：
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
event.source.postMessage('Nice to see you!', '*');
}
event.origin可以过滤不是发给本窗口的消息
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
if (event.origin !== 'http://aaa.com') return;
if (event.data === 'Hello World') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}
}
-
JSONP
-
webSocket
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信.webSocket的请求头中origin字段表示请求发送的请求源，服务器可以通过这个字段判断是否允许此次通信。
-
CORS
它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
二、webSocket
１、使用webSocket的原因
HTTP协议不支持持久连接，且通信只能由客户端发起请求，服务器返回查询结果，无法由服务端主动向客户端推送消息。虽然HTTP１.１做出了改进，使用keep－alive，可以发送多个request，接收多个response，但是一个request只能对应一个response，response依然是被动的。
２．webSocket的特点
-
webSocket建立在TCP协议之上，服务器端的实现比较容易；
-
与HTTP协议有着良好的兼容性，默认端口也是８０和４４３，并且握手阶段采用Http协议，因此握手时不容易屏蔽，能通过各种Http代理服务器。
-
数据格式比较轻量，性能开销小，通信高效；
-
可以发送文本，也可以发送二进制数据；
-
没有同源限制，客户端可以与任何服务器通信；
-
协议标识是ws,加密这是wss服务器网址就是URL；
3.webSocket使用
-
构造函数：webSocket对象作为一个构造函数，用于创建webSocket实例；
var ws = new WebSocket("ws://example.com:8080")
-
readyState：返回实例对象的当前状态共有四种
-
CONNECTING：值为0表示正在连接
-
OPEN：值为1表示连接成功，可以进行通信
-
CLOSING值为2，表示正在关闭、
-
CLOSED值为3表示已经关闭或者建立连接失败
-
onopen：用于指定连接成功后的回调函数，如果需要指定多个回调函数可以使用addEventListener方法增加
-
onclose：用于指定连接关闭后的回调函数；同onopen；
-
onmessage：用于指定接收到服务器数据后的回调函数，接受的数据可能是文本或者二进制对象（blob或Arraybuffer），可以使用bindType属性显示指定接受的二进制数据类型
-
send()：用于向服务器发送数据
-
bufferedAmount：表示还有多少二进制数据没有发送出去，可以使用它来判断发送是否结束
-
onerror：用于指定报错时的回调函数