前端面试题

1. 重排

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。

2. 重绘

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

3. New操作符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一

4. 跨域

当一个请求URL的协议、域名、端口三者之间的任意一个与当前页面URL不同即为跨域。

1. 非同源限制

1. 无法读取非同源页面的Cookie、LocalStorage和IndexdDB
2. 无法接非同源页面的DOM
3. 无法向非同源地址发生AJAX请求

1. 解决跨域

1. JSONP

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

4. . 从输入URL到页面加载完成的过程中都发生了什么？

1. 键盘或触屏输入URL并回车确认
2. URL解析/DNS解析查找域名IP地址
3. 网络连接发起HTTP请求
4. HTTP报文传输过程
5. 服务器接收数据
6. 服务器响应请求/MVC
7. 服务器返回数据
8. 客户端接收数据
9. 浏览器加载/渲染页面
10. 打印绘制输出
    
    5. Call / apply / bind

Call

1. 调用call的对象, 必须是个函数Function。
2. Call的第一个参数, 是一个对象。Function的调用者, 将会指向这个对象。如果不传。则默认为全局对象window。
3. 第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的Function的参数上。但是如果将所有的参数作为数组传入，它们会作为一个整体映射到Function对应的第一个参数上，之后参上都为空。

Apply

1. 它的调用者必须是函数Function，并且只接收两个参数，第一个参数的规则与call一致。
2. 第二个参数，必须是数组或者是类数组，它们会转换成类数组，传入Function中，并且会被映射到Function对应的参数上。这也是call和apply之间，很重要的一个区别。

Bind

Bind方法与apply和call比较类似，也能改变函数体内的this指向，不同的是，bind方法的返回值是函数，并且需要稍后调用，才会指向。而apply和call则是立即调用。

总结

Call和apply的主要作用，是改变对象的执行上下文，并且是立即执行的。它们的参数上的写法略有区别。

Bind也能改变对象的执行上下文，它与call和apply不同的是，返回值是一个函数，并且需要稍后调用一下，才会执行。

6. 解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

7. 原型链简单总结

当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。如果没有找到该属性，则会继续搜索实例的原型。在通过原型链实现继承的情况下，搜索过程就得以沿着原型链继续向上。在找不到属性或方法的情况下，搜索过程总是要一环一环地前行到原型链末端才会停下来。

8. 作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

9. js中同步、异步

js的同步和异步问题通常是指ajax的回调，如果是同步调用，程序在发出ajax调用后就会暂停，直到远程服务器产生回应后才会继续运行。而如果是异步调用，程序发出ajax调用后不会暂停，而是立即执行后面的代码，服务器返回信息后会自动触发回调函数进行处理。相比较而言，异步调用的性能最佳，程序不会出现卡顿的现象，而同步调用则通常用于需要立即获得结果并实时处理的情况。

10. Promise和async await的区别

Promise和async await 都是处理异步的请求的

Promise最大的好处就是防止出现回调地狱

Async/awiat 将异步的网络请求强行转换为同步的网络请求去处理。

Async/await 与 promise 不存在谁代替谁的说法，async/await是寄生于Promise的，是generator的语法糖。

11. 双向绑定的原理

Vue的双向绑定是通过 数据劫持 结合 发布订阅者 模式来实现的

其核心是通过 Object.defineProperty( ) 来劫持各个属性的setter/getter, 在数据发生变化时发布消息给订阅者, 触发相应监听回调；

双向绑定的主要职责就是:

数据变化后更新视图

视图变化后更新数据

它还有两个主要部分组成

监听者( Observer ) : 对所有的数据的属性进行监听

解析器( Compiler ) : 对每个元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定响应的更新函数 

12. 闭包函数

定义：当一个函数的返回值是另一个函数, 而返回的那个函数如果调用了其父函数内部的其他变量，如果返回的这个函数在外部被执行, 就产生了闭包。

形式：使函数外部能够调用函数内部定义的变量。

13. Computed和watch的区别

计算属性computed

1. 支持缓存，只有依赖的数据发生改变，才会重新进行计算
2. 不支持异步，会无法监听数据的变化
3. 如果计算属性的属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值，在computed中的属性都有一个get和set方法，当数据变化时，调用set方法；

侦听属性watch

1. 不支持缓存，数据变，直接会触发响应的操作；
2. 支持异步
3. 监听的函数接收二个参数，第一个是最新的值，第二个是输入之前的值；

14. HTTP中的get post 区别

1. Get请求只能提交少量的参数去服务端， post请求可以提交大量参数
2. get请求的安全性不如post请求；
3. Get请求的参数展示在url中，post

15. Vuex 作用

Vuex是一个专门为 vue.js 应用程序开发的状态管理模式

Vuex 可以帮助我们管理共享状态，也就是管理全局变量

Vuex使用一个store 对象管理应用的状态，一个store包括：state， getter，mutation，action

16. Cookie localStorage sessionStorage 区别

共同点: 都是保存在浏览器端，且同源的

区别:

1. 存储大小限制不同, cookie数据不能超过4K， 同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大的多，可以达到5M或者更大
2. 数据有效期不同，sessignStorage: 仅在当前浏览器窗口关闭之前有效; localStorage: 始终有效， 窗口或浏览器关闭也一直保存，一般用作持久数据；cookie: 只在设置的cookie过期时间之前有效，默认浏览器关闭后失效;

17. nextTick

定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（说明：Vue 实现响应式并不是在数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新）

应用场景:

·  Vue生命周期的created()钩子函数中进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。详情看下述的示例二。

·  ·  当你想在项目中改变DOM元素的数据后基于新的DOM做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后，当你想立即使用js操作新的视图的时候就需要使用它。

·  ·  在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

面试相关

你平常是怎么学习前端的？

一开始学习前端, 主要是靠视频以及一些书籍, 主要是总结很多知识点，但是发现学习过程中理论大于实操，所以自己把知识点总结后就开始找项目实操，这样一步步成长起来，那么在公司也会碰到很多问题值得学习，一般都是自己查找原因或者和同事交流进行解决，然后自己总结文档，方便日后查看和积攒经验。

你有什么想说的吗？

1. 工作的时间
2. 入职的部门现状, 用什么技术栈
3. 公司发展情况
4. 试用期、福利待遇