2021前端最新面试题之价值30k的面试题

一、Vue响应式原理

首先回答对响应式的个理解，提出核心点是通过Object.defineProperty， Vue 在初始化数据时，会传入一个data对象，内部会默认的对data对象进行遍历，使用 Object.defineProperty 重新定义所有属性，当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖进行更新操作。

二、proxy数据代理是什么

可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。

ES6 原生提供 Proxy 构造函数，MDN上的解释为：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）vue3的数据双向绑定基于此，修复了vue2的问题如：this.object.name=5 数据更新后页面不更新问题，此时要调用$set或者其他触发方式。

三、计算属性和watch的区别

computed

一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用的属性没有改变，则调用上一次缓存值)

watch

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）==当数据发生变化时，执行异步操作或较大开销操作的情况。

watch没有缓存直接执行

四、VueX的应用场景

多个视图依赖于同一状态

来自不同视图的行为需要改变同一个状态

多个组件嵌套层级较多，用$emit传递过于繁琐

state：存放公共数据的地方
getter：获取公共数据的地方
mutations：唯一修改state的方法，修改过程是同步的
action：异步处理，通过分发操作触发mutation 提交
module：将store模块分割，减少代码臃肿

五、v-for为啥要加Key

key的作用主要是为了高效的更新虚拟DOM！！！

当v-for进行数据渲染列表时，如果数据量庞大，我们对列表进行增删改时就会重新渲染列表，这样会影响性能！

如果我们加上key那么列表修改是就会根据之前的key值判断是否更新数据，如果需要则更新数据，如果不需要就复用之前的数据

六、虚拟DOM和真实的DOM的区别

1、虚拟DOM不会进行排版与重绘操作

2、虚拟DOM就是把真实DOM转换为Javascript代码

3、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

4、虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

• 4.1 步骤一：用JS对象模拟DOM树
• 4.2 步骤二：比较两棵虚拟DOM树的差异
• 4.3 步骤三：把差异应用到真正的DOM树上

七、基本数据类型和引用数据类型的区别

1. 基本数据类型的存储

以 栈 的形式存储, 保存与赋值指向数据本身, 用type of 来判断类型,存储空间固定.

2. 引用类型 Object

以 堆 的形式存储, 它是存放在堆中的对象，其变量是存放在栈中的一个指针（即堆内存的引用地址），其指针指向堆内存, 用instance of 来判断类型 , 存储空间不固定

八、深拷贝与浅拷贝

浅拷贝：

Object.assign()

var obj1 = {a: 1, b: 2} var obj2 = Object.assign({}, obj1)

解构赋值

var obj1 = {a: 1, b: 2} var obj2 = {…obj1}

浅拷贝是引用了对象的值时其实是引用了其地址，并非堆对象的值，当改变值时，其对象的值也会发生改变

深拷贝：

利用json.stringify

深拷贝则是在堆内存中开辟了新的地址，用来存放拷贝的对象

**九、**基本数据类型赋值和引用数据类型赋值的区别

1、基本数据类型保存与赋值指向数据本身

2、引用类型是存放在堆中的对象，其变量是存放在栈中的指针（即堆内的引用地址），其指针指向堆内存

十、为什么是js是单线程的

JavaScript作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

如果JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

十一、小程序的生命周期

主要以 onload，onshow，的区别和使用做考点，这里不详细说明。

十二、jsonp的实现原理

jsonp本质就是我们的函数的定义和函数的调用。

script本身属于一个一次性标签，所以需要动态去创建script

请求一次就需要创建一次script 通过src动态引入我们的函数调用

函数调用的参数，将数据传递过来，当然如果说我们前端在使用的时候，我们只需要去定义函数，通过函数中的参数就可以将数据获取过来

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务器端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

十三、本地存储 localStorage sessionStorage cookie session

localStorage/sessionStorage H5中新增加的API，基于这个API可以把一些数据缓存到客户端本地

特性	cookie	session	localStorage	sessionStorage
数据声明周期	一般由服务器成成，可以设置过期时间	一般由服务器成成，可以设置过期时间	除非被清理,否则一直存在	页面关闭就清理
数据储存大小	4K	根据服务器大小决定	5M	5M
与服务端通信	每次都会携带在header中，服务器检查cookie，辨认用户状态	请求时携带在header中	不参与	不参与

存放位置	当前浏览器的cookie中	存放在服务端	当前浏览器本地存储	当前浏览器本地存储
是否安全	不安全	安全	不安全	不安全
实际用途	记录登录时间，购物车收藏	存储账号密码设置key	用来统计页面访问次数	记录当前进入用户的隐私数据，在关闭浏览器时删除

十四、token 和session 分别是什么有什么区别

什么是Session机制？

Session是存储在服务器端的，当浏览器第一次请求Web服务器，服务器会产生一个Session存放在服务器里（可持久化到数据库中），然后通过响应头的方式将SessionID返回给浏览器写入到Cookie中，浏览器下次请求就会将SessiondID以Cookie形式传递给服务器端，服务器端获取SessionID后再去寻找对应的Session。如果找到了则代表用户不是第一次访问，也就记住了用户。

但需要注意的是，若服务器做了负载均衡，用户的下一次请求可能会被定向到其它服务器节点，若那台节点上没有用户的Session信息，就会导致会话验证失败。所以Session默认机制下是不适合分布式部署的。

Token的出现是为了解决Session的弊端

Token我们一般称为令牌，一般通过MD5、SHA算法将密钥、公钥、时间戳等元素加密产生的加密字符串。

浏览器访问Web服务器后认证成功后生成Token并返回给客户端，客户端浏览器后续的请求都会把这个Token带到服务器端去验证，以此判定请求是否合法。

Session与Token的异同

Session和Token机制原理上差不多，都是用户身份验证的一种识别手段，它们都有过期时间的限制，但两者又有一些不同的地方。

1、Session是存放在服务器端的，可以保存在：内存、数据库、NoSQL中。它采用空间换时间的策略来进行身份识别，若Session没有持久化落地存储，一旦服务器重启，Session数据会丢失。

2、Token是放在客户端存储的，采用了时间换空间策略，它也是无状态的，所以在分布式环境中应用广泛。

3.SSESION：银行排号

2、TOKEN ：我发给你一张加密的身份证，以后你只要出示这张卡片，我就知道你一定是自己人。

十五、清除浮动8种方法

1、父级div定义 height

2、结尾处加空div标签 设置CSS样式为 clear:both

3、父级div定义 伪类:after 和 zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}

4、父级div定义 overflow:hidden

5、父级div定义 overflow:auto

6、 父级div 也一起浮动

7、父级div 设置dispaly：table

8，结尾处加br标签 设置CSS样式为 clear:both

十六、浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
正常是五大浏览器及其内核，国产大多双内核

十七、居中盒子的8种方法

浮动，定位，弹性盒模型等

十八、BFC是什么？能解决什么问题？

BFC是的子元素布局是不受外界的影响的

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

1.避免外边距折叠

2.避免文字环绕

3.浮动元素不会乱跑。（包含浮动元素）

十九、Ajax状态码

0: (未初始化)还没有调用send()方法。

1: (载入)已经调用send()方法，正在派发请求。

2: (载入完成)send()已经执行完成，已经接收到全部的响应内容。

3: (交互)正在解析响应内容。

4: (完成)响应内容已经解析完成，用户可以调用。

二十、let，const，var

let

let有块级作用域{}，外界无权修改 不能声明同名变量 let没有声明提前 定义值可以修改

const

const有块级作用域{}，为常量，一单赋值，无法修改 const声明对象无法修改键名，但可以修改值 const赋值不能为空 不能声明同名变量 const没有声明提前

var

var只在函数内部function有块级作用域 有声明提前 可以修改值 能够重复定于

二一、es5和es6中的作用域分别是什么？

块级作用域

只要是有花括号的就是块级作用域

function if for {}

二二、函数作用域有哪些

全局作用域

定义的变量或者方法所有的地方都可以使用到，释放的周期，是需要等到浏览器关闭以后才会释放。

局部作用域

只能是当前函数中能够使用到，而且只要调用完成以后就会释放 性能高

闭包

子函数能够使用父函数的局部变量，直到你去释放，释放方法就是return或者是 函数为null

二三、关于this

函数中：window

方法中：当前方法属于谁就是谁

事件：当前发生事件的元素

定时器：window

new：空白构造对象本身

二四、window.onload DOMContentLoaded document.onreadstatechange 执行时机

window.onload

页面中所有的资源加载完成，图片，音频，视频

DOMContentLoaded

在页面文档加载解析完毕之后马上执行。而不会等待图片文件和子框架页面的加载

onreadstatechange 监听页面状态

DOMContentLoaded>onloadstatechange>window.onload

二五、defer和async script中

defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下（也就是非正常内联script脚本的情况下），控制脚本的下载和执行。

script

因为script是同步的所以再HTML加载时会下载和执行script文件 这样会阻塞HTML文档解析

defer

defer会在HTML元素加载时进行下载，但会在HTML元素加载完之后，DOMContentLoaded 事件触发之前进行执行script脚本，

async

async会在HTML元素加载时进行下载，单会在HTML元素未加载完成时就进行解析script文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM0WCARJ-1618302980224)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\da5cd5fd5fdc42b691def691d8265a8c\defer和async.jpg)]

蓝色线代表网络读取（下载JS文件），红色线代表执行时间（执行JS文件），这俩都是针对脚本的；绿色线代表 HTML 解析。

defer要注意

1、只适合内联脚本（也就是script没有scr属性）

2、如果声明了多个defer脚本那么就会按顺序下载和执行

3、defer会在DOMContentLoaded和onLoad事件之前执行

async要注意

1、只适合内联脚本（也就是script没有scr属性）

2、如果声明了多个async也是异步下载与执行的没有先后顺序

3、anync在onLoad前执行，但不不能保证与DOMContentLoaded执行的先后顺序

二六、宏任务和微任务 event loop

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

二七、堆和栈

1. 基本数据类型的存储

以 栈 的形式存储, 保存与赋值指向数据本身, 用type of 来判断类型,存储空间固定.

2. 引用类型 Object

以 堆 的形式存储, 它是存放在堆中的对象，其变量是存放在栈中的一个指针（即堆内存的引用地址），其指针指向堆内存, 用instance of 来判断类型 , 存储空间不固定

二八、状态码

200 ok

304缓存的文档还可以继续使用。重定向

403 服务器已经理解请求，但是拒绝执行它

404 请求页面不存在

414请求的URI 长度超过了服务器能够解释的长度

500 服务器内部错误

502 服务器挂了

二九、Ajax实现过程

  var aDiv = document.querySelector('div') var xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject()
    }
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        aDiv.innerHTML = xhr.responseText
      }
    }
    xhr.open('get', './app.json') 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send()

三十、写出常用的数组变异方法(至少7个)

pop()
shift()
push()
unshift()
sort()
reverse()
splice()

三一、同步和异步的与原理

同步：一个一个执行 例：过独木桥、排队买东西

异步：同时执行多个 例：电脑 一边听歌一边敲代码，网购

三二、get请求和post请求

get：

1、通过地址栏传递、

2、传输量小 32k

3、不安全

4、分享和收藏 有缓存、

post请求：

1、传输量大

2、相对安全

3、body传递send

三三、跨域的解决办法

1、 通过jsonp跨域

2、 跨域资源共享（CORS）

3、 nodejs中间件代理跨域

4、 ajax设置datatype：jsonp实现代理

5、使用vue-cli中在vue.config.js中配置proxy（代理）

三四.简述MVVM和MVC

MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：

Model（模型）表示应用程序核心（如数据库）。

View（视图）显示效果（HTML页面）。

Controller（控制器）处理输入（业务逻辑）。

MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。

通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。

通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

而MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

- Model(模型) 处理业务逻辑的操作

- View(视图) 用于渲染数据的页面

- VModel (view-model简称vm)负责视图和数据的双向数据绑定

三五.Vue中双向数据绑定是如何实现的

实现原理大致是，通过Object.defineProperty()方法来劫持Vue数据的属性，一旦监听到数据变化，则更新数据关联的虚拟DOM树，当然在模版编译的时候，为指令v-model绑定input事件，当输入的内容发生改变时，同步更新data中绑定的数据

三六.v-cloak有什么作用

防止页面加载时出现闪烁问题！

三七.请举例说明绑定事件传参的方法

如果事件直接绑定函数名称，没有传参,那么默认会传递事件对象event作为事件函数的第一个参数

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

三八.单页面应用和多页面应用区别及优缺点

单页面简称(SPA),原理:利用js感知到url的变化,可以通过js动态的将当前的页面内容清除掉,接着将下一个页面的内容挂载到当前的页面上,页面每次切换跳转时,并不需要做html请求,这样就节省了很多http发送延迟,切换速度更快.

优点:加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小

前后端分离,视觉效果好

缺点:页面初次加载比较慢,页面复杂提高很多

多页面:一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面

优点:SEO效果好

缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源

三九、强缓存和协商缓存

强缓存

respone header 的cache-control，常见的设置是max-age public private no-cache no-store等

一般设置：cahe-control:max-age=31536000,public,immutable

max-age表示缓存的时间是31536000秒（1年），public表示可以被浏览器和代理服务器缓存，当用户刷新页面时不管过没过期像服务器再次发送请求，这是相当于又走了协商缓存，设置immutable，就算用户刷新页面也不会进行请求

返回200

协商缓存

设置response header中的：

etag: ‘5c20abbd-e2e8’ last-modified: Mon, 24 Dec 2018 09:49:49 GMT

etag是个hash值当用户每次请求时会携带，如果发生变化则缓存新的数据

返回304

总结：像服务器发送请求缓存的过程就是协商缓存

四十、长链接，短连接，长接口，短接口

短连接

连接->传输数据->关闭连接

HTTP是无状态的，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。

也可以这样说：短连接是指SOCKET连接后发送后接收完数据后马上断开连接。

长连接

连接->传输数据->保持连接 -> 传输数据-> 。。。 ->关闭连接。

长连接指建立SOCKET连接后不管是否使用都保持连接，但安全性较差。

四十一、improt引入css和link引入css的区别

加载顺序

link引入的css在加载页面时同时加载，而@import中的css要在页面加载完毕后加载

从属关系

link是HTML提供的标签

@import是css的语法规则，只能加载在style标签内和css文件中

兼容性

@import是css2.1时提出的，只能用于IE5+，而link不受兼容影响

DOM可控性

link支持js控制DOM改变样式，而@import不支持

四十二、防抖与节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）

**所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

四十三、回流和重绘

回流必将引起重绘，而重绘不一定会引起回流。

重绘

比如：只有颜色改变的时候就只会发生重绘而不会引起回流

回流

比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

当页面布局和几何属性改变时就需要回流
** 页面dom嵌套十分深的时候，回流和重绘比较耗费时间和性能，所以尽量代码简介，避免无用嵌套 **

四十四、原型链

1、实例化对象的__proto__指向是目前构造函数的prototype

2、构造函数prototype的__proto__指向的是object的prototype

3、object.prototype的__proto__指向null

四十五、ES5的继承，call，apply

一、 原型链继承

缺点：不能传参--不能将构造函数中的参数传到父构造函数中
优点：可以继承父函数原型对象的成员
语法：
	子函数.prototype=new 父函数

**二、**借用构造函数继承

优点：可以传参
	缺点：不能继承父构造函数原型对象的成员
	语法：
		父构造函数.call（this）
 function Person(name,age){
        this.name=name
        this.age=age
    }
    Person.prototype.fn=function(){
        console.log('hhh')
    }
    function Woker(name,age,job){
        // 将Person的this指向转为Woker
        Person.call(this,name,age)
        this.job=job
    }
    let w1=new Woker('小王',18,'搬砖')
    let p1=new Person('小王',18,)
    console.log(w1)
    console.log(p1)

**三、**组合继承（混合继承）

优点：子函数的实例化对象可以继承父函数原型对象的成员，可以传参
  function Person(name,age){
        this.name=name
        this.age=age
    }
    Person.prototype.fn=function(){
        console.log('hhh')
    }
    function Woker(name,age,job){
        //改变this指向 继承Person的属性
        Person.apply(this,arguments)
        this.job=job
    }
    Woker.prototype=Person.prototype
    // 使用原型链继承继承了方法
    let w1 =new Woker('小王',18,'搬砖')
    let p1 =new Person('小王',18)
    console.log(w1,p1)

**四、**拷贝式继承

function Person(name,age){
       this.name=name
       this.age=age
   }
   Person.prototype.fn=function(){
       console.log('hhh')
   }
   function Woker(name,age,job){
       Person.apply(this,arguments)
       this.job=job
   }
   let obj =Person.prototype
   // 遍历Person中的方法
   for(var key in obj){
       //通过for in 添加到Woker的原型中
       Woker.prototype[key]=obj[key]
   }
   let w1=new Woker('小王',18,'搬砖')
   let p1=new Person('小王',18)
   console.log(w1)
   console.log(p1)

五、寄生式继承

function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.fn = function () {
        console.log('hhh')
    }
    function Woker(name, age, job) {
        //改变this指向 继承Person的属性
        Person.apply(this, arguments)
        this.job = job
    }
    Woker.prototype=new Person()
    Woker.prototype.constructor=Woker
    //将woker的构造函数指向回woker
    let w1=new Woker('小王',18,'搬砖')
    let p1=new Person('小王',18)
    console.log(w1)
    console.log(p1)

四十六、ES6新增特性

const 与 let 变量

模板字符串

解构赋值

promise

对象属性和方法的简写

数组新增方法

浅拷贝的assgin方法

Proxy代理

Map和Set

四十七、js分为哪三部分

1、ECMAScript(JavaScript语法 )

2、DOM 页面文档对象模型

3、BOM 浏览器对象模型

4:偶尔有些地方会提到 COM component Object Model

四十八、jq的链式调用

jq的方法都是挂在原型的，那么如果我们每次在内部方法返回this，也就是返回实例对象，那么我们就可以继续调用原型上的方法了，这样的就节省代码量，提高代码的效率，代码看起来更优雅。
在设计模式中称之为 链模式

四十九、什么是事件流，事件流的分类

页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流

就我个人理解就是网页对点击事件的排序顺序就是事件流

1、冒泡型的事件流（任何一款浏览器都支持）

从明确事件源到不明确的事件源依次向上响应。

2、捕获型的事件流（从IE8及以下版本支持）

从不确定事件源到确定事件源依次向下响应。

五十、浏览器前缀

-ms- ie浏览器

-moz- 火狐浏览器

-o- opera浏览器

-webkit- Chrome safari

五十一、keep-alive

//当我们访问别的组件时，其他的组件会被销毁 //我们需要用keep-alive 保证 组件不被销毁会被缓存 语法： //如果想让其中一个组件不被销毁需要在keep-alive中额外添加属性 include=‘name名’ //只有匹配的组件会被缓存 exclude=‘name名’ //匹配的组件不会被缓存

五十二、输入一串url发生了什么事

1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染页面
6. 连接结束

**五十三、**js23种模式

总体来说设计模式分为三大类：

创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

五十四、做过那些前端优化

1、节流、防抖

2、重绘、回流

3、对代码进行压缩，删除不必要的空格

4、图片的懒加载

5、js是阻塞的 合理的使用defer和async

五十五、前端常见攻击方法

A: XSS

恶意攻击者往Web页面里插入Script代码

B: CSRF

(1) 用户在a站前端发起请求

(2) a站后端确认身份，登录成功，cookie中存在用户的身份认证信息

(3) 用户未退出网站a之前，在同一浏览器中打开一个TAB页访问第3方站点b

(4) b站前端带着a站的cookie信息向a站后端发起请求，请求成功

C: SQL注入

在编写代码时，没有对用户输入的数据进行合法性判断，使得程序出现安全隐患。黑客可以把SQL命令插入Web表单提交或输入域名或页面请求的查询字符串，根据返回的结果，来获得他想要的数据。这就是SQL Injection，即SQL注入。

五十六、双飞翼布局

双飞翼布局是把朱列嵌套在一个父级块中利用主列的左、右外边距进行布局调整的

五十七、圣杯布局

圣杯布局是利用父容器的左、右内边距+两个从列相对定位

五十八、怎么设置事件捕获

addEventListener 的第三个参数设置为true 则将事件冒泡转为事件捕获

五十九、http和https的区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

六十、前端工程化有哪些

模块化

模块化只是在文件层面上，对代码或资源的拆分；

组件化

而组件化是在设计层面上，对UI（用户界面）的拆分。

规范化

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期CodeReview
• 视觉图标规范

自动化

自动化测试

持续集成

自动化构建

自动化部署

六十一、git常用指令

git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看本地所有分支
git commit -am "init" 提交并且加注释 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示远程库origin里的资源 
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联 
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用－v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来
---------------------------------------------------------
git remote add origin git@github.com:username/Hello-World.git
git push origin master 将本地项目给提交到服务器中
-----------------------------------------------------------
git pull 本地与服务器端同步
-----------------------------------------------------------------
git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。
git push origin serverfix:awesomebranch
------------------------------------------------------------------
git fetch 相当于是从远程获取最新版本到本地，不会自动merge
git commit -a -m "log_message" (-a是提交所有改动，-m是加入log信息) 本地修改同步至服务器端 ：
git branch branch_0.1 master 从主分支master创建branch_0.1分支
git branch -m branch_0.1 branch_1.0 将branch_0.1重命名为branch_1.0
git checkout branch_1.0/master 切换到branch_1.0/master分支
du -hs

-----------------------------------------------------------
mkdir WebApp
cd WebApp
git init
touch README
git add README
git commit -m '提交提示信息'
git remote add origin git@github.com:daixu/WebApp.git
git push -u origin master

六十二、promise解决了什么问题

• 同步的方式写异步的代码，用来解决回调地狱问题。
• 此外，promise对象提供统一的接口，使得控制异步操作更加容易

六十三、vue中的diff算法

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异

把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

diff整体策略为：深度优先，同层比较

1、比较只会在同层级进行, 不会跨层级比较

2、比较的过程中，循环从两边向中间收拢

新节点有孩子

清空老节点文本

创建孩子并追加

老节点有孩子，删除即可

老节点存在文本，清空

双方都是文本节点，跟新文本

六十四、commit常用类型

feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。

fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。

docs:: 只是更改文档。

style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。

refactor:: 代码重构，既不修复错误也不添加功能。

perf:: 改进性能的代码更改。

test:: 添加确实测试或更正现有的测试。

build:: 影响构建系统或外部依赖关系的更改（示例范围：gulp、broccoli、NPM）。

ci:: 更改持续集成文件和脚本（示例范围：Travis、Circle、BrowserStack、SauceLabs）。

chore:: 其他不修改src或test文件。

revert:: commit 回退。

六十五、什么是高阶函数

一、函数的参数是一个函数

二、函数返回一个函数

可以理解其为工厂模式 生产了一个函数的工厂

六十六、原生APP和混合APP的判断方法

有木有手机最上方的横向滚动条

六十七、NPM更改源 查询源

npm config set registry https://registry.npm.taobao.org

npm config get registry

npm install -g cnpm --registry=https://registry.npm.taobao.org

六十八.自定义过滤器的语法是什么?

filter(‘过滤器名’,function(val){return 返回的值})

六十九、为什么使用继承

1、减少无用的多次重复代码

2、使用户体验更高、加载更快

七十、IIFE是什么？

中文名：自执行函数

(function(形参){ alert(‘哈哈’) })(实参)

作用？

1、隐藏实现

2、不会污染外部（全局）命名空间

3、用它来编写js模块

七十一、js引擎如何管理内存

内存生命周期

1、开辟小块内存，获得试用权限

2、存储数据，进行操作（可以反复操作）

3、释放小内存空间

释放内存***

局部变量：函数执行完自动释放

对象：生成对象后，变量不会消失，需要垃圾回收机制清除！

现在主要使用标记清除的方式，不使用引用计数，引用计数会发生循环调用，从而无法释放内存，
回收内存是 一个名为垃圾回收器的东西在执行，他是一段时间执行一次或者达到触发条件才会执行。

七十二、全局执行上下文是什么？

1. 发生在在执行全局代码前，将window作为全局执行上下文
2. 对全局变量进行预处理

2.1.将var定义的变量赋值给window，并且值为underfined

2.2.将function声明全局函数赋值给window(值为fun)

2.3.将this指向window

1. 开始执行全局代码

七十三、函数执行上下文是什么？

在函数调用之前，创建对应的函数的执行上下文的环境 对局部执行上下文环境进行预处理 函数调用时入栈 调用结束出栈

七十四、执行上下文栈

1.在全局代码之前，js引擎会创建一个栈来存储管理当前所有执行上下文的对象

2.当全局执行上下文(window)确定后，会将其添加到栈中（压栈）

3.当函数执行上下文创建后，将其添加到栈中（压栈）

4.在当前的函数执行完之后，会将其创建的上下文对象移除栈

5.当所有的代码执行完之后，栈中将只剩下window

七十五、vue前端路由实现的原理是什么？

前端路由是基于hash值的变化进行实现的

核心是依靠一个事件，即监听hash值变化的事件

七十六、请简述嵌套路由概念

当我们进行路由的时候显示的组件中的内容还有子级路由的链接以及内容。

七十七、什么是动态路由?

可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中

七十八、简述4种获取的动态路由参数的方式?

通过$route.params来获取路径参数

通过props[‘参数变量名’]来接收参数

将props设置为对象，那么就直接将对象的数据传递给组件进行使用，组件用props[‘参数变量名’]

如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式

七十九、写出命名路由基本语法

<router-link :to="{name:'xxx',params:{id:32}}">链接文字</router-link>
	script:
		news={
			template:""
		}
		var router=new VueRouter({
			routes:[
				{name:"xxx",path:"/news/:id",component:news}
			]
		})

八十、请详细说明vue的导航方式有几种

1. 声明式导航：通过点击链接的方式实现的导航
<router-link to="/user">User1</router-link>
2. 编程式导航：调用js的api方法实现导航，如js代码： 
this.$router.push( { name:'user' } )

八十一、请写出7种编程式导航的实现

 this.$router.push("hash地址");
	this.$router.push("/login");
	this.$router.push({ name:'user' , params: {id:123} });
	this.$router.push({ path:"/login" });
	this.$router.push({ path:"/login",query:{username:"jack"} });
	this.$router.go( n ); //n为数字，参考history.go
	this.$router.go( -1 );

八十二、简述promise静态方法all()和race()的区别

数组中只有有一个promise实例被reject那么最终promise触发catch，只有数组中全部promise实例的resolve才触发then，并且要带上iterable中全部promise

八十三、渐进式框架的理解

渐进式框架，主张问题较少，也就是弱主张，没有那多的硬性要求，例如angular必须使用它的模块机制，依赖注入。。。，react的函数式编程理念，vue就是没有啥主张，可以在原有系统上面，引入vue核心库直接就可以根据自己需要再去逐渐增加功能。（如，组件系统、路由、状态机等）

八十四、请写出你知道的事件修饰符（至少5种）

.stop .prevent .self vue.config.keyCodes .keyup .keydown

八十五、自定义指令有什么用?自定全局指令的语法及如何作用

\- 内置指令不能满足我们特殊的需求 - Vue允许我们自定义指令 Vue.directive('指令名',{        inserted:function(el){                    }    }) Vue.directive('指令名',{        bind:function(el,binding){                    }    })

八十六、简述注册局部自定义指令方法

directives:{ 指令名:{     inserted:function(el){ 	}     } } directives:{ 指令名:{     bind:function(el,binding){ 	}     } }

八十七、过滤器有什么用?

- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。

- 过滤器可以用在两个地方：双花括号插值和v-bind表达式。

- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

八十八、vue生命周期概念及作用

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

生命周期作用：生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

八十九、VueX刷新页面数据丢失怎么解决

1、localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

2、sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

3、cookie:cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

九十、导航守卫中的处于当前活跃状态

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由

九十一、静态路由和动态路由的区别

静态路由是启动应用的时候把所有路由模块都加载进来

动态路由是当你访问到这个页面，才把对应的组件加载

九十二、OSI七层模型

开放式系统互联通信参考模型（英语：Open System Interconnection Reference Model，缩写为 OSI），简称为OSI模型（OSI model），一种概念模型，由国际标准化组织提出，一个试图使各种计算机在世界范围内互连为网络的标准框架。定义于ISO/IEC 7498-1。

1、物理层

在OSI参考模型中，物理层（Physical Layer）是参考模型的最低层。物理层的作用是实现相邻计算机节点之间比特流的透明传送，尽可能屏蔽掉具体传输介质和物理设备的差异。“透明传送比特流”表示经实际电路传送后的比特流没有发生变化，对传送的比特流来说，这个电路好像是看不见的。

2、数据链路层

数据链路层（Data Link Layer）是OSI模型的第二层，负责建立和管理节点间的链路。该层的主要功能是：通过各种控制协议，将有差错的物理信道变为无差错的、能可靠传输数据帧的数据链路。在计算机网络中由于各种干扰的存在，物理链路是不可靠的。因此，这一层的主要功能是在物理层提供的比特流的基础上，通过差错控制、流量控制方法，使有差错的物理线路变为无差错的数据链路，即提供可靠的通过物理介质传输数据的方法。数据链路层的具体工作是接收来自物理层的位流形式的数据，并封装成帧，传送到上一层；同样，也将来自上层的数据帧，拆装为位流形式的数据转发到物理层；并且，还负责处理接收端发回的确认帧的信息，以便提供可靠的数据传输。

3、网络层

网络层（Network Layer）是OSI模型的第三层，它是OSI参考模型中最复杂的一层。它在下两层的基础上向资源子网提供服务。其主要任务是：通过路由选择算法，为报文或分组通过通信子网选择最适当的路径。具体地说，数据链路层的数据在这一层被转换为数据包，然后通过路径选择、分段组合、顺 序、进/出路由等控制，将信息从一个网络设备传送到另一个网络设备。一般地，数据链路层是解决同一网络内节点之间的通信，而网络层主要解决不同子网间的通信。例如在广域网之间通信时，必然会遇到路由（即两节点间可能有多条路径）选择问题。

4、传输层

传输层（Transport Layer）是OSI模型的第4层。因此该层是通信子网和资源子网的接口和桥梁，起到承上启下的作用。该层的主要任务是：向用户提供可靠的端到端的差错和流量控制，保证报文的正确传输。传输层的作用是向高层屏蔽下层数据通信的细节，即向用户透明地传送报文。该层常见的协议：TCP/IP中的TCP协议和UDP协议。传输层提供会话层和网络层之间的传输服务，这种服务从会话层获得数据，并在必要时，对数据进行分割。然后，传输层将数据传递到网络层，并确保数据能正确无误地传送到网络层。因此，传输层负责提供两节点之间数据的可靠传送，当两节点的联系确定之后，传输层则负责监督工作。综上，传输层的主要功能如下：监控服务质量。

5、会话层

会话层（Session Layer）是OSI模型的第5层，是用户应用程序和网络之间的接口，主要任务是：向两个实体的表示层提供建立和使用连接的方法。将不同实体之间的表示层 的连接称为会话。因此会话层的任务就是组织和协调两个会话进程之间的通信，并对数据交换进行管理。 用户可以按照半双工、单工和全双工的方式建立会话。当建立会话时，用户必须提供他们想要连接的远程地址。而这些地址与MAC（介质访问控制子层）地址或网络层的逻辑地址不同，它们是为用户专门设计的，更便于用户记忆。

6、表示层

表示层（Presentation Layer）是OSI模型的第六层，它对来自应用层的命令和数据进行解释，对各种语法赋予相应的含义，并按照一定的格式传送给会话层。其主要功能是“处理用户信息的表示问题，如编码、数据格式转换和加密解密”等。

7、应用层

应用层（Application Layer）是OSI参考模型的最高层，它是计算机用户，以及各种应用程序和网络之间的接口，其功能是直接向用户提供服务，完成用户希望在网络上完成的各种工作。它在其他6层工作的基础上，负责完成网络中应用程序与网络操作系统之间的联系，建立与结束使用者之间的联系，并完成网络用户提出的各种网络服务及 应用所需的监督、管理和服务等各种协议。此外，该层还负责协调各个应用程序间的工作。

九十三、tcp/ip5层模型

一、物理层

物理层（Physical Layer）也称为一层，这一层的处理单位是比特（bit），它的主要功能是完成相邻节点之间比特（bit）的传输。

二、数据链路层

数据链路层（Data Link Layer）也称二层，这一层的处理单位是帧（Frame）。数据链路层的主要功能是：负责对物理层数据添加物理地址信息和必要的控制信息等，形成帧，并在传输路上进行无差错的传送。

数据链路层寻址采用的是物理地址，在常见的以太网中指的是MAC地址。MAC地址是固化在网卡上面的，全球唯一的，用48位二进制数标识。

【重要概念】

硬件物理地址（MAC）地址：MAC地址是固化（烧录）在网卡里的，也叫硬件地址，是由48位(6字节，一个字节=8位)二进制的数字组成。

如：44-4A-53-54-00-00（16进制表示）。48位二进制数转换为十六进制时是每4位转换成一个16十六进制字符的。所以48/4=12个十六进制字符，同时8位二进制数代表一个字节，这样我们看到的MAC地址正好是六段。

也就是说，在网络底层的物理传输过程中，是通过物理地址来识别主机的，它一般也是全球唯一的。

三、网络层

网络层（Network Layer）也称三层，这一层的处理单位是包（Packet），这里的地址称逻辑地址，即IP地址。三层可以建立网络连接和为上层提供服务。

四、传输层

传输层（Transport Layer）也称四层，这一层的处理单位是报文段（Segment，TCP时使用）/用户数据报（User Datagram，UDP时使用）。传输层在源节点和目的节点的两个进程实体之间提供端到端的数据传输。

五、应用层

应用层包括所有的高层协议。应用层不仅直接和应用程序接口而且提供常见的网络应用服务。

应用的概念和协议发展得很快，使用面又很广泛，这给应用功能的标准化带来了复杂性和困难性。比起其它层来说，应用层需要的标准最多，但也是最不成熟的一层。但随着应用层的发展，各种特定应用服务的增多，应用服务的标准化开展了许多研究工作。

九十四、html头部都有哪些组成meta

适配，禁止缩放等，请自行查询一下

九十五、父组件与子组件的生命周期怎么执行顺序

**加载渲染过程**

父beforeCreate-->父created-->父beforeMount-->子beforeCreate-->子created--> 子beforeMount-->子mounted-->父mounted

**子组件更新过程**

父beforeUpdate-->子beforeUpdate-->子update-->父updated

**父组件更新过程**

父beforeUpdate-->父updated

**销毁过程**

父beforeDestroy-->子beforeDestroy-->子destroyed-->父destroyed

九十六、flash和js通过什么类如何交互?

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;
ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

九十七、HTML的Doctype和严格模式与混杂模式的描述

九十八、CSS Sprites

九十九、bom对象中的history

length 返回浏览器历史列表中的URL数量。 

back() 加载 history列表中的前一个URL。 

forward() 加载  history  列表中的下一个URL。 

go()  加载history列表中的某个具体页面。

一零零、阻止默认事件和冒泡

阻止默认事件： 
e.preventDefault() 
e.returnValue = false  (IE) 
阻止冒泡： 
e.stopPropagation() 
e.cancelBubble = true (IE)

一零一、正则表达式

一零二、逗号表达式

在for循环中如果写入两个条件表达式 i<10,j<6 那么只有后者的判断有效

一零三、重构理解

不影响之前功能的情况下 对网站进行优化 并进行拓展

js  css可读性增强 

一零四、MVVM,MVC

MVVM的概念最早是没有的，是从后端借鉴过来的MVC

M数据

V 页面

C业务逻辑

最早的出发点在V页面中然后从C中去拿数据，然后M把数据返回给V

因为所有的逻辑都写在C中所以：

C比较庞大不便于维护和操作

耦合度太高  修改V 会牵动M和C

MVVM 解决MVC问题

M数据

V页面

VM组件  业务逻辑提取到组件

耦合度不高

A、IT公司人员配比

普通小中企业研发团队人员数量情况 20-40人

1、架构师：1名

2、开发经理：2名

3、开发主管：2名（前后端各一名）

4、前端开发：7-10名

5、后端开发：7-10名

7、测试人员：2-4名

8、UI人员：2-3名

9、运维人员 ：1-2名

除此之外还有，5-10名运营人员 客服等，

一、面试问题回答写的过于简单没有具体的实现的步骤。

二、在面试的时候一定要看着面试官，通过面部表情就可以知道是否面试成功，或失败。

三、回答面试题的时候一定要自信，很可定的告诉面试官这个东西是如何实现的。

四、着装问题。

最后祝您顺利得到想要的工作！！！