前端面试题整理

前端面试题

1 前端性能优化

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（3）当需要设置的样式很多时设置className而不是直接操作style。
（4）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（5）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（6）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（7）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

2.vue怎么实现页面的权限控制

利用 vue-router 的 beforeEach 事件，可以在跳转页面前判断用户的权限（利用 cookie 或 token），是否能够进入此页面，如果不能则提示错误或重定向到其他页面

3.vue 路由跳转四种方式

(1) router-link
编程式导航router.push(location)
(2) this.$router.push()(函数里面调用)跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面(3)this.$router.replace()
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
(4) this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

4.一次向类添加多个方法

5.类的属性名，可以采用表达式

6.生成器函数

7.解构赋值

8.vue底层原理

vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

9.Object.defineProperty和Proxy区别

Object.defineProperty
（1）不能监听数组的变化
（2）只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历
Proxy
（1）它在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
（2）可以劫持整个对象，并返回一个新对象
（3）可以直接监听数组的变化
（4）Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has

10.反向代理的作用

（1）保证内网的安全，通常将反向代理作为公网访问地址，Web服务器是内网
（2）负载均衡，通过反向代理服务器来优化网站的负载

11.vuex原理

vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store

12.es6数组去重

13.判断对象为空

(1)使用Object.keys(obj)

(2)将json对象转化成json字符串，在判断该字符串是否为{}

14.闭包理解

全局作用域和局部作用域，闭包是有权访问一个函数内部变量的函数，本质上，闭包是将函数内部和函数外部连接起来的桥梁，闭包能让变量的值始终保持在内存中，不会在调用后被自动清除。

15.Vue项目中实现token验证大致思路

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

16.跨域的几种解决方式

（1）jsonp 跨域
JSONP是JSON with padding的简写。JSONP由两部分组成:回调函数和数据。回调函数是客户端和服务端约定好一个函数名，一般在请求中指定。数据是传入回调函数中的JSON数据。
（2）CORS
CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。跨域资源共享定义了在必须访问跨域资源的时，浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP 头部，让服务器与浏览器进行沟通，主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的的。
（3）document.domain
浏览器的同源策略使得不同域的框架是不能进行JS的交互操作的。比如：有一个页面是http://www.example.com/a.html,在这个页面中还有一个http://example.com/b.html，很显然，a.html与b.html是不同域的，所以我们无法通过在页面中书写js代码来获取iframe中的东西，但是，如果我们把这2个页面的document.domain都设置成相同的域名就可以了，需要注意的是，我们只能把document.domain设置成自身或更高一级的父域，且主域名必须相同。
（4）window.name
window对象有个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。
（5）window.postMessage
window.postMessage（message,targetOrigin）方法，可以用来向其他的window对象发送消息，无论这个window对象是属于同一个源还是不同源
（6）使用HTML5新引进的window.postMessage方法来进行跨域（ie6 7不支持）；

17.同源策略

指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

18.http请求方式

（1）GET 请求指定的页面信息，并返回实体主体。
（2）HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
（3）POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
（4）PUT 从客户端向服务器传送的数据取代指定的文档的内容。
（5）DELETE 请求服务器删除指定的页面。
（6） CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
（7） OPTIONS 允许客户端查看服务器的性能。
（8）TRACE 回显服务器收到的请求，主要用于测试或诊断。
（9） PATCH 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
（10） MOVE 请求服务器将指定的页面移至另一个网络地址。
（11） COPY 请求服务器将指定的页面拷贝至另一个网络地址。
（12）LINK 请求服务器建立链接关系。
（13） UNLINK 断开链接关系。
（14） WRAPPED 允许客户端发送经过封装的请求。
（15） LOCK 允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑。
（16） MKCOL 允许用户创建资源
（17） Extension-mothed 在不改动协议的前提下，可增加另外的方法。

19.MVVM

MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想

ps：我的职业发展
1.从梳理好的知识架构中选择更深一层次的技术进行学习，
框架的学习，了解设计的思路
2.往管理层面发展
3.从界面、交互，还是接口、逻辑，不能够理解产品、理解用户需求，只有理解了产品的思路，我们才知道用我们的技术去输出什么，使我们的工作和学习更加有效率、避免无用功