2020前端面试汇总记录

2020前端面试汇总记录

1 浏览器的渲染过程：
浏览器将获取的HTML文档解析成DOM树。
处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

2.vue或者react，周期与渲染更新，他们的区别与数据储存，vue的双向绑定原理，vue的data为什么必须是一个函数

3.mvvm与mvc的理解与区别
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

4.谈一谈虚拟dom，如果提到diff算法，可以再问diff算法

5.dom与bom，很多前端分不清

avacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window

6.原型链

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

每个对象都会在其内部初始化一个属性，就是prototype(原型)。

7. 闭包的概念

8.代码设计（架构）

9.组件化设计方式

10. 模块化开发

11.线程进程**

12.JS是单线程为啥可以异步执行

13.Http协议的理解

14.Vue组件间的通讯方式

15.文件上传的对象用啥，有没有出现啥问题（new fromData）

16.深拷贝 JSON.parse(JSON.stringify（）和浅拷贝 object.assign(target,source)的区别

深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被拷贝的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。

17.Vue 3.0 有没有过了解？
关于Vue 3.0有幸看过尤大的关于3.0版本的RFC Vue Function-based API RFC。大致说了三个点，第一个是关于提出的新API setup()函数，第二个说了对于Typescript的支持，最后说了关于替换Object.defineProperty为 Proxy 的支持。
详细说了下关于Proxy代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题

vue3.0升级内容

• 全部使用ts重写（响应式、vdom、模版编译等）
• 性能提升，代码量少
• 会调整api
• proxy实现响应式
  • 基本使用
  • reflect
    • 和proxy的作用一一对应
    • 规范化、标准化、函数化
    • 代替object工具函数
  • 实现响应式

ES6中常用的方法：

1.promise的理解

2.介绍下 Set、Map的区别？
　　应用场景Set用于数据重组，Map用于数据储存
　　Set：　
　　（1）成员不能重复
　　（2）只有键值没有键名，类似数组
　　（3）可以遍历，方法有add, delete,has
　　Map:
　　（1）本质上是健值对的集合，类似集合
　　（2）可以遍历，可以跟各种数据格式转换
提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说， Object 结构提供了“字符串—值”的对 应， Map 结构提供了“值—值”的对应，是一种更完善的 Hash结构实现。async和promise的区别

async/await是基于promise实现的，他不能用于普通的回调函数
async/await使得异步代码看起来像同步代码
async/await与Promise一样，是非阻塞的。

函数前面多了一个async关键字。await关键字只能用在async定义的函数内。async函数会引式返回一个promise,改promise的resolve值就是函数return的值。
简洁：使用async和await明显节约了不少代码，不需要.then,不需要写匿名函数处理promise的resolve的值，不需要定义多余的data变量，还避免了嵌套代码。
async/await让try/catch 可以同时处理同步和异步错误。try/catch不能处理JSON.parse的错误，因为他在promise中。此时需要.catch，这样的错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂

3.node.js的单线程如何实现高并发

• 1、每个Node.js进程只有一个主线程在执行程序代码，形成一个执行栈（execution context stack)。
• 2、主线程之外，还维护了一个"事件队列"（Event queue）。当用户的网络请求或者其它的异步操作到来时，node都会把它放到Event Queue之中，此时并不会立即执行它，代码也不会被阻塞，继续往下走，直到主线程代码执行完毕。
• 3、主线程代码执行完毕完成后，然后通过Event Loop，也就是事件循环机制，开始到Event Queue的开头取出第一个事件，从线程池中分配一个线程去执行这个事件，接下来继续取出第二个事件，再从线程池中分配一个线程去执行，然后第三个，第四个。主线程不断的检查事件队列中是否有未执行的事件，直到事件队列中所有事件都执行完了，此后每当有新的事件加入到事件队列中，都会通知主线程按顺序取出交EventLoop处理。当有事件执行完毕后，会通知主线程，主线程执行回调，线程归还给线程池。
• 4、主线程不断重复上面的第三步。

算法：

去掉一组整型数组重复的值
let unique = function(arr) {
let hashTable = {};
let data = [];
for(let i=0,l=arr.length;i<l;i++) {
if(!hashTable[arr[i]]) {
hashTable[arr[i]] = true;
data.push(arr[i]);
}
}
return data
}

常见算法排序问题