计算机网络结构物理层定义物理设备标准，起到传输比特流的作用。数据链路层提供可靠的通过物理介质传输数据的方法。通过差错控制、流量控制方法将有差错的物理链路（物理链路容易受到干扰）变为无差错的数据链路将物理层的比特流数据封装成数据帧传递给上层，将上层的数据帧转换为比特流给物理层。提供MAC地址（物理地址），可作为局域网内一个网卡的唯一标识。网络层解决不同子网间的通信问题：逻辑寻址，规定不同的信息交换方式，路由算法，连接服务。IP协议网络上每一个节点都有一个独立的逻辑地址——IP地址IP协议负责将数据包传送到目的地，没有提供一种数据未传达以后的处理机制（这被认为是上层协议需要做的事情），是不可靠的协议。传输层提供可靠的端到端的差错和流量控制，保证报文的正确传输UDP协议没有建立连接，直接向对象发包，不可靠但快速高效。应用：ping命令、实时音视频通信TCP协议三次握手建立连接发送方给接受方TCP数据报，然后等待对方的确认TCP数据报，如果没有，就重新发，如果有，就发送下一个数据报。接受方等待发送方的数据报，如果得到数据报并检验无误，就发送ACK(确认)数据报，并等待下一个TCP数据报的到来。直到接收到FIN(发送完成数据报)四次挥手中止连接会话层建立和管理应用程序之间的通信，保证应用程序自动收发包和寻址表示层解释不同系统之间的通信语法应用层直接面向用户的程序或服务HTTP协议什么是HTTP协议？基于TCP/IP协议基础的一个应用层协议，用于从Web服务器传输超文本到本地浏览器的传送协议，由请求和响应构成。HTTP协议的特点无状态：请求相互独立，通信状态不被保存HTTP报文的组成HTTP报文包括请求报文和响应报文两大部分，其中请求报文由请求行（request line）、请求头（header）、空行和请求体四个部分组成。而响应报文由状态行、响应头部、空行和响应体四个部分组成。HTTP请求方式GET, HEAD, POST, PUT, DELETE,OPTIONSHEAD：获取报头。OPTIONS：获取请求资源的选项、需求或服务器支持，并非资源请求。ajax请求跨域资源时，使用OPTIONS方法发送嗅探请求，以判断是否有对指定资源的访问权限。GET和POST的区别GET安全性低，会被缓存GET请求在URL中显示参数，POST请求在send中传递参数状态码1xx：表示请求已接收，继续处理2xx：成功，操作被成功接收并处理3xx：重定向，需要进一步的操作以完成请求4xx：客户端错误，请求有语法错误或请求无法实现5xx：服务端错误，服务器端错误–服务器未能实现合法的请求200 请求正常处理204 请求正常处理但没有资源返回301永久性重定向302 临时性重定向304 指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified400 请求报文中有语法错误401 表示未授权403 请求被服务器拒绝404 服务器上无法找到请求的资源500 服务器在执行时发生错误503 服务器暂时处于超负载或正在进行停机维护请求APIAjaxvar xhr = null;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); xhr.open(“POST”,“test.html”,true); xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); xhr.send(“fname=Henry&lname=Ford”); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } } xhr.onerror = function (e) { console.log(e) }}readyState0：未初始化，尚未调用open1：已经调用open，尚未调用send2：已经send，但尚未收到响应3：已接收到部分响应4：已收到所有响应error事件Network error，只有发生网络层的错误才会出发error事件， 应用层的错误不会进入erroronload事件当请求成功完成时触发，此时xhr.readyState=4onabort事件调用xhr.abort()后触发withCredentials在跨域请求中，客户端必须手动设置xhr.withCredentials=true，且服务器端也必须允许亲贵能携带认证信息（即响应头中包含Access-Control-Allow-Credentials:true），这样浏览器才会自动将cookie加在请求头中。另外，要特别注意一点，一旦跨域请求能够携带认证信息，服务器端一定不能将Access-Control-Allow-Origin设置为*，而必须设置为请求页面的域名。XMLHttpRequest的具体介绍FetchFetch API 基于Promise设计，fetch()返回一个Promise对象fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log(“Oops, error”, e))Fetch原生支持率并不高，需要引入各种polyfill由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham引入 Promise 的 polyfill: es6-promise引入 fetch 探测库：fetch-detector引入 fetch 的 polyfill: fetch-ie8可选：如果你还使用了 jsonp，引入 fetch-jsonp可选：开启 Babel 的 runtime 模式，现在就使用 async/awaitFetch polyfill 的基本原理是探测是否存在 window.fetch 方法，如果没有则用 XHR 实现。这也是 github/fetch 的做法，但是有些浏览器（Chrome 45）原生支持 Fetch，但响应中有中文时会乱码，老外又不太关心这种问题，所以我自己才封装了 fetch-detector 和 fetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在 每天有几千万个请求都在使用，绝对靠谱 ！Fetch 常见坑Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。引用自传统 Ajax 已死，Fetch 永生axios基于Promise的HTTP封装库，可用于浏览器和node环境浏览器中使用XMLHttpRequestnode.js中使用http模块支持Promise API可拦截请求和响应转换请求和响应数据可取消请求自动转换JSON数据为客户端提供XSRF支持axios项目仓库&文档跨域什么是跨域跨域的解决方法缓存强缓存不会发出请求，直接从缓存中读取数据Expires设置过期时间，缺点使用浏览器时间判断，浏览器时间会随客户端设置修改Cache-Control设置相对时间，以秒为单位Cache-Control优先级大于Expires协商缓存发出请求，与服务端配合判断资源是否过期，需要与Cache-Control共同使用如果命中协商缓存，服务端返回304并通知浏览器从本地缓存读取资源Last-Modified和If-Modified-Since记录和比较资源的修改时间，存在的问题：1. 时间误差 2. 资源修改和时间修改可能不一致ETag和If-None-Match服务端通过哈希算法根据文件内容计算出哈希值记录和比较资源的哈希值ETag优先级大于Last-Modified用户行为对缓存的影响地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；F5刷新，浏览器会设置max-age=0，跳过强缓存判断，会进行协商缓存判断；ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。其他响应头no-cache是否使用缓存需要经过协商缓存来验证决定no-store所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存public所有内容都将被缓存（客户端和代理服务器都可缓存）private所有内容只有客户端可以缓存请求优化资源压缩合并非核心代码异步加载利用浏览器缓存使用CDN预解析DNS页面性能优化办法有哪些