[网络协议]2021-10-05 前端基础知识复习

一、网络传输结构OSI模型

从下到上依次是物理层，数据链路层，网络层，传输层，会话层，表示层，应用层

1. 物理层：在物理媒体上实现比特流的传输
2. 数据链路层：两个设备之前传输数据，数据封装成帧
3. 网络层：将数据报从源地址发送到目的地址
4. 传输层：主机间传输数据
5. 会话层：建立和管理应用程序的通信
6. 表示层：数据处理
7. 应用层：报文数据

二、TCP和UDP区别

1. TCP是面向连接的，UDP是面向无连接的
2. TCP对系统资源要求的比较多，UDP比较少，因为TCP信息包比较大，且处理麻烦一些
3. UDP的结构比较简单，目标地址，源地址，长度，校验和
4. TCP使用字节流，而UDP使用数据报
5. TCP面向连接比较可靠，UDP无连接无法保证数据传输可靠
6. TCP保证数据顺序

三、HTTP和HTTPS的区别

HTTPS是HTTP+SSL

1. https需要申请ca证书
2. https相较于http更加安全
3. 连接方式不同，http使用80端口，https使用443端口
4. http连接是无状态的，https协议是构建的加密传输，身份认证的网络协议

四、ES6新特性

1. const和let：因为var变量提升带来了很多问题，所以引入块作用域，const和let的作用的提现出来了
2. 模板字符串：方便，代替+和contact连接字符串的复杂操作
3. 解构重赋
4. 对象字面量简写
5. for…of：方便数组遍历
6. 拓展运算符：…
7. 箭头函数：解决this指向问题和方便写代码
8. 函数默认参数
9. super和extends
10. 增加了一些API

五、Promise

经常用来处理异步回调的问题，没有promise之前，如果存在多层回调函数，就会出现难以理解代码执行顺序的问题，不符合代码规范
promise规范：promise有三种状态，pedding，fulfilled，rejected，且状态转换以后不能改变，必须实现then方法

六、事件循环

执行中的线程分为主线程和工作线程，主线程是js的单线程，工作线程可能是浏览器的线程可能是js的线程，如果任务队列中有同步任务，则放入主线程内，异步任务进入任务队列中，主线程执行完以后，进入任务队列中和读取相应的任务，如此循环称为事件循环。
宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)
异步操作都是放在事件循环队列中等待主线程执行

七、vue组件的通信方式

父子间通信，兄弟间通信，跨组件通信

1. props：父组件给子组件发送数据
2. $emit：子组件触发父组件事件
3. ref：父组件使用子组件的时候使用ref命名，可以根据ref获取数据
4. EventBus：全局事件总线，创建一个类，$emit触发兄弟组件事件，$on监听兄弟组件
5. parent，root：$parent父组件实例，$root根组件实例
6. attrs和listeners：v-bind=“$attrs"父传孙，$listeners孙传父v-on=”$listeners"
7. provide和inject：父，孙组件通信
8. Vuex：跨组件通信，复杂关系的组件通信，state数据源，action存放方法通常用来做异步，getter过滤计算，Mutation存放修改state的方法

八、跨域

同源策略：只有域名，端口，协议都相同的才叫同源，否则都算作跨域
解决跨域：

1. jsonp：src不受浏览器跨域限制
2. cors：跨域资源共享
3. 反向代理服务器：前端地址映射到同源的地址下

九、Vue虚拟DOM和原生区别

在查询上：原生dom需要查询整个dom树获取，虚拟dom查询指定指定节点下的数据即可
在增删改时：原生dom浏览器会重新绘制dom树，虚拟dom会用容器存修改

十、浏览器渲染

构建dom树=>构建render树=>布局dom树=>绘制dom树

十一、Vue2和Vue3的区别

双向绑定方式不同，vue2使用Object.defineProperty，vue3使用的是proxy，definePrototy只能监听某个属性，而proxy能监听整个对象