9.14今天继续冲冲冲！Go Go Go！
今天好像大部分都是网络相关的23333
三次握手四次挥手
- 客户端和服务端之间通过三次握手建立连接，四次挥手释放连接。
- 三次握手：客户端先向服务端发起一个SYN包，进入SYN_SENT状态，服务端收到SYN后，给客户端返回一个ACK+SYN包，表示已经收到SYN，并进入SYN_RECEIVE状态，最后客户端再向服务端发送一个一个ACK包表示确认，双方进入establish状态。
- 四次挥手：首先客户端向服务端发送一个FIN包，进入FIN_WAIT1状态，服务端收到后，向客户端发送ACK确认包，进入COLSE_WAIT状态，然后客户端收到ACK包后进入FIN_WAIT2状态，然后服务端再把自己剩余没有传完的数据发给客户端，发送完毕后再发送一个FIN+ACT包，进入LAST_ACK（最后确认）状态，客户端收到FIN_ACK包后，再向服务端发送ACK包，在等待两个周期后关闭连接。
- 之所以等待两个周期是因为服务端发送的ACK包可能会丢失，如果不等待两个周期的话，服务端在没有收到ACK包之前，会不停的重复的发送FIN包而不关闭，所以要等待两个周期。
为什么不是两次握手？
如果只有两次握手，在服务端收到SYN后，向客户端返回一个ACK确认就进入establish状态，万一这个请求中间遇到网络情况而没有发送给客户端，客户端将一直是等待状态，后面服务端发送的信息客户端也接收不到了。
HTTP的结构
- 请求行 请求头 空行 请求体
- 请求行包括http版本号，url，请求方式
- 相应行包括版本号，状态码，原因
HTTP头都有哪些字段？
- 请求头
- cache-control是否使用缓存
- Connection：keep-alive与服务器的连接状态
- Host主机域
- 返回头
- cache-control
- etag唯一标识，缓存用的
- last-modified最后修改时间
一些状态码
- 2开头的表示成功：200
- 3开头的表示重定向：
301永久重定向
302临时重定向
304表示可以在缓存中取数据（协商缓存） - 4开头表示客户端错误
403跨域
404请求资源不存在 - 5开头的表示服务端错误：500
网络OSI七层模型
应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
TCP属于传输层
HTTP1.0、HTTP1.1和HTTP2的区别
HTTP0.9只能进行get请求
HTTP1.0添加了POST、HEAD、OPTION、PUT、DELETD等
HTTP1.1增加了长连结keep-alive，增加了host域，而且节约带宽
HTTP2 多路复用，头部压缩，服务器推送
HTTP和HTTPS有什么区别？
HTTP 无状态无连接，明文传输，不安全
HTTPS 传输内容加密，身份验证，保证数据完整性
localStorage、SessionStorage、cookie、session 之间有什么区别
- localStorage：
关闭浏览器后数据依然保留，除非手动清除，否则一直在
相同浏览器的不同标签在同源情况下可以共享loaclStorage - SessionStorage：
关闭浏览器或者标签后立即需要
只在当前标签可用，当前标签的iframe中且同源可以共享 - cookie：
保存在客户端，一般由后端设置，可以设置过期时间
储存大小只有4k
一般用来保存用户信息的
在http下cookie是明文传输的，较不安全
cookie属性：- http-only：不能被客户端更改访问，防止XSS攻击（保证cookie安全性的操作）
- Secure：只允许在https下传输
- Max-age：cookie生成后失效的秒数。
- expire：cookie的最长有效时间，若不设置则cookie生命期与会话期相同。
- session ：
保存在服务端
session的运行依赖sessionid，而sessionid又保存在cookie中，所以如果禁用cookie，session将不能使用。非要使用的话，把sessionid保存在url中
一般用来跟踪用户的状态
session的安全性更高，保存在服务端，不够一般为了使服务性能更加，会考虑部分信息保存在cookie中。
get和post的区别
- 缓存
- get请求是可缓存的，get请求的数据时可以缓存的
- post请求不可缓存，查询对数据有副作用，是不可缓存的
- 传参
- get传参，参数在url中
- post传参，参数在请求体body中
- 安全性
- get较为不安全，post较为安全
- 准确来说两者都不安全，都是明文传输的，在路过公网的时候都会被访问到，不管是url还是header还是body，想要做到安全，就需要使用https
- 参数长度
- get参数长度有限，是较小的（在url传参的时候是很小的）
- post传参长度不受限制
- 字符编码：get在url上传输的时候只允许ASC||编码
HTTP缓存
缓存分为强缓存和协商缓存
强缓存：:
- 在浏览器加载资源的时候，先看看cache-control里的max-age，判断数据有没有过期，如果没有直接使用该缓存，有些用户可能会会在没有过期的时候就点击了刷新按钮，这个时候浏览器就回去请求服务器，要想避免这样做，可以在cache-control里面加一个immutable。
- public：允许客户端和虚拟服务器缓存该资源，cache-control中的一个属性
- private：只允许客户端缓存该资源
- no-cache：不允许强缓存，可以协商缓存
- no-store：不允许缓存
协商缓存：
- 浏览器加载资源时，没有命中强缓存，这时候就去请求服务器，去请求服务器的时候，会带着两个参数，一个是If-None-Match，也就是响应头的etag属性，每个文件对应一个etage；另一个参数If-Modified-Since，也就是响应头中的Last-modified属性，带着这两个参数去校验缓存是否真的过期，如果没有过期则服务器会返回一个304的状态码，表示缓存没有过期可以使用旧缓存。
- etag的作用：有时候编辑了文件，但是没有修改，但是last-modified属性的时间就会改变，导致服务器重新发送资源，但是etag的出现就避免了这个问题
缓存位置：
- 内存缓存Memory-Cache
- 离线缓存Service-Worker
- 磁盘缓存Disk-Cache
- 推送缓存Push-Cache
从浏览器输入url后都经历了什么？
1、先进行DNS域名解析，先查看本地hosts文件，查看有没有当前域名对应的ip地址，若有直接发起请求，没有的话会在本地域名服务器去查找，根域名会告诉从哪个服务器去查找，最后查找到对象的ip地址后把对应规则保存到本地的hosts文件中。
2、进行http请求，三次握手四次挥手建立断开连接
3、服务器处理，可能返回304也可能返回200
304:说明客户端缓存可用，直接使用客户端缓存即可（属于协商缓存）
200：同时返回对应的数据
4、客户端自上而下执行代码
- 遇到CSS加载的时候，CSS不会阻塞DOM树的解析，但是会阻塞DOM树的渲染，并且CSS会阻塞下面JS的执行
- JS加载会影响DOM的解析，因为JS可能会删除增加节点，如果先解析后加载DOM树会要重新解析，性能比较差。如果不行阻塞DOM树解析，可以给script添加defer或者async标签。
- defer：不会阻塞DOM解析，等DOM解析完之后再运行，在DOMContentloaed之前
- async：不会阻塞DOM解析，等该资源下载完成之后立刻运行
- 进行DOMM渲染和Render渲染
- 获取html并解析为DOM树
- 解析css并形成cssom（css树）
- 将css树和dom合并成渲染树（render树）
- 进行布局（layout）
- 进行绘制（painting）
- 回流重绘（回流必将引起重绘，重绘不一定会引起回流）
简答版本：
1.浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求;
2.服务器交给后台处理完成后返回数据，浏览器接收文件(HTML、JS、cSS、图象等);
3.浏览器对加载到的资源(HTML、JS、cSS等）进行语法解析，建立相应的内部数据结构(如HTML的DOM) ;
4.载入解析到的资源文件，渲染页面，完成。
CDN
如果想加速http请求过程的话可以使用CDN缓存服务器。
- 用户输入url地址后，本地DNS会解析url地址，把最终解释权交给CNAME指向的CDN的DNS服务器
- CDN的DNS服务器会返回给浏览器一个全局负载均衡IP
- 用户会根据全局负载均衡IP去请求全局负载均衡服务器
- 全局负载均衡服务器根据用户的IP地址，url地址，告诉用户一个负载均衡的设备，让用户去请求
- 区域负载均衡服务器会为用户选择一个离用户比较近的最有的缓存服务器，并把ip地址给到用户
- 用户想缓存服务器发送请求，如果请求不打想要的资源的话会一层一层向上一局查找，直到查找到为止。
事件流
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
事件捕获阶段：实际目标（
处于目标阶段：事件在
冒泡阶段：事件又传播回文档。
事件冒泡和事件捕获
事件冒泡：最内层的元素开始发生，一直向上传播，直到document对象。
p -> div -> body -> html -> document
事件捕获：事件会从最外层开始发生，直到最具体的元素。
document -> html -> body -> div -> p
JS最大安全数
最大整数是Math.pow(2, 53)，大于该值可能会丢失精度
JS常用的数组方法
- map() 给数组的每项数据都添加一个新方法，结果作为一个新数组返回，不会改变原数组。
- forEach() 给数组的每项数据添加一个方法，foEach改变原数组，没有返回值。
- filter() 过滤数组，将满足条件的值变成一个新的数组返回。
- push() 向数组末尾添加一个或多个元素，返回新增后的数组的长度。
- pop() 删除数组中的最后一位元素，改变数组的长度，返回删除的数组。
- shift() 删除数组中的第一个元素，改变数组长度，返回删除的数组。
- unshift() 向数组前面添加一个或多个元素，返回的数组是添加之后的数组。
- isArray() 判断一个对象是不是数组，是返回true，不是返回false
- concat() 连接多个数组拼接成一个数组，返回新数组。
- toString() 将数组转变为字符串格式。
- split() 将字符串转变为数组。
- join() 将数组转变为字符串，但是join可以设置元素之间的间隔。
- splice(i，n) 删除从i开始之后的元素，删n个，返回删除的元素。
- slice(0，3) 返回从小标0开始的3个元素组成的新数组，但是原数组不变。
ES6语法
1、let和const 不存在变量提升，定义之后才能使用变量，只在局部起作用，不可在申明。
const：
顶一顶常量不可被改变
如果使用const声明的是对象的话，可以修改对象里面的值
2、模板字符串：用一对反引号``标识模板字符串可以嵌入变量，js表达式或者函数，变量，js表达式或函数需要写在${}中。
3、解构赋值，一一对应。
4、箭头函数：匿名函数，箭头函数内部的this和箭头外部的this保持一致。
变体1：如果箭头函数，左侧的形参列表中，只有一个参数，则，左侧小括号可以省略；
变体2：如果右侧函数体中，只有一行代码，则，右侧的{ }可以省略；
变体3：如果箭头函数左侧 只有一个 形参，而且右侧只有一行代码，则 两边的()和{}都可以省略
5、展开运算符 (…)
promise好难啊！
扫一扫
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
