【面试题】整理8/15

vue虚拟dom

虚拟DOM是通过一个JavaScript对象来描述真实DOM。

虚拟DOM**并不是说比原生DOM API的操作快，而是不管数据怎么变化，都可以以最小的代价来进行DOM的更新 **。

vue双向数据绑定

https://www.cnblogs.com/sweeeper/p/10829887.html

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过**Object.defineProperty（）**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

vue生命周期

Vue 实例从创建到销毁的过程,就是生命周期。

对vuex的理解

1.vuex是什么？

vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。

2.vuex的核心概念；

• vuex的属性；
  • state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。
  • getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  • mutation：更改 state的唯一方法。
  • action：包含任意异步操作，通过提交 mutation 间接更变状态。
  • module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

3.为什么要用vuex？

把组件的共享状态抽取出来，以一个全局单例模式管理。增加代码可读性和可维护性。

渲染过程

构建DOM树 -> 构建CSSOM树 -> DOM树和CSSOM树组合成Render树 -> 生成布局 -> 绘制

js事件循环

• 执行同步代码，这属于宏任务
• 当执行栈为空，查询是否有微任务需要执行
• 执行所有微任务
• 必要的话渲染 UI
• 然后开始下一轮 Event loop，执行宏任务中的异步代码

js闭包

闭包是指有权访问另一个函数作用域中变量的函数

优点：可以避免全局变量的污染

缺点：闭包会常驻内存，增大内存使用量，使用不当很容易造成内存泄露。

js垃圾回收机制

找出不再使用的变量，释放其内存。按照固定时间周期性执行。

标记清除：先所有都加上标记，再把环境中引用到的变量去除标记。剩下的就是没用的了。

引用计数：跟踪记录每个值被引用的次数。清除引用次数为0的变量。会有循环引用问题。

什么叫跨域，有什么解决方式

当一个资源从与该资源本身所在服务器中不同域名、协议、端口请求一个资源时，出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求，XMLHttpRequest和Fetch API。引入这个机制主要是用来防止CSRF攻击的（利用用户的登录态发起恶意请求）。

解决方式：

1. 设置document.domain解决无法读取非同源网页的 Cookie问题

2. 跨文档通信 API：postMessage()

3. JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

   核心思想：网页通过添加一个

cookie和localstorage

• cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）

• cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递

  sessionStorage和localStorage`不会自动把数据发给服务器，仅在本地保存

• 存储大小：

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 有效时间：

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

jwt

JSON Web Token（简称 JWT）是目前最流行的跨域认证解决方案。是一种认证授权机制。

http 1.0 2.0

http2.0是对http1.0的改进，相较于http1.0更快更高效

1 http2.0实现了多路复用，用一个TCP进行连接共享，一个请求对应一个id，这样就可以发送多个请求，接收方通过id来响应不同的请求，解决了http1.0队首阻塞和连接过多的问题。因为http2.0在同一域名不论访问多少文件都只有一个连接，所以对服务器而言，提升的并发量是很大的。

2 http2.0引入了二进制数据帧和流的概念，数据拆分成数据帧传输，并进行顺序标识，接收方收到数据后按序组合即可获取正确数据。这样就可以并行传输了，解决了http1.0只能串行传输的问题。

3 http2.0压缩头部，使用序号对头部编码，在两端备份索引表，通过对编码进行比较来判断是否需要传输，减少了需要传输的大小。解决了http1.0中头部反复传输资源浪费的问题

4 http2.0中，服务器可以在客户端某个请求后，主动推送一些客户端一定需要的资源 。这样也能减少请求的数目。

当然http2.0也不是尽善尽美的，比如说在出现丢包的情况时，需要重新传输，后面的数据也就被阻塞了，但是http1.0因为有多个连接，所以不会影响其他连接的传输。这样的话http2.0的性能反倒不如http1.0了。

websocket

为了克服 HTTP“请求 - 应答”模式的缺点，是一个真正**“全双工”的通信协议**，与 TCP 一样，客户端和服务器都可以随时向对方发送数据，“实时通信”的效率也就提高了。

首屏时间（图片懒加载、预加载

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。

懒加载：将不关键的资源延后加载

预加载：将一些不影响首屏但重要的文件延后加载

XSS，CSRF

• XSS：跨站脚本攻击，攻击者想尽一切办法将可以执行的代码注入到网页中

防范：对输入脚本进行过滤转义；CSP 本质上就是建立白名单，告诉浏览器哪些外部资源可以加载和执行。

• CSRF：跨站请求伪造，挟制用户在当前已登录的Web应用程序上执行非本意的操作。

防范：用户操作验证（验证码），额外验证机制（token使用）等

前端有哪些请求

get获取数据;post提交数据;patch/put更新数据;delete删除数据

GET和POST区别

• GET请求一般没有请求体，POST请求有
• GET请求的业务数据放在地址中，安全性较差
• GET请求传递的业务数据量是有限的，POST是无限的（除非服务器限制）
• GET请求利于分享页面结果，POST不行

option请求在什么情况下会用到

cors跨域；通过该请求来知道服务端是否允许跨域请求。
4，get与post请求的区别
5，XSS攻击(这个说不了解)
6，CSS有哪几种选择器
7，怎么实现垂直居中，包含的div需要其他样式吗
8，<input type=“checkbox">内容，选中的时候把span的内容变成红色，这个回答的不好
9，js的基本数据类型有哪些
10，说出数组的五种方法
11，call和apply的区别
12，代码题，实现一个方法，返回一个随机的十六进制的颜色，用数组写的随机，然后面试官提了一种方法，按照他的写正则没写出来
13，反问，公司项目用到的什么技术栈，什么时候出面试结果这样。
对了还有个题是问有没有做过图片轮播，没有做过，然后说一下思路。
补充:
promise的理解，有哪几种状态
ajax请求的过程

二面

1自我介绍
2vue和react技术上的区别(这个是我自己挖的坑，自我介绍提了react
3vue数据双向绑定的实现
4js实现继承有几种方式
5事件循环机制，宏任务微任务的区别
6this的指向问题
7异步promise.all为什么可以返回很多网络请求最终状态
8在美团实习做了什么
9实习和自己做项目遇到什么困难，怎么解决的
10代码1链表倒数第k个，用递归怎么写
11代码2查找子串
12说一下自己的优势
13职业规划？
12反问:技术栈的问题