2020 web前端面试题及答案大全 (6)

新: HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点onpopstate, replaceState

21. 正向代理和反向代理

正向代理:

（1）访问原来无法访问的资源，如google
（2） 可以做缓存，加速访问资源
（3）对客户端访问授权，上网进行认证
（4）代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息

反向代理:

（1）保证内网的安全，可以使用反向代理提供WAF功能，阻止web攻击大型网站，通常将反向代理作为公网访问地址，Web服务器是内网。

（2）负载均衡，通过反向代理服务器来优化网站的负载

22. 关于预检请求

在非简单请求且跨域的情况下，浏览器会自动发起options预检请求。

23. 三次握手四次挥手

开启连接用三次握手, 关闭用四次挥手

24. TCP和UDP协议

TCP（Transmission Control Protocol：传输控制协议；面向连接，可靠传输

UDP（User Datagram Protocol）：用户数据报协议；面向无连接，不可靠传输

25. 进程和线程的区别

进程：是并发执行的程序在执行过程中分配和管理资源的基本单位，是一个动态概念，竞争计算机系统资源的基本单位。

线程：是进程的一个执行单元，是进程内科调度实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。

一个程序至少一个进程，一个进程至少一个线程。

vue相关

1. 生命周期

2 .双向数据绑定v-model。这个最好也是自己实现一下 理解更深

通过v-model
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

// 依赖收集// 简化版var obj = { }var name//第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。Object.defineProperty(obj, "data", { //获取值 get: function () { return name }, //设置值 set: function (val) { name = val console.log(val) }})//赋值调用setobj.data = \'aaa\'//取值调用getconsole.log(obj.data) // 详细版 myVue.prototype._obverse = function (obj) { // obj = {number: 0} var value; for (key in obj) { //遍历obj对象 if (obj.hasOwnProperty(key)) { value = obj[key]; if (typeof value === \'object\') { //如果值是对象，则递归处理 this._obverse(value); } Object.defineProperty(this.$data, key, { //关键 enumerable: true, configurable: true, get: function () { console.log(`获取${value}`); return value; }, set: function (newVal) { console.log(`更新${newVal}`); if (value !== newVal) { value = newVal; } } }) } } }

3.vue父子组件传递参数

父 -->子: 通过props

子 -->父: 通过 $$refs 或 $emit

4.vue传递参数方法

父子组件传参如上, v-bind : v-on @