2023年前端面经(大厂面试必备)

2023年前端面经（大厂面试必备）（一）

一、HTML/CSS篇

1、标签上title与alt属性的区别是什么？

【仅供参考】

alt是给搜索引擎识别，在图像无法显示时的替代文本；

title是关于元素的注释信息，主要是给用户解读。

当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE

浏览器中alt起到了title的作用，变成文字提示。

在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都

能正常使用。

2、Canvas和SvG的区别是什么？

【仅供参考】

两者的区别如下：

（1）一旦Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形

状都能被记忆和操作，可以被浏览器再次显示。

（2）Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有

利。

（3）因为不需要记住以后事情，所以Canvas运行更快；因为为了之后的操

作，SVG需要记录坐标，所以运行比较缓慢。

（4）在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑

定相关事件。

（5）Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因

此与分辨率无关。

3、哪些浏览器支持HTML5?

【仅供参考】

几乎所有的浏览器（如Safari、Chrome、Firefox、Opera、IE）都支持

HTML5

4、如何使用Canvas和HTML5中的SVG画一个矩形？

【仅供参考】

使用SVG绘制矩形的代码如下：

<svgxmlns=http://www.w3.org/2000/svgversion="l.1”>

<rectstyle=/，fill:rgb(255,100,0)；"height=200"width="400"X/rect>

</svg>

使用Canvas绘制矩形的代码如下。

<canvasid="myCanvas"widlh=500"height="500"X/canvas>

varcanvas=document.getElementByld('mycanvas')；

varctx=canvas.getContext('2d')；

ctx.rect(100,100,300,200)；

ctxfillstyle='pink'

ctx.fill()

5、HTML5中的应用缓存是什么？

【仅供参考】

HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连

接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这

个目的。

应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

6、HTML5标准提供了哪些新的API?

【仅供参考】

HTML5提供很多新的API,包括MediaAPI、TextTrackAPI,Application

CacheAPI、UserInteractionAPI>DataTransferAPI、CommandAPI、

ConstraintionValidationAPI和HistoryAPI

7、Doctype作用？标准模式与兼容模式各有什么区别？

【仅供参考】

D0CTYPE是用来声明文档类型和DTD规范的。<!DOCTYPEhtml>声明位于

HTML文档中的第一行，不是一个HTML标签，处于html标签之前。告知浏览

器的解析器用什么文档标准解析这个文档。D0CTYPE不存在或格式不正确会导

致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容

模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点

无法工作。

8、如何区另(JHTML和HTML5?

【仅供参考】

用DOCTYPE声明新增的结构元素和功能元素来区别它们。

9、如何实现浏览器内多个标签页之间的通信？

【仅供参考】

在标签页之间，调用localstorge^cookies等数据存储，可以实现标签页之

间的通信

10、解释浮动及其工作原理。

【仅供参考】

浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素(父元素)或

另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度

(width)<>虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮

动之前的水平方向上。

因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存

在一样，下面的元素会填补原来的位置。

有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素

遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元

素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元

素。

11、画一条0.5px的直线？

【仅供参考】

考查的是css3的transform

height:Ipx;

transform:scale(0.5);

12、如何实现左边固定宽，右边自适应布局

【仅供参考】

//1.圣杯布局

<divid="container”〉

<divid="center"class="column“〉〈/div>

<divid="left"class="columrT〉〈/div>

<divid="righl"class=，，column/，X/div>

</div>

^container{

padding-left:200px;

padding-right:150px;

)

ttcontainer.column{

float:left;

)

ttcenter{

width:100%;

)

#left{

width:200px;

margin-left:-100%;

position:relative;

right:200px;

)

Sright{

width:150px;

margin-right:-150px;

)

//2.双飞翼布局

<divid二〃container,class二〃column”)

<divid="center〃></div>

</div>

<divid二〃left"class二〃columrTX/div〉

<divid二〃right,class=，，column/z></div>

Scontainer{

width:100%;

)

,column{

float:left;

)

ttcenter{

margin-left:200px;

margin-right:150px;

)

#left{

width:200px;

margin-left:-100%;

}

Sright{

width:150px;

margin-left:-150px;

}

//3.等高布局(假等高)互补的内外边距

.parent{

overflow:hidden;

}

.left,,right{

margin-bottom:-lOOOOpx;

padding-bottom:lOOOOpx;

)

//4.等高布局(真等高)弹性盒子

.parent{

display:flex;

)

.child{

flex:1;

}

//calc

<divid二〃left"class=z，column，，X/div>

<divid二〃center"class=，，columnz，></div>

<divid二〃right,class=，，columnz，></div>

.column{

float:left;

)

#left{

width:lOOpx;

)

Sright{

width:200px;

)

ttcenter{

width:calc(100%-lOOpx-200px);

//5.浮动

<divid="left"class="columrT>〈/div>

<divid="right"class=，，column，，X/div>

<divid="center"></div>

#left{

float:left;

width:lOOpx;

)

Wright{

float:right;

width:200px;

)

#center{

margin-left:lOOpx;

margin-right:200px;

)

13、精灵图和base64如何选择？

【仅供参考】

精灵图：

优点：

将多个图像加载请求合并为一个请求；

弊端：

难以维护和更新；

增加内存消耗；

base64:

优点：

将多个图像加载请求合并为一个CSS文件请求;

轻松更新生成文件；

弊端：

base64编码比原始二进制表示大约大25%;

IE6或IE7不支持；

14、移动端lpx边框怎么设置

【仅供参考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

}

/*方法2*/

.border{

border-image:url(border,png)

)

/*方法3*/

.border{

box-shadow:000Ipx#000;

)

15、CSS优化、提高性能的方法有哪些？

【仅供参考】

多个css合并，尽量减少HTTP请求

CSS雪碧图

抽象提取公共样式，减少代码量

选择器优化嵌套，尽量避免层级过深(用'>‘替换'')

属性值为0时，不加单位

压缩CSS代码

避免使用CSS表达式，它们要计算成千上万次并且可能会对你页面的性能产生

影响。

16、vertical-align什么时候生效

【仅供参考】

父元素(iniine-block\block)必须含有line-height(inline元素有无皆

可),子元素中的(inline-block/inline元素)vertical-align才能起作用

当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法

子元素居中对齐父元素

17、如何控制单行显示且显示不下显示...

【仅供参考】

overflow:hidden;

text-overflow:ellipsis;

white-space:no-wrap;

18、常见兼容性问题？

【仅供参考】

浏览器默认的margin和padding不同。解决方案是加一个全局的

*{margin:0;padding:0;}来统一。

Chrome中文界面下默认会将小于12px的文本强制按照12px显示，

可通过加入CSS属性-webkit-text-size-adjust:none;解决.

19、如何让文字换行

【仅供参考】

word-wrap,word-break,white-space都可以做至U

word-wrap:normal;遇到空格才换行

word-break：break-all；把所有字符（包括空格）当一行，遇到边界换行

word-break：break-word；先按空格换行，再拆分单词和word-wrap：break­

word一样

white-space：normal；正常遇到空白换行

white-space：no-wrap；空白都不换行，一行显示所有

word-wrap和word-break在flex布局下的效果，word-wrap不能换行，word­

break可以。

但是如果二者都有width或者min-width限制，效果一样。

〈divstyle二〃border:Ipxsolidred;width:200px;height:200px;

display:flex;“〉

〈divstyle二〃flex:1;word-wrap:break­

word;〃>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

〈divstyle二〃min-width:lOOpx;border:Ipxsolidgreenz，>sss</div>

</div>

〈divstyle二〃border:Ipxsolidred;width:200px;height:200px;

display:flex;，,>

<divstyle=z，flex:1;word-break:break­

word;”〉dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

<divstyle=z，min-width:lOOpx;border:lpxsolidgreen/，>sss</div>

</div>

20、文字和图片放在一起，为什么无法底部对齐

【仅供参考】

因为img也相当于一个inline的元素，inline就要遵守行高的构成，它会

按照base基线对齐，基线对齐的话那么它就会和底线间有一个缝隙。

对于img,因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为

vertical-align:bottom。或者让他display:block,这样图片虽然会换行，

但是没有间隙了

二、JS/ES6/TS篇

1、JSON的了解？

【仅供参考】

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小

{'age':'12','name':'back'}

2、什么是回调

【仅供参考】

回调函数是作为参数或选项传递给某个方法的普通JS函数。

它是一个函数，在另一个函数完成调用后执行，因此称为回调。

3、async/await

【仅供参考】

async是一个通过异步执行并隐式返回Promise作为结果的函数。是

Generator函数的语法糖，并对Generator函数进行了改进。

改进：

内置执行器，无需手动执行nextO方法。

更好的语义

更广的适用性：co模块约定，yield命令后面只能是Thunk函数或Promise

对象，而async函数的await命令后面，可以是Promise对象和原始类型的值

（数值、字符串和布尔值，但这时会自动转成立即resolved的Promise对

象）。

返回值是Promise,比Generator函数返回的Iterator对象方便，可以直接

使用then（）方法进行调用。

async隐式返回Promise作为结果的函数，那么可以简单理解为，await后面

的函数执行完毕时，await会产生一个微任务（Promise.then是微任务）。

4、prototype和proto的关系是什么

【仅供参考】

prototype:所有函数都会有一个prototype属性，它就是函数的原型对象

proto:所有实例对象上都会有一个proto属性，它等同于函数的原型对象

5、请说一个pushState与replaceState两个方法的作用与区别

【仅供参考】

作用：都是改变路由（路径）的，路径改变时不会请求服务器（除非你f5刷

新）

区别：

pushState：不会替换掉之前的历史路径

replaceState：会替换掉之前的历史路径

6、什么是回调地狱

【仅供参考】

一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使

用回调的方式相互嵌套。

Promise解决了这个问题

async/wait在Promise的基础上优化，同步写法，异步执行，使代码看起来更

简洁。

7、HTML5的form如何关闭自动完成功能？

【仅供参考】

将不想要自动完成的form或input设置为autocomplete=off

8、this指向的各种情况都有什么？

【仅供参考】

全局作用域中的函数：非严格模式下其内部this指向window

对象内部的函数：其内部Ihis指向对象本身：

构造函数：其内部this指向生成的实例：

由apply、call、bind改造的函数：其this指向第一个参数：

箭头函数：箭头函数没有自己的this,看其外层的是否有函数，如果有，外层

函数的this就是内部箭头函数的this,如果没有，则this是window。(函数

定义时的this,而不是调用时this)

9、callee与call与caller的区别：

【仅供参考】

callee是arguments上面的属性，表示当前正在执行的函数

call改变函数调用时里边this的指向

caller是函数上的一个属性,它指向当前函数外一层函数，没有外一层函数，

则为null

10、JSONP的工作原理

【仅供参考】

jsonp是一种跨域通信的手段，它的原理其实很简单：

首先是利用script标签的src属性来实现跨域。

通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返

回，实现服务器端向客户端通信。

由于使用script标签的src属性，因此只支持get方法

封装一个简单的JSONP

(function(global){

varid=0,

container=document.getElementsByTagName("head")[0];

functionjsonp(options){

if(ioptions||!options,url)return;

varscriptNode=document.createElement("script"),

data=options,data|{},

url=options,url,

callback=options,callback,

fnName="jsonp"+id++;

//添加回调函数

data["callback"]=fnName;

//拼接url

varparams=[];

for(varkeyindata){

params.push(encodeURIComponent(key)++

encodeURIComponent(data[key]));

)

url=url.indexOf(，z?z，)>0?(url+〃&〃):(url+〃？〃)；

url十=params,join(〃&〃)；

scriptNode.src=url;

//传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法

global[fnName]=function(ret){

callback&&callback(ret);

container.removeChiId(scriptNode);

deleteglobal[fnName];

)

//出错处理

scriptNode.onerror=function(){

callback&&callback({error：z，errorz/});

container.removeChild(scriptNode);

global[fnName]&&deleteglobal[fnName];

)

scriptNode.type=，/text/javascript^;

container.appendChiId(scriptNode)

)

global,jsonp=jsonp;

})(this);

调用

jsonp({

url:〃www.example,com”,

data:{id:1},

callback:function(ret)

console,log(ret);

11、请说出以下flag的结果？为什么？

【仅供参考】

functionshow(){}

functiongetName(){return'牛夫人'

varflag=show()||getName0

答案：flag值为'牛夫人'

解释：1.函数都会有一个默认的返回值undefined

逻辑或如果第一个值成立就直接返回第一个值，否则直接返回第二个值

12、javascript的typeof返回哪些数据类型（至少六个）检测类型如下：

【仅供参考】

string、number>boolean、undefined、object、function、

symbol（ES6之后新增的类型）

13、请解释一下什么是重排与重绘？

【仅供参考】

重排：当改变dom结构的时候，就会从dom树开始从新渲染页面，这过程叫重

排比如添加或者删除可见的D0M元素、元素尺寸改变、元素内容改变、浏览器

窗口尺寸改变等等

重绘：当改变样式（不改变几何结构）的时候，它会从render树开始重新开始

渲染页面，这过程叫重绘，比如改变颜色，透明等

14、说一下元素节点、文本节点、属性节点的nodeType、nodeName、

nodeValue分别是什么

【仅供参考】

nodeType（节点类型）nodeName（节点名称）nodeValue（节点的值）

元素节点：1元素标签名null（没有值）

属性节点：2属性名属性值

文本节点：3text节点内容

15、对JS的slice和splice的理解？

【仅供参考】

slice是用来截取，比如slice。，3),下标含头不含尾的截取，slice(l),从下

标1开始截取到最后，slice(-2)表示截取倒数第二个开始，取到最后。返回被

提取的数组。原数组不变。

splice通过删除或替换现有元素或者原地添加新的元素来修改数组，原数组变

化。

spilced.O/a/b'),在下标为1的位置开始删除0个元素，追加两个元素

'a','b',此时'a'的下标变成1

spilce(l,1,'a','b'),在下标为1的位置开始删除1个元素,追加两个元素

'a','b',此时'a'的下标变成1

返回被删除的数组

16、请说出以下结果输出什么？为什么？

【仅供参考】

for(vari=0;i<5;i++){

setTimeout(function(){

console,log(i)

},0)

)

答案：5个5

解释：异步代码需要等同步代码先执行，所以当异步定时器执行时，

同步的for循环已经循环完毕

17、对JS的apply,call,bind的理解？

【仅供参考】

bind是返回对应函数，便于稍后调用；apply.call则是立即调用。

call和apply都是为了改变某个函数运行时的上下文(context)而存在的，

换句话说，就是为了改变函数体内部this的指向。

JavaScript的一大特点是，函数存在「定义时上下文」和「运行时上下文」以

及「上下文是可以改变的」这样的概念。

functionfruits(){}

fruits,prototype={

color:"red",

say:function(){

console.log(，，Mycoloris〃+this,color);

)

varapple=newfruits;

apple.say();//Mycolorisred

但是如果我们有一个对象banana={color:"yellow"},我们不想对它重新定

义say方法，那么我们可以通过call或apply用apple的say方法：

banana={

color:"yellow”

)

apple.say.call(banana);//Mycolorisyellow

apple,say.apply(banana);//Mycolorisyellow

对于apply,call二者而言，作用完全一样，只是接受参数的方式不太一样。

call按顺序传参，apply接收数组

func.call(this,argl,arg2);

func.apply(this,[argl,arg2])

Math.max.apply(Math,[5,458,120,-215])

Math.max.call(Math,5,458,120,-215)

bind。最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的

this值。常见的错误就像上面的例子一样，将方法从对象中拿出来，然后调

用，并且希望this指向原来的对象。如果不做特殊处理，一般会丢失原来的对

象。使用bind。方法能够很漂亮的解决这个问题：

this,num=9;

varmymodule={

num:81,

getNum:function0{

console.log(this.num);

)

)；

mymodule.getNumO;//81

vargetNum=mymodule.getNum;

getNumO;//9,因为在这个例子中，"this”指向全局对象

varboundGetNum=getNum.bind(mymodule);

boundGetNumO;//81

MDN的解释是：bind。方法会创建一个新函数，称为绑定函数，当调用这个绑

定函数时，绑定函数会以创建它时传入bind。方法的第一个参数作为this,

传入bindO方法的第二个以及以后的参数加上绑定函数运行时本身的参数按

照顺序作为原函数的参数来调用原函数。

varfoo={

bar:1,

eventBind:function(){

$('.someClass().onCclick,,function(event){

/*Actontheevent*/

console,log(this,bar);//I

//如果不用bind,this将指向对应class的那个元素对象

}.bind(this));

)

)

(functionfn(a,b,c){

returna+b+c;

}).bind(null,10,20)(5)

//35

//转成了一个新函数,a和b已经和10,20绑定了，5传递给了这个新函数的剩

余参数

18、如何从TypeScript的子类调用基类构造函数

【仅供参考】

使用super。函数，从子类中调用父类或基类构造函数

19、Omit类型有什么作用？

【仅供参考】

Omit是实用程序类型的一种形式，它促进了常见的类型转换。Omit允许你通过

传递电流Type并选择Keys在新类型中省略来构造类型。

0mit<Type,Keys>

20、Promise中reject和catch处理上有什么区别

【仅供参考】

reject是用来抛出异常，catch是用来处理异常

reject是Promise的方法，而catch是Promise实例的方法

reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二

个回调，则进入catch

网络异常(比如断网)，会直接进入catch而不会进入then的第二个回调

三、Vue/React篇

1、什么是ReactFiber?

【仅供参考】

Fiber是React16中新的协调引擎或重新实现核心算法。它的主要目标是支

持虚拟DOM的增量渲染。ReactFiber的目标是提高其在动画、布局、手势、

暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新

的并发原语。

ReactFiber的目标是增强其在动画、布局和手势等领域的适用性。它的主要

特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

2、受控组件和非受控组件区别是啥？

【仅供参考】

受控组件是React控制中的组件，并且是表单数据真实的唯一来源。

非受控组件是由DOM处理表单数据的地方，而不是在React组件中。

尽管非受控组件通常更易于实现，因为只需使用refs即可从DOM中获取值，

但通常建议优先选择受控制的组件，而不是非受控制的组件。

这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按

钮，强制输入格式

3、在构造函数调用super并将props作为参数传入的作用是啥？

【仅供参考】

在调用super()方法之前，子类构造函数无法使用this引用，ES6子类也是

如此。将props参数传递给super()调用的主要原因是在子构造函数中能够

通过this,props来获取传入的propso

props的行为只有在构造函数中是不同的，在构造函数之外也是一样的

4、说一下vm.$mount()的作用

【仅供参考】

手动地挂载一个未挂载的实例

5、说一下v-bind是什么，有什么用？

【仅供参考】

v-bind：绑定属性

6、虚拟DOM的优缺点？

【仅供参考】

优点：

保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，它

的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起

粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需

要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；

无需手动操作DOM：我们不再需要手动去操作DOM,只需要写好View-Model

的代码逻辑，框架会根据虚拟D0M和数据双向绑定，帮我们以可预期的方式

更新视图，极大提高我们的开发效率；

跨平台：虚拟D0M本质上是JavaScript对象，而D0M与平台强相关，相比

之下虚拟D0M可以进行更方便地跨平台操作，例如服务器渲染、weex开发等

等。

缺点：

无法进行极致优化：虽然虚拟D0M+合理的优化，足以应对绝大部分应用的

性能需求，但在一些性能要求极高的应用中虚拟D0M无法进行针对性的极致优

化。

7、说一下Vue生命周期四个初始化阶段方法

【仅供参考】

beforeCreate(){},创建vue之前执行(数据和虚拟D0M树还没有加载完

成)

created(){},创建vue之前执行(数据已经加载好，虚拟D0M树没有加载完

成)

beforeMount(){},页面渲染之前执行(数据和虚拟DOM树都已经加载好，但

数据这时并没有填充)

mounted(){},页面渲染之后(数据已经填充完成)

8、vue常用的修饰符

【仅供参考】

stop阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

prevent防止执行预设的行为同于JavaScript的event.preventDefault()

trim自动过滤用户输入的首尾空格

number将输出字符串转为Number类型

enter回车键

9、vue中key值的作用

【仅供参考】

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此

节点，找到正确的位置区插入新的节点

所以一句话，key的作用主要是为了高效的更新虚拟DOM

10、Vuex用过吗？简单介绍一下？

【仅供参考】

状态管理模式+库

相当于共享仓库，方便任何组件直接获取和修改。

state-数据【存项目共享状态，是响应式的，store的数据改变，所有依赖

此状态的组件会更新】

$store.state,count

mutations-方法【同步函数，只建议在这个地方修改数据】

inc(state,参数唯一){)

$store.commit('inc',2)

actions-【异步操作】【提交的是mutations,不直接修改状态】

increment(context,num){context,commit()}

this.$store.dispatch,arg)

getters-包装数据【store的计算属性，可缓存】

show:function(state){}

this.$store.getters,show

传参，返回函数：show(state){returnfunction(参数){return...}}【不

会缓存数据】

11、Vue组件间通信有哪几种方式？

【仅供参考】

Vue组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出

越多方法当然越加分，表明你对Vue掌握的越熟练。

Vue组件间通信只要指以下3类通信：父子组件通信、隔代组件通信、兄弟组

件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件

间通信。

（1）props/$emit适用父子组件通信

这种方法是Vue组件的基础，相信大部分同学耳闻能详，所以此处就不举例展

开介绍。

（2）ref与$parent/$children适用父子组件通信

ref：如果在普通的DOM元素上使用，引用指向的就是D0M元素；如果用在子

组件上，引用就指向组件实例

$parent/$children：访问父/子实例

（3）EventBus（$emit/$on）适用于父子、隔代、兄弟组件通信

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发

事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners适用于隔代组件通信

$attrs：包含了父作用域中不被prop所识别（且获取）的特性绑定（class

和style除外）。当一个组件没有声明任何prop时，这里会包含所有父作用

域的绑定（class和style除外），并且可以通过v-bind="$attrs”传入内

部组件。通常配合inheritAttrs选项一起使用。

$listeners：包含了父作用域中的（不含.native修饰器的）v-on事件监听

器。它可以通过v-on="$listeners”传入内部组件

（5）provide/inject适用于隔代组件通信

祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注

入变量。provide/injectAPI主要解决了跨级组件间的通信问题，不过它的

使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提

供与依赖注入的关系。

（6）Vuex适用于父子、隔代、兄弟组件通信

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

核心就是store（仓库）。"store”基本上就是一个容器，它包含着你的应用

中大部分的状态（state）o

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若

store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变store中的状态的唯一途径就是显式地提交（commit）mutation。这样使

得我们可以方便地跟踪每一个状态的变化。

12、说一下v-slot的作用

【仅供参考】

提供具名插槽或需要接收prop的插槽。

13、描述一下vue在生命周期的mounted阶段时，页面是怎么样的

【仅供参考】

mounted执行时,数据和虚拟D0M树已经都加载完成，也渲染完成

14、说一下vm.$off()的作用

【仅供参考】

移除自定义事件监听器。

15、谈谈你对MWM开发模式的理解？

【仅供参考】

MVVM分为Model、View、ViewModel三者。

Model代表数据模型，数据和业务逻辑都在Model层中定义；

View代表UI视图，负责数据的展示；

ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互

操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和

ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触

发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中

同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数

据的维护操作即可，而不需要自己操作dom„

16、vueslot是做什么的？

【仅供参考】

可以插入的槽口，比如插座的插孔。

17、$refs属性是什么，有什么用

【仅供参考】

$refs属性是什么：文档说明该属性是一个对象类型，而且是只读的

作用：通过$refs获取的ref属性标识的元素对象

18、你有对Vue项目进行哪些优化？

【仅供参考】

(1)代码层面的优化

v-if和v-show区分使用场景

computed和watch区分使用场景

v-for遍历必须为item添加key,且避免同时使用v-if

长列表性能优化

事件的销毁

图片资源懒加载

路由懒加载

第三方插件的按需引入

优化无限列表性能

服务端渲染SSRor预渲染

(2)Webpack层面的优化

Webpack对图片进行压缩

减少ES6转为ES5的冗余代码

提取公共代码

模板预编译

提取组件的CSS

优化SourceMap

构建结果输出分析

Vue项目的编译优化

(3)基础的Web技术的优化

开启gzip压缩

浏览器缓存

CDN的使用

使用ChromePerformance查找性能瓶颈

19、当第一次使用计算的新属性时，会初始计算一次，

【仅供参考】

并且把值缓存，后面的每次调用都使用缓存值；除非改变了依赖的属性数据

20、Vue3.0将用原生Proxy替换Object.defineProperty,为什么要替换

Object.defineProperty?

【仅供参考】

Object.defineProperty只能遍历对象属性进行劫持

Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象

达到响应式目的

在Vue中，Object,defineProperty无法监控到数组下标的变化，导致直接通

过数组的下标给数组设置值，不能实时响应。

Object,defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个

属性进行遍历。

四、Webpack/Rollup篇

1、lazyloading(模块懒加载)

【仅供参考】

借助import。语法异步引入组件，实现文件懒加载：prefetch,preloading

webpack提倡多写异步代码，提升代码利用率，从而提升页面性能

先加载主业务文件，prefetch利用网络空闲时间，异步加载组件

import(/*webpackPrefetch:true/'LoginModal');

preload和主业务文件一起加载，异步加载组件

import(/webpackPreload:true*/4ChartingLibrary");

2、HMR热模块更新

【仅供参考】

借助webpack.HotModuleReplacementPlugin()，devServer开启hot

场景1：实现只刷新css,不影响js

场景2：js中实现热更新，只更新指定js模块

if(module,hot){

module,hot.accept()./library,js',function(){

//Dosomethingwiththeupdatedlibrarymodule---

})：

3、常用loader

【仅供参考】

css-loader读取合并CSS文件

style-loader把CSS内容注入到JavaScript里

sass-loader解析sass文件（安装sass-loader,node-sass）

postcss-loader自动添加浏览器兼容前缀（postcss.config配置）

urlToader将文件转换为base64URI。

vue-loeider处理vue文件。

4、webpack,rollup和parcel对比？

【仅供参考】

webpack为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活，

插件多

rollup用标准化的格式（es6）来写代码，通过减少死代码（tree-shaking）

尽可能地缩小包体积

parcel超快的打包速度，多线程在多核上并发编译，不用任何配置

webpack和rollup都需要配config文件,指明entry,output,plugin,

transformations

二者的细微区别在于：

rollup有对import/export所做的nodepolyfiIls,webpack没有

rollup支持相对路径，而webpack没有，所以得使用path.resolve/path.join

两者实现tree-shaking的方式也不一样，这是个面试点，会问到，实现方式，

哪个体积更小更彻底，为什么

parcel则是完全开箱可用的，不用配置

5、什么是bundle,什么是chunk,什么是module

【仅供参考】

bundle：是由webpack打包出来的文件

chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块

module：是开发中的单个模块

6、babel相关：polyfill以及runtime区别，ESstage含义，preset-

env作用等等

【仅供参考】

polyfill以及runtime区别

babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-

polyfill会做兼容。

babel-runtime它是将es6编译成es5去执行。我们使用es6的语法来编写，

最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6,

只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。

babel-polyfill它是通过向全局对象和内置对象的prototype上添加方法来实

现的。比如运行环境中不支持Array,prototype.find方法,引入polyfill,

我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。

babel-runtime:它不会污染全局对象和内置对象的原型，比如说我们需要

Promise,我们只需要importPromisefrom'babel-runtime/core-

js/promise，即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

stage-x：指处于某一阶段的js语言提案

Stage0-设想(Strawman)：只是一个想法，可能有Babel插件。

Stage1-建议(Proposal)：这是值得跟进的。

Stage2-草案(Draft)：初始规范。

Stage3-候选(Candidate)：完成规范并在浏览器上初步实现。

Stage4-完成(Finished)：将添加到下一"个年度版本发布中&

7、TreeShaking技术

【仅供参考】

从技术实现上来说，它是依托于ES6提供的模块系统对代码进行静态分析,并将

代码中的死代码(deadcode)移除的一种技术。因此，利用TreeShaking技术

可以很方便地实现我们代码上的优化，减少代码体积。

□TreeShaking,从这个技术的命名十分形象，直译过来就是“摇树的意

思。在去除代码冗余的过程中，程序会从入口文件出发扫描所有的模块依赖，

以及模块的子依赖，然后将它们链接起来形成一个“抽象语法树"(AST)。随

后，运行所有代码，查看哪些代码是用到过的，做好标记。最后，再将“抽象

语法制”中没有用到的代码“摇落”。这样一个过程后，就去除了没有用到的

代码。

8、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全。

【仅供参考】

Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数;

开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插

件，执行对象的run方法开始执行编译；

确定入口：根据配置中的entry找出所有的入口文件；

编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找

出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤

的处理；

完成模块编译：在经过第4步使用Loader翻译完所有模块后，得到了每个模

块被翻译后的最终内容以及它们之间的依赖关系；

输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的

Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以

修改输出内容的最后机会；

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件

内容写入到文件系统。

在以上过程中，Webpack会在特定的时间点广播出特定的事件，插件在监听到

感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API

改变Webpack的运行结果。

9、gulp/grunt与webpack的区别是什么？

【仅供参考】

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来

说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS

文件等。

grunt和gulp是基于任务和流(Task、Stream)的。

类似jQuejry,找到一个(或一类)文件，对其做一系列链式操作，更新流上的

数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流

程。

webpack是基于入口的。

webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的

Loader来处理不同的文件，用Plugin来扩展webpack功能。

10、webpack打包原理

【仅供参考】

把一切都视为模块：不管是css、JS、Image还是html都可以互相引用，通

过定义entry.js,对所有依赖的文件进行跟踪，将各个模块通过loader和

plugins处理，然后打包在一起。

按需加载：打包过程中Webpack通过CodeSplitting功能将文件分为多个

chunks,还可以将重复的部分单独提取出来作为commonChunk,从而实现按需

加载。把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按

需加载

11、webpack3和webpack4的区别

【仅供参考】

mode/-mode参数，新增了mode/-mode参数来表示是开发还是生产

(development/production)production侧重于打包后的文件大小,

development侧重于goujiansud移除loaders,必须使用rules（在3版本的

时候loaders和rules是共存的但是到4的时候只允许使用rules）移除了

CommonsChunkPlugin（提取公共代码），用optimization.splilChunks和

optimization.runtimeChunk来代替支持es6的方式导入JSON文件，并且可以

过滤无用的代码

12、什么是Tree-sharking?

【仅供参考】

指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js

treeshaking通过UglifyJsPlugin来进行，css中通过purify-CSS来进行。

13、webpack的热更新是如何做到的？说明其原理？

【仅供参考】

1、在webpack的watch模式下，文件系统中某一个文件发生修改，webpack

监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过

简单的JavaScript对象保存在内存中。

2、webpack-dev-server和webpack之间的接口交互，而在这一步，主要是

dev-server的中间件webpack-dev-middleware和webpack之间的交互，

webpack-dev-midd1eware调用webpack暴露的API对代码变化进行监控，并

且告诉webpack,将代码打包到内存中。

3、webpack-dev-server对文件变化的一个监控，这一步不同于第一步，并不

是监控代码变化重新打包。当我们在配置文件中配置了

devServer.watchContentBase为true的时候，Server会监听这些配置文件

夹中静态文件的变化，变化后会通知浏览器端对应用进行livereloada注

意，这儿是浏览器刷新，和HMR是两个概念

4、webpack-dev-server代码的工作,该步骤主要是通过sockjs（webpack-

dev-server的依赖）在浏览器端和服务端之间建立一个websocket长连接，

将webpack编译打包的各个阶段的状态信息告知浏览器端，

同时也包括第三步中Server监听静态文件变化的信息。浏览器端根据这

些socket消息进行不同的操作。当然服务端传递的最主要信息还是新模块的

hash值，后面的步骤根据这一hash值来进行模块热替换。

webpack-dev-server/client端并不能够请求更新的代码，也不会执行热

更模块操作，而把这些工作又交回给了webpack,webpack/hot/dev-server的

工作就是根据webpack-dev-server/client传给它的信息以及dev-server的

配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，

也就没有后面那些步骤了。HotModuleReplacement.runtime是客户端HMR的

中枢，它接收到上一步传递给他的新模块的hash值，它通过

JsonpMainTemplate.runtime向server端发送Ajax请求，服务端返回一个

json,该json包含了所有要更新的模块的hash值，获取到更新列表后，该

模块再次通过jsonp请求，获取到最新的模块代码。

5、决定HMR成功与否的关键步骤，在该步骤中，HotModulePlugin将会对新

旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依

赖关系，更新模块的同时更新模块间的依赖引用。最后一步，当HMR失败后，

回退到livereload操作，也就是进行浏览器刷新来获取最新打包代码。

14、loader的作用

【仅供参考】

webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函

数会以源码作为参数，比如，将ES6转换为ES5,将less转换为css,然后再

将css转换为js,以便能嵌入到hlml文件中。

15、plugin的作用

【仅供参考】

plugin是一个类，类中有一个apply。方法，主要用于Plugin的安装，可以在

其中监听一些来自编译器发出的事件，在合适的时机做一些事情。

16、webpack的核心概念

【仅供参考】

Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。

告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

output：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认

为./dist

Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。

Webpack会从配置的Entry开始递归找出所有依赖的模块。

Chunk；代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。

Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件，

插件可以监听这些事件的发生，在特定时机做对应的事情。

17、npm打包时需要注意哪些？如何利用webpack来更好的构建？

【仅供参考】

Npm是目前最大的JavaScript模块仓库，里面有来自全世界开发者上传的可

复用模块。

你可能只是JS模块的使用者，但是有些情况你也会去选择上传自己开发的模

块。

关于NPM模块上传的方法可以去官网上进行学习，这里只讲解如何利用

webpack来构建。

NPM模块需要注意以下问题：

要支持CommonJS模块化规范，所以要求打包后的最后结果也遵守该规则。

Npm模块使用者的环境是不确定的，很有可能并不支持ES6,所以打包的最后结

果应该是采用ES5编写的。并且如果ES5是经过转换的，请最好连同

SourceMap一同上传。

Npm包大小应该是尽量小（有些仓库会限制包大小）

发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。

这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。

UI组件类的模块应该将依赖的其它资源文件，例如.css文件也需要包含在发布

的模块里。

18、如何解决循环依赖问题

【仅供参考】

Webpack中将require替换为webpackjrequire,会根据moduleld到

installedModules找是否加载过,加载过则直接返回之前的export,不会重

复加载。

19、webpack是解决什么问题而生的？

【仅供参考】

如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能

乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less,sass等CSS预

处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

20、什么是模热更新？有什么优点？

【仅供参考】

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览

器就可以更新。

在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷

新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，儿乎相

当于在浏览器中更改样式

五、性能/浏览器/其他篇

1、性能优化六大指标

【仅供参考】

六大指标基本囊括大部分性能优化细节，可作为九大策略的补充。笔者根据每

条性能优化建议的特征将指标划分为以下六方面。

「加载优化」:资源在加载时可做的性能优化

「执行优化」:资源在执行时可做的性能优化

「渲染优化」:资源在渲染时可做的性能优化

「样式优化」:样式在编码时可做的性能优化

「脚本优化」:脚本在编码时可