前端面试题大全持续更新中……

1、nextTick知道嘛，实现原理是什么?

2、检测数据类型的方法

3、vue切换路由不重新渲染_Vue路由切换时页面内容没有重新加载

4、JavaScript开发中的23种设计模式详解

5、浏览器前缀

6、长连接，短链接？

7、TCP就是三次握手四次挥手

8、http与https的区别

9、前端性能优化

10、什么是前端工程化

11、webpack中的loader有哪些

12、关于HTTP的8种请求方式简介

13、向地址栏发送一串地址会发生什么？

14、link与@import的区别

15、javascript的组成

16、强缓存和协商缓存区别

17、Promise

18、new操作符在创建实例的时候经历了那几个阶段

19、form中的input可以设置为readonly和disable,请问2者有什么区别？

20、vue3.0特性

21、vue的单向数据流

22、hash模式和history模式的区别

23、浏览器url地址输入网址发什么了什么

24、HTML5新增特性

25、websocket

26、浏览器渲染流程

27、面向对象和面向过程

28、vue实现数据双向绑定的原理是什么？

29、vue-router中keep-alive的理解

30、vue响应式原理

31、proxy的优缺点

1、nextTick知道嘛，实现原理是什么?

官方文档：它可以在DOM更新完毕之后执行一个回调

实现原理：

1.vue用异步队列的方式来控制DOM更新和nextTick回调先后执行

2.microtask因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕

3.因为浏览器和移动端兼容问题，vue不得不做了microtask（微任务）向macrotask（宏任务）的兼容（降级）方案

2、检测数据类型的方法

1.typeof

能检测基本类型（null除外，他返回object）和函数，对于引用类型只返回object，也可以检测ES6新增的Symbol类型

console.log(typeof 123); //number
console.log(typeof 'abc'); //string
console.log(typeof true); //boolean
console.log(typeof undefined); //undefined
console.log(typeof null); //object
console.log(typeof [1,2,3]); //object
console.log(typeof {a:1,b:2,c:3}); //object
console.log(typeof function(){}); //function
console.log(typeof Symbol()); //symbol

2.instanceof

用来检测一个对象是否为某个类（构造函数）的实例，返回布尔值

语法：object instanceof constructorconsole.log([1,2,3] instanceof Array); //trueconsole.log({a:1,b:2,c:3} instanceof Object) //true// 定义一个类class Cat {constructor(name) {this.name = name;}walk() {console.log('I can walk');}}// 实例化let cat = new Cat('Vue');// 检测console.log(cat instanceof Cat); //true

3.constructor

constructor是对象上的属性，指向构造函数let num = 123;console.log(num.constructor); //ƒ Number() { [native code] }console.log('abc'.constructor); //ƒ String() { [native code] }console.log(true.constructor); //ƒ Boolean() { [native code] }console.log([1,2,3].constructor); //ƒ Array() { [native code] }console.log({a:1,b:2,c:3}.constructor); //ƒ Object() { [native code] }console.log(function(){}.constructor); //ƒ Function() { [native code] }console.log(new Date().constructor); //ƒ Date() { [native code] }console.log(/^[a-z]{2,5}$/.constructor); //ƒ RegExp() { [native code] }console.log(Symbol().constructor); //ƒ Symbol() { [native code] }

3、vue切换路由不重新渲染_Vue路由切换时页面内容没有重新加载

问题原因：

在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了：keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了

解决办法：

使用vue组件切换过程钩子actiated(keep-alive组件激活时调用)，而不是挂载钩子mounted

4、JavaScript开发中的23种设计模式详解

为什么要学习设计模式：

设计模式来源众多专家的经验和智慧，他们时从许多优秀的软件系统种总结出的成功的能够实现可维护性复用的设计方案，使用这些方案将可以让我们避免做一些重复性的工作

设计模式提供了一套通用的设计词汇和一种通用的形式来方便开发人员之间沟通和交流，使得设计方案更加通俗易懂，

大部分设计模式都兼顾了系统的可复用性和可扩展性，这时的我们可以更好的重用一些已有的设计方案，功能模块甚至一个完整的软件系统，避免我们经常做一些重复的设计，编写一些重复的代码

合理使用设计模式并对设计模式的使用情况进行文档化，将有助于别人更快的理解系统

学习设计模式将有助于初学者更加深入地理解面向对象思想

装饰器模式适配器模式观察者模式迭代子模式单例模式原型模式工厂方法模式

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

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

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

5、浏览器前缀

有些时候，某些CSS属性还是最新版的预览版，并未发布成最终的正式版，而大部分浏览器已经为这些属性提供了支持，但这些属性时小部分浏览器专有的，有些时候，有些浏览器为了扩展某方面的功能，它们会选择新增的一些CSS属性，这些自行扩展的CSS属性也时浏览器专属的。为了让这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀

前缀	组织	实例	说明
-ms-	Microsoft	-ms-interpolation-mode	IE浏览器专属的CSS属性需添加-ms-前缀
-moz-	Mozilla	-moz-read-only	所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o-	Opera	-o-text-overflow	Opera浏览器专属的CSS属性需添加-o-前缀
-webkit-	Webkit	-wevkit-box-shadow	所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

6、长连接，短链接？

长连接，指的是一个连接上可以连续发送多个数据包，在连接保持期间，如果没有数据包发送，需要双方发链路检测包

短链接，是指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。

长连接多用于操作频繁，点对点的通讯，而且连接数不能太多情况。每个TCP连接都需要三步握手，这需要时间，如果每个操作都是短链接，在操作的话那么处理速度会降低很多，所以每个操作完后都不断开，下次处理时直接发送数据包就ok了,不用建立TCP连接。例如：数据库的连接用长连接，如果用短链接频繁的通信会造成socke错误，而且频繁的socket创建也是对资源的浪费。

而像WEB网站的http服务一般都用短链接，因为长连接对于服务端来说会耗费一定的资源，而像WEB网站这么频繁的成千上万甚至上亿客户端的连接用短连接会更省一些资源，如果用长连接，而且同时有成千上万的用户，如果每个用户都占用一个连接的话，那可想而知把，所以并发量大，但每个用户无需频繁操作情况下需用短链好

总之，长连接和短连接的选择要视情况而定。

7、TCP就是三次握手四次挥手

三次握手：

第一次握手：建立连接时，客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）

即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK（ack=k+1）

此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手

完成三次握手，客户端与服务器开始传送数据

四次挥手：

第一次挥手：客户端A发送一个FIN，用来关闭客户A到服务器B的数据传送

第二次挥手：服务器B收到这个FIN，它发回一个ACK，确认序号为收到的序号+1.和SYN一样。一个FIN将占用一个序号

第三次挥手：服务器B关闭与客户端A的连接，发送一个FIN给客户端A

第四次挥手：客户端A发回ACK报文确认，并将确认序号设置为序号加1

8、http与https的区别

1.https协议需要到CA（Certificate Authority,证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用

2.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议

3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80 ，后者是443

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

9、前端性能优化

内容方面：

1、减少http请求（Make Fewer HTTP Requests）

2、减少DOM元素数量（Reduce the Number of DOM Elements）

3、使得Ajax可缓存（Make Ajax Cacheable）

针对CSS：

1、把css放到代码页上端（Put Stylesheets at the Top）

2、从页面中剥离JavaScript与css(Make JavaScript and CSS External)

3、精简JavaScript与css(Minify JavaScript and CSS)

4、避免css表达式（Avoid CSS Expressions）

针对JavaScript：

1、脚本放到HTML代码页底部(Put Script at the Bottom)

2、从页面中剥离JavaScript与CSS（Make javascript and CSS External ）

3、精简JavaScript与CSS（Minify javaScript and CSS）

4、移除重复脚本（Remove Duplicate Script）

面向图片（Image）:

1、优化图片

2、不要在HTML中使用缩放图片

3、使用恰当的图片格式

4、使用CSS Sprite技巧对图片优化

10、什么是前端工程化

模块化

模块化就是将一个大文件拆分成依赖的小文件，在进行统一的拼装和加载

组件化

首先，组件化≠模块化。好对人对这个两个概念有些混淆。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。其实，组件化更重要的是一种分治思想

规范化

模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

自动化

任何简单机械的重复劳动都应该让机器去完成。前端工程化的很多脏活累活都应该交给自动化工具来完成。

11、webpack中的loader有哪些

1、loaders之预处理

css-loader处理css中路径引用等问题
style-loader动态把样式写入css
ass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
命令行: npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

module: {loaders: [{test: /\.css$/, loader: "style!css?sourceMap!postcss"},{test: /\.less$/, loader: "style!css!less|postcss"},{test: /\.scss$/, loader: "style!css!sass|postcss"}]
}

2、loaders之javascript 处理

babel-loader
jsx-loader

命令行：npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

例如：

1、新建一个名字为.babelrc的文件

{"presets": ["es2015","react"],"plugins":["antd"]
}

2、新建一个名字为webpack.config.js文件

module.exports ={entry: './entry.js',output: { path: __dirname,filename: 'bundle.js'},module: {
loaders: [{test: /\.js$/, loader: "babel", exclude: /node_modules/},{test: /\.jsx$/, loader: "jsx-loader"}{test: /.css$/, loader: 'style!css'} ]}
};

3、loaders之图片处理

url-loader

命令行：npm install --save-dev url-loader

module: {loaders: [{test: /\.(jpg|png)$/, loader: "url?limit=8192"},]
}

4、loaders之文件处理

file-loader

命令行：npm install --save-dev file-loader

module: {loaders: [{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'},]
}

5、loaders之json处理

json-loader

命令行：npm install --save-dev json-loader

module: {loaders: [{test: /\.json$/,loader: 'json'},]
}

6、loaders之html处理

raw-loader

命令行：npm install --save-dev raw-loader

module: {loaders: [{ test: /\.html$/,loader: 'raw'},]
}

12、关于HTTP的8种请求方式简介

get：向特定资源发送请求，查询数据
post:向指定的资源，提交数据进行处理请求，有可能创建或修改已有数据
put:向指定资源位置上传最新的内容
delete：请求服务器删除Request-URI所标识的资源
head：和Get请求相一致，只不过不会返回响应体，这一方法可以再不必传输整个响应内容的情况下，就可以获取包含再响应小消息头中的元信息.（用于获取报头）
options：返回服务器对特定资源所支持的http的请求，可以用来向Web服务器发送请求来测试服务器的功能性
connect:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
trace:回显服务器收到的请求，主要用于测试或诊断

13、向地址栏发送一串地址会发生什么？

分为4个步骤

1、当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址。

2、浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接，该握手包括一个同步报文，一个同步应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递，该握手首先由客户端尝试建立起通信，而后服务器应答并接收客户端的请求，最后由客户端发出该请求已经被接受的报文。

3、一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求，远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应

4、此时，Web服务器提供资源服务，客户端开始下载资源。

14、link与@import的区别

1、来源的差别：

link属于XHTML标签，而@import属于CSS

2、加载顺序的差别：

在页面加载的时候，link会同时被加载，而@import在页面加载完成后才会加载引用的css

3、兼容性的差别：

@import属于css2.1版本，只有在IE5以上才可以被识别，而link是HTML标签，不存在卢浏览器兼容性问题

4、使用DOM控制样式时的差别：

JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

15、javascript的组成

ECMAScript（核心）：描述了js的语法和基本对象

文档对象模型（DOM）：处理网页内容的方法和接口

浏览器对象模型（BOM）：与浏览器交互的方法和接口

16、强缓存和协商缓存区别

1、基本原理：

1、浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。

2、如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified和etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源

3、如果前面两者都没有命中，直接从服务器加载资源

2、相同点

如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据

3、不同点

强缓存不发请求到服务器，协商缓存会发请求到服务器

4、强缓存

强缓存通过Expires和Cache-Control两种响应头实现

5、协商缓存

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串，协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的

17、Promise

解决异步编程的一种方案，替代多层嵌套的回调，Promise是一个构造函数，用于封装异步操作，并可以获得成功或失败的结果

每个Promise对象有3种状态，pending进行中，fulfilled成功，rejected失败。

状态只能从pending=>fulfilled或者是从pending=>rejected，状态不可逆。

promise对象一旦创建立即执行

promise函数有一个参数，参数是一个函数，这个函数有2个参数，resolve是成功的回调函数，reject是失败的回调函数

promise.prototype上有catch和then方法

then方法有2个参数，都是函数，第二个参数可以不传，

then方法内部返回一个新的promise对象，因此promise对象支持链式调用

catch方法是接收一个函数作为参数，是失败的回调函数

const p=new Promise((resolve,reject)=>{let data='用户数据'//resolve(data)  //调用resolve，状态由pending到fulfilled成功let err='调用失败'reject(err)
})
//成功可以调用then方法
p.then((value)=>{//成功的形参是value//执行resolve会进入这里console.log(value)},(reason)=>{//失败的形参是reason//执行reject会进入这里console.error(reason)
})

针对于Expected the Promise rejection reason to be an Error prefer-promise-reject-errors报错处理

reject函数要传入错误对象

reject（new Error('no lyric')）

18、new操作符在创建实例的时候经历了那几个阶段

共经历了4个阶段

1、创建一个空对象

2、设置原型链

3、让实例化对象种的this指向对象，并指向函数体

4、判断实例化对象的返回值类型

19、form中的input可以设置为readonly和disable,请问2者有什么区别？

readonly不可编辑，但可以选择和复制，值可以传递到后台

disabled不能编辑，不能复制，不能选择，值不可以传递到后台

20、vue3.0特性

更快

更小

更易于维护

更多的原生支持

更易于开发使用

21、vue的单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop更新会向下流动到子组件中，但是反过来则不行。这样会防止子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发送更新时，子组件中所有的prop都将会刷新为最新的值，这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台中发出警告。

这里有两种常见的视图改变一个prop的情形：

1、这个prop用来传递一个初始值；这个子组件接下来希望将其作为一个本地的prop数据来使用。在这中情况下，最好定义一个本地的data属性并将这个prop用作其初始值

2、这个prop以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个prop的值来定义一个计算属性

22、hash模式和history模式的区别

hash模式比较丑，history模式较优雅
pushState设置的新的URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新的URL可以与当前的URL一模一样，这样也会把记录添加到栈中；而hash设置的心智必须与原来不一样才会触发记录添加到栈中
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用
hash模式兼容IE8以上，history兼容IE10以上
history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误

23、浏览器url地址输入网址发什么了什么

URL解析

DNS查询

TCP连接

处理请求

接受响应

渲染页面

24、HTML5新增特性

Canvas、SVG--用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真

video、audio--用于播放视频和音频的媒体

Drag、Drop--用于拖放

Geolocation--用于获取地理位置

localStorage、sessionStorage--用于本地离线存储

webSQL、IndexDB -- 前端数据库操作，由于安全性极低，目前h5已放弃。

web Worker -- 独立于其他脚本，不影响页面性能运行在后台的javascript。

webSocket -- 单个TCP连接上进行全双工通讯的协议。

新的特殊内容元素 -- 如：article、footer、header、nav、section。

新的表单控件 -- 如：date、time、email、url、search。

25、websocket

一种在单个tcp连接上进行全双工通讯的协议，可以做客户端和服务端的通讯和数据交互，通讯协议是ws、加密的是wss.

26、浏览器渲染流程

生成DOM TREE

生成CSSOM

生成RENDER TREE

生成图层树，其中包括渲染层和合成层

绘制列表生成

分块光栅化

合成和显示

27、面向对象和面向过程

面向对象：简称opp（object oriented programming）,简单来说就是根据类创建对象，每个对象都有自己的属性和方法，而这些属性和方法都是围绕对象服务的，你会发现用到的属性和方法都是对象。属性、对象、方法、这就是一个面向对象的过程了，它有一下三种特点：

1、封装：根据职责将属性和方法封装到一个抽象的类中

2、继承：实现代码的重用，相同的代码不需要重复的写

3、多态：（以封装和继承为前提），不同的子类对象调用相同的方法，产生不同的执行结果，包括重载和覆盖

面向过程：简称POP，Procedure Oriented, 面向过程就是分析解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个一次调用就可以了

区别：

1、从开发效率来说，面向对象要比面向过程效率高一些，因为面向对象的语言会封装一些实现好的属性和方法，需要用到时直接函数调用就可以了，而对于面向过程的语言可能就需要自己重写一遍方法才能用了，这样就降低了效率

2、从宏观上来说，面向对象是相对面向过程而言的，面向对象包含了面向过程的思想

3、从微观上来说，面向过程就是分析出解决问题所需要的步骤，关注的是解决问题的那些步骤，而面向对象是把构成的问题的事物分解成各个对象，关注的是解决问题需要那些对象

28、vue实现数据双向绑定的原理是什么？

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

29、vue-router中keep-alive的理解

1、什么是keep-alive

props:

include:字符串或正则表达式。只有名称匹配的组件会被缓存

exclude:字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max:数字，最多可以缓存多少组件实例

用法：

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销魂它们。

<keep-alive>是一个抽象组件：他自身不会渲染一个DOM元素，也不会出现组件的父组件链中。

当组件在<keep-alive>内被切换时，他的activated和deactivated这两个生命周期钩子函数将会被对应执行。

2、keep-alive的作用是用于保留组件状态或避免重新渲染

<!-- 基本 -->
<keep-alive><component :is="view"></component>
</keep-alive><!-- 多个条件判断的子组件 -->
<keep-alive><comp-a v-if="a > 1"></comp-a><comp-b v-else></comp-b>
</keep-alive>

30、vue响应式原理

当创建vue实例时，vue会遍历data选项的属性，利用object.defineProperty将属性转为getter和setter对数据的读取进行劫持（getter用来依赖搜集，setter用来派发更新），并且子啊内部追踪依赖，在属性被访问和修改时通知变化。更新数据关联的虚拟DOM树。

31、proxy的优缺点

优点：

1、节约单点对外网络带宽，减少网络负荷，节约宽带

2、通过短路获取网络数据，感觉网络加速

3、借助上层代理服务器，实现自动数据分流

4、提供防火墙内部的计算机连接互联网：及上述单点外部防火墙功能

缺点：

1、容易被内部网络人员滥用

2、互联网看到获取数据的人是proxy，而不是客户端计算机的IP，所以可能会让一些内部网络用户开始使用你的proxy做坏事，这时你会很麻烦，为了消除这种情况，建议增加用于管理登录文件分析的软件。

3、需要更高的设置技巧和排除错误的程序

32、计算属性（computed）和watch区别

1、计算属性（computed）

1.支持缓存，只有依赖数据发生改变，才会重新进行计算；

2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

3.computed属性值会默认走缓存，计算属性时基于它们的响应式依赖进行缓存的。也就是基于data中声明过或者是父组件传递的props中的数据通过计算得到的值；

4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性是一个多对一或者一对一，一般用computed

5.如果computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法