2023年前端(1~5年经验)面试题

2023年前端(「5年经验)面试题(一)

一、HTML/CSS篇

1、什么是SVG?

【仅供参考】

SVG即可缩放失量图形(ScalableVectorGraphics)o它是基于文本的图形

语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

2、如何区别HTML和HTML5?

【仅供参考】

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

3^页面可见性(PageVisibility)API可以有哪些用途

【仅供参考】

1、通过visibilitystate的值得检测页面当前是否可见，以及打开网页的时

间。

2、在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

4、如何在HTML5页面中嵌入视频？

【仅供参考】

和嵌入音频文件一样，HTML5定义了嵌入视频的标准方式，支持的格式包括

MP4、WebM和Ogg等，嵌入方式如下。

<videowidth="450"height="340"controls>

<sourcesrc="icketang.mp4"type="video/mp4”>

Yourbrowserdoes,ntsupportvideoembeddingfeature.

</video>

5、如果把HTML5看成一个开放平台，它的构建模块有哪些？

【仅供参考】

如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如

<nav><header><sectionXfooter>o

Wnav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面

更加准确

〈header〉标签用来定义文档的页眉。

〈section》标签用来描述文档的结构。

〈footer〉标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、

文档的创作日期和联系信息

6、HTML5Canvas元素有什么作用？

【仅供参考】

Canvas元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在

HTML上进行图形操作。

7、与HTML4比较，HTML5废弃了哪些元素？

【仅供参考】

废弃的元素包括frameframeset、noframe>applet、big、center和

basefonto

8、如何让老版本IE也支持H5

【仅供参考】

你可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就

会忽视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏

览器下运行：

<!—[ifIE]>

<script

src=，z/svn/trunk/html5.js/z></script>

<![endif]一>

以下是js文件中的代码：

(function(){if(!/*@cc_on!@*/0)return;vare=

“abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,

figure,footer,

header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”

split(J,J),i=e.length;while(i一一){document.createElement(e[i])}})()

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

【仅供参考】

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

CacheAPI、UserInteractionAPRDataTransferAPI、CommandAPI、

ConstraintionValidationAPI和HistoryAPI

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

【仅供参考】

D0CTYPE是用来声明文档类型和DTD规范的。CDOCTYPEhlml＞声明位于

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

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

致文档以兼容模式呈现。

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

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

无法工作。

11、请你说一下WebWorker和WebSocket的作用。

【仅供参考】

WebWorker的作用如下：

(1)通过worker=newWorker(url)加载一个JavaScript文件,创建一个

Worker,同时返回一个Worker实例

(2)用worker.postMessage(data)向Worker发送数据

(3)绑定worker,onmessage接收Worker发送过来的数据

(4)可以使用worker,terminate()终止一个Worker的执行。

WebSocket的作用如下。

它是Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是

HTML5新增的协议，WebSocket的连接是持久的，它在客户端和服务器之间保

持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的

时间间隔去轮询。

12、HTML5为什么只需要写＜!doctypehtm＞?

【仅供参考】

HTML5不基于SGML,因此不需要对DTD进行引用，但是需要D0CTYPE来规范浏

览器的行为(让浏览器按照它们的方式来运行)。而HTM4.01基于SGML,所以

需要对DTD进行引用，才能告知浏览器文档所使用的类型。

13、常见兼容性问题?

【仅供参考】

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

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

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

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

14、inline-block之间的间隙如何去掉？

【仅供参考】

两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有

空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

删除两个标签间的空格，但是这样html排版不好

容器元素font-size:0然后再在里面再重新设置字体大小

15、画一条0.5px的直线?

【仅供参考】

考查的是css3的transform

height:Ipx;

transform:scale(0.5);

16、Float布局有哪些缺陷？如何清除浮动？

【仅供参考】

使用float之后，元素跳出文档流，容易引发父容器塌陷，最好的解决方式是

给复用器加上：：after伪类进行清除浮动

17、position的值，relative和absolute分别是相对于谁进行定位的？

【仅供参考】

relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。

absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定

位。

fixed:(老版本IE不支持)生成绝对定位，相对于浏览器窗口或者frame进

行定位。

static:默认值，没有定位，元素出现在正常的文档流中。

slicky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。

18、CSS选择器优先级怎样的？如果我在class里面写了三个class,例如<p

class=*classl,class2,class3”》,会最终用那个？

【仅供参考】

!important>[id>class>tag]

这个和classl,class2,class3在元素中顺序无关，而与css文件里面写的

顺序有关，css文件里，越后面的优先级越高。

19、如何定义高度很小的容器？

【仅供参考】

因为有一个默认的行高，所以在IE6下无法定义小高度的容器。

两种解决方案分别是overflow:hidden或font-size：容器高度px

20、calc,support,media各自的含义及用法？

【仅供参考】

©support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判

断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以

提供另外一套样式作为替补。

calc()函数用于动态计算长度值。calc()函数支持“+”，，“*”，

“/”运算;

©media查询，你可以针对不同的媒体类型定义不同的样式。

二、JS/ES6/TS篇

1、什么是高阶函数？

【仅供参考】

高阶函数是对其他函数进行操作的函数；

高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。

例如，Array,prototype,map,Array,prototype,filter和

Atotype.reduce是语言中内置的一些高阶函数。

2、foo=foo||bar,这行代码是什么意思？为什么要这样写？

【仅供参考】

如果foo转为false,则返回bar；否则直接返回foo

逻辑或：如果第一个值为true,直接返回第一个值；否则直接返回第二个值

逻辑与：如果第一个值为false,直接返回第一个值；否则返回第二个值

3、JSON的了解？

【仅供参考】

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

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

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

4、javascript的内存（垃圾）回收机制？

【仅供参考】

垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存

一般使用标记清除方法（markandsweep）,当变量进入环境标记为进入环境，

离开环境标记为离开环境

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环

境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标

记的就是要删除的变量了

还有引用计数方法（referencecounting）,在低版本IE中经常会出现内存泄

露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是

跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该

变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个，则这

个值得引用次数减1,当这个值的引用次数变为0的时候，说明没有变量在使

用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会

在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但B0M与

DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及B0M及D0M就会出

现循环引用问题。

5、如何改变this指针的指向？

【仅供参考】

可以使用apply、call、bind方法改变Ihis指向（并不会改变函数的作用域）。

比较如下：

（1）三者第一个参数都是this要指向的对象，也就是想指定的上下文，上下

文就是指调用函数的那个对象（没有就指向全局window）；

（2）apply第二个参数都是数组，call和bind接收多个参数并用逗号隔开；

（3）apply和call只对原函数做改动，bind会返回新的函数（要生效还得再调

用一次）。

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

【仅供参考】

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

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

【仅供参考】

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

新）

区别：

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

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

8、如何判断变量为NaN

【仅供参考】

通过isNaN（）判断

isNaN(NaN)〃返回true

isNaN(lOOO)//返回false

isNaNC小明')//返回true（判断前会转换成number类型）

isNaNC101')//返回false

9、什么是jsonp

【仅供参考】

jsonp是一种解决跨域请求问题的技术

不足点：它只能是get请求

10、对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:function(){

console.log(this.num);

)

)；

mymodule.getNumO;//81

vargetNum=mymodule.getNum;

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

varboundGetNum=getNum.bind(mymodule);

boundGetNumO;//81

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

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

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

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

varfoo={

bar:1,

eventBind:function(){

$C.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传递给了这个新函数的剩

余参数

11、null/undefined的区别

【仅供参考】

null值：属于null类型，代表“空值”，代表一个空对象指针；使用typeof运

算得到“object”,所以你可以认为它是一个特殊的对象值。

undefined值：属于undefined类型，当一个声明的变量未初始化赋值时，得

到的就是undefinedo使用typeof运算得到“undefined",

12、JS数据类型？

【仅供参考】

数据类型主要包括两部分：

基本数据类型：Undefined,Null>Boolean,Number和String

引用数据类型：Object(包括Object、Array、Function)

ECMAScript2015新增:Symbol(创建后独一无二且不可变的数据类型)

13、渐进增强与优雅降级

【仅供参考】

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对

高级浏览器进行效果、交互等改进，达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

14、如何使用JS删除cookie

【仅供参考】

如果要删除cookie以便后续尝试读取cookie,则只需将过期日期设置为过去

的时间。

咱们应该定义cookie路径以确保删除正确的cookie.,

如果未指定路径，某些浏览器将不允许咱们删除cookie

15、什么时候应该使用关键字unknown?

【仅供参考】

unknown,如果你不知道预先期望哪种类型，但想稍后分配它，则应该使用该

any关键字，并且该关键字将不起作用。

16、如何理解TypeScript中的类

【仅供参考】

TypeScript是一种面向对象的JavaScript语言，支持OOP编程特性，比如

类、接口等。与Java一样，类是用于创建可重用组件的基本实体。它是一组具

有公共属性的对象。类是创建对象的模板或蓝图。它是一个逻辑实体。

“class”关键字用于在Typescript中声明一个类。

classStudent{

studCode:number;

studName:string;

constructor(code:number,name:string){

this.studName=name;

this.studCode=code;

)

getGrade():string{

returnA+;

类的特征：封装、继承、多态、抽象

17、ECMAScript6怎么写class,为何会出现class?

【仅供参考】

写法：直接用class来定义

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，

新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

18、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能

【仅供参考】

基本的字符串格式化。

将表达式嵌入字符串中进行拼接。

用${}来界定在ES5时我们通过反斜杠。来做多行字符串或者字符串一行行拼

接。

ES6反引号O就能解决类模板字符串的功能

letname='web';

letage=10;

letstr='你好,${name}已经${age}岁了'

str=str.replace(/\$\{(["}]*)\}/g,function(){

returneval(arguments[1]);

))

console,log(str);〃你好，web已经10岁了

19、解构赋值过程及其原理

【仅供参考】

解构赋值：其实就是分解出一个对象的解构，分成两个步骤：

解构赋值过程：

变量的声明

变量的赋值

原理：

ES6变量的解构赋值本质上是“模式匹配”，只要等号两边的模式相同，

左边的变量就会被赋予匹配的右边的值，

如果匹配不成功变量的值就等于undefined

20、介绍下Set、Map的区别？

【仅供参考】

应用场景Set用于数据重组，Map用于数据储存Set：

（1）成员不能重复

（2）只有键值没有键名，类似数组

（3）可以遍历，方法有add,delete,has

Map:

（1）本质上是健值对的集合，类似集合

（2）可以遍历，可以跟各种数据格式转换

三、Vue/React篇

1、React中的事件是什么？

【仅供参考】

在React中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处

理这些事件类似于处理DOM元素中的事件。但是有一些语法差异，如：

用驼峰命名法对事件命名而不是仅使用小写字母。

事件作为函数而不是字符串传递。

事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行

为，只能通过其事件处理程序访问

2、有没有自己实现过相关hooks?说明一下实现思路？

【仅供参考】

自定义Hook是一个函数，其名称以“use”开头，函数内部可以调用其他的

Hooko

3、什么是Redux?

【仅供参考】

Redux是当今最热门的前端开发库之一。它是JavaScript程序的可预测状态

容器，用于整个应用的状态管理。使用Redux开发的应用易于测试，可以在不

同环境中运行，并显示一致的行为

4、useEffect的回调函数为什么无法使用async?

【仅供参考】

React本身并不支持这么做，理由是effectfunction应该返回一个销毁函数

（effect：是指return返回的cleanup函数），如果useEffect第一个参数传

入async,返回值则变成了Promise,会导致react在调用销毁函数的时候报

错：function,applyisundefined0

5、Redux遵循的三个原则是什么？

【仅供参考】

单一事实来源：整个应用的状态存储在单个store中的对象/状态树里。单一

状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。

状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普

通JS对象。就像state是数据的最小表示一样，该操作是对数据更改的最小

表示。

使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函

数。纯函数是那些返回值仅取决于其参数值的函数。

6、React组件生命周期有哪些不同阶段？

【仅供参考】

Initialization：在这个阶段，组件准备设置初始化状态和默认属性。

Mounting：react组件已经准备好挂载到浏览器D0M中。这个阶段包括

componentWi1IMount和componentDidMount生命周期方法。

Updating：在这个阶段，组件以两种方式更新，发送新的props和state状

态。此阶段包括shouldComponenlUpdate、componentWillUpdate和

componentDidUpdate生命周期方法。

Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器D0M中卸载下

来。这个阶段包含componentWi1lUnmount生命周期方法。

除以上四个常用生命周期外，还有一个错误处理的阶段：

ErrorHandling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中

或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含

了componentDidCatch生命周期方法。

7、React中的StrictMode（严格模式）是什么？

【仅供参考】

React的StrictMode是一种辅助组件，可以帮助咱们编写更好的react组

件，可以使用〈StrictMode/＞包装一组组件，并且可以帮咱们以下检查：

验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。

验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。

通过识别潜在的风险预防一些副作用。

8、什么是jsx?

【仅供参考】

在第一发布react时，还引入了一种新的js方言jsx,将原始HTML模板嵌入

到JS代码中。JSX代码本身不能被浏览器读取，必须使用Babel和webpack

等工具将其转换为传统的JS。很多开发人员就能无意识使用JSX,因为它已经

与React结合在一起/

9、什么是Props?

【仅供参考】

Props是React中属性的简写。它们是只读组件，必须保持纯，即不可变。它

们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop送回父

组件。这有助于维护单向数据流，通常用于呈现动态生成的数据

10、vue2和vue3的响应式原理都有什么区别呢？

【仅供参考】

vue2用的是Object,defindProperty但是vue3用的是Proxy

Object.defindProperty缺点:

一次只能对一个属性进行监听，需要遍历来对所有属性监听

对于对象的新增属性，需要手动监听

对于数组通过push、unshift方法增加的元素，也无法监听

Proxy就没有这个问题，可以监听整个对象的数据变化，所以用vue3.0会用

Proxy代替definedPropertyo

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

【仅供参考】

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

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

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

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

间通信。

(1)props/$emit适用父子组件通信

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

开介绍。

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

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

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

$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、$on（）函数有什么用？

【仅供参考】

监听当前实例上的自定义事件。事件可以由vm.$emit触发

13>v-pre的作用

【仅供参考】

可以让元素及元素的子元素不编译解析，这样可以加快vue的解析速度

14、为什么避免v-if和v-for用在一起

【仅供参考】

当Vue处理指令时，v-for比v-if具有更高的优先级，这意味着v-if将分

别重复运行于每个v-for循环中，带来性能方面的浪费。

我们可以把v-if移动到父级(容器)元素，不会再重复遍历列表中的每个

值。取而代之的是，我们只检查它一次，且不会在v-if为否的时候运算v-

fOFo

或者在外层嵌套template(页面渲染不生成dom节点)，在这一层进行v-if判

断，然后在内部进行v-for循环

15、vue常用的修饰符

【仅供参考】

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

prevent防止执行预设的行为同于JavaScript的event.prevenlDefault。

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

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

enter回车键

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

【仅供参考】

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

成)

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

成)

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

数据这时并没有填充)

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

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

【仅供参考】

移除自定义事件监听器。

18、Vue是如何实现数据双向绑定的？

【仅供参考】

如果被问到Vue怎么实现数据双向绑定，大家肯定都会回答通过

Object,defineProperty()对数据进行劫持，但是Object,defineProperty()

只能对属性进行数据劫持，不能对整个对象进行劫持。

同理无法对数组进行劫持，但是我们在使用Vue框架中都知道，Vue能检测到

对象和数组(部分方法的操作)的变化，那它是怎么实现的呢？我们查看相关

代码如下：

/**

*ObservealistofArrayitems.

*/

observeArray(items:Array<any>){

for(leti=0,1=items,length;i<1;i++){

observe(items[i])//observe功能为监测数据的变化

)

)

/**

*对属性进行递归遍历

*/

letchiIdOb=!shallow&&observe(val)//observe功能为监测数据的变

化

通过以上Vue源码部分查看，我们就能知道Vue框架是通过遍历数组和递归

遍历对象，从而达到利用Object,defineProperty()也能对对象和数组(部分

方法的操作)进行监听。

19、举例说明vue事件绑定中有哪些修饰符，分别作用是什么

【仅供参考】

stop-调用event.stopPropagationO0

prevent-调用event.preventDefault()o

capture-添加事件侦听器时使用capture模式。

self-只当事件是从侦听器绑定的元素本身触发时才触发回调。

{keyCode|keyAlias}-只当事件是从特定键触发时才触发回调。

.native-监听组件根元素的原生事件。

once-只触发一次回调。

left-(2.2.0)只当点击鼠标左键时触发。

right-(2.2.0)只当点击鼠标右键时触发。

middle-(2.2.0)只当点击鼠标中键时触发。

passive-(2.3.0)以｛passive:true｝模式添加侦听器

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

【仅供参考】

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

四、Webpack/Rollup篇

1、gulp和webpack区别

【仅供参考】

gulp：是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编

译替代手工实现自动化工作

(1)构建工具

(2)自动化

(3)用于：提高效率一一能够优化前端工作流程，提高工作效率

(4)自动刷新页面，雪碧图，压缩css、js,编译less,检查语法等

(5)使用gulp可以配置你需要的插件，把以前需要手工做的事情让它帮你做

7

webpack：是文件打包工具，可以把项目的各种js文件、css文件等打包合并

成一个或多个文件，主要用于模块化方案，预编译模块的方案

(1)打包工具

(2)模块化识别

(3)用于：编译模块代码方案

两者不是一个工具，不具有可比性，更不冲突

2、webpack-dev-server和http服务器的区别

【仅供参考】

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可

以使用模块热更新，比传统的http服务对开发更加有效。

3、Webpack中Loader和Plugin的区别

【仅供参考】

运行时机1.loader运行在编译阶段2.plugins在整个周期都起作用

使用方式Loader:1.下载2.使用Plugin:1.下载2.引用3.使用

4、webpack的工作原理？

【仅供参考】

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到

JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass,

TypeScripl等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现

后，Webpack还肩负起了优化项目的责任。

5、常用loader

【仅供参考】

css-loader读取合并CSS文件

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

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

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

urlToader将文件转换为base64URI。

vue-loader处理vue文件。

6、谈谈你对Webpack的理解（Webpack是什么？）

【仅供参考】

Webpack是一个模块打包器，可以分析各个模块的依赖关系，最终打包成

bundle静态文件（js>css、jpg）。

webpack是一个静态模块打包器，当webpack处理应用程序时，会递归构建一

个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一

个或多个bundle0

webpack就像一条生产线,要经过一系列处理流程（loader）后才能将源文件转换

成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间

有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。

插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做

处理。webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就

能加入到这条生产线中，去改变生产线的运作。

7、常见Plugins

【仅供参考】

HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle,js

cleanwebPackPlugin打包自动删除上次打包文件

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

【仅供参考】

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

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

module：是开发中的单个模块

9、webpack3和webpack4的区别

【仅供参考】

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

（development/production）production侧重于打包后的文件大小，

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

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

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

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

过滤无用的代码

10、什么是Tree-sharking?

【仅供参考】

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

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

11、ExtractTextPlugin插件的作用

【仅供参考】

ExtractTextPlugin插件的作用是提取出JavaScript代码里的CSS到一个单

独的文件。

对此你可以通过插件的filename属性，告诉插件输出的CSS文件名称是通过

[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名

称，[contenlhash:8]代表根据文件内容算出的8位hash值，还有很多配置

选项可以在ExtractTextPlugin的主页上查到。

12、lazyloading（模块懒加载）

【仅供参考】

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

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

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

import（/*webpackPrefetch:true/'LoginModal'）;

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

import(/webpackPreload:true*/*ChartingLibrary,);

13、sourceMap

【仅供参考】

是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置

配置方式：

例如：devtool：'source-map'

加不同前缀意义：

inline:不生成映射关系文件，打包进main.js

cheap:1.只精确到行，不精确到列，打包速度快2.只管业务代码，不管第三

方模块

module：不仅管业务代码，而且管第三方代码

eval:执行效率最快，性能最好

最佳实践：

开发环境：cheap-module-eval-source-map

线上环境：cheap-mudole-source-map

14、TreeShaking技术

【仅供参考】

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

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

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

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

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

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

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

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

代码。

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

【仅供参考】

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

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

复加载。

16、有哪些常见的Plugin?他们是解决什么问题的？

【仅供参考】

html-webpack-plugin：可以复制一个有结构的html文件，并自动引入打包输

出的所有资源(JS/CSS)

clean-webpack-plugin：重新打包自动清空distH录

mini-css-extract-plugin：提取js中的css成单独文件

optimize-css-assets-webpack-plugin：压缩css

uglifyjs-webpack-plugin：压缩js

commons-chunk-plugin：提取公共代码

define-plugin：定义环境变量

17、如何提高Webpack构建速度

【仅供参考】

组件懒加载、路由懒加载、开启gzip、公共的第三方包上cdn、配置

include/exclude缩小Loader对文件的搜索范围、配置cache缓存Loader对

文件的编译副本、配置resolve提高文件的搜索速度

18、webpack,rollup和parcel对比？

【仅供参考】

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

插件多

rollup用标准化的格式(es6)来写代码,通过减少死代码(tree-shaking)

尽可能地缩小包体积

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

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

transformations

二者的细微区别在于：

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

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

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

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

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

19、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/proniise'即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

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

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

Stage1-建议（Proposal）：这是值得跟进的。

Stage2-草案（Draft）：初始规范。

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

Stage4-完成（Finished）：将添加到下一个年度版本发布中。

20、怎么配置单页应用？怎么配置多页应用？

【仅供参考】

单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入

口即可，这里不再赘述

多页应用的话，可以使用webpack的AutoWebPlugin来完成简单自动化的构

建，但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的

是：

每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比

如，每个页面都引用了同一套CSS样式表

随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够

灵活，避免每次添加新页面还需要修改构建配置

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

1、哪些方法可以提升网站前端性能?

【仅供参考】

精灵图合并，减少HTTP请求；压缩HTML、CSS、JavaScript文件；使用CDN托

管静态文件；使用localstorage缓存和mainfest应用缓存。

2、axios和fetch区别对比

【仅供参考】

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，本质上也

是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，

它本身具有以下特征

从浏览器中创建XMLHttpRequest

支持PromiseAPI

客户端支持防止CSRF

提供了一些并发请求的接口(重要，方便了很多的操作)

从node,js创建http请求

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

fetch优势：

语法简洁，更加语义化

基于标准Promise实现，支持async/await

同构方便，使用isomorphic-fetch

更加底层，提供的API丰富(request,response)

脱离了XHR,是ES规范里新的实现方式

fetch存在问题

fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不

是那么舒服，需要进行封装。

fetch只对网络请求报错，对400,500都当做成功的请求，服务器返回400,

500错误码时并不会reject,只有网络错误这些导致请求不能完成时，fetch

才会被rejecto

fetch默认不会带cookie,需要添加配置项：fetch(url,{credentials:

'include'})

fetch不支持abort,不支持超时控制，使用setTimeoul及Promise,reject的

实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费

fetch没有办法原生监测请求的进度，而XHR可以

3、如何优化渲染?

【仅供参考】

具体方法如下。

通过HTML设置Viewport元标签，Viewport可以加速页面的渲染，如以下代

码所示。

<metaname="viewport"content=//width=device=width,initial-scale=l”>

(2)减少DOM节点数量，DOM节点太多会影响页面的渲染，应尽量减少DOM节

点数量。

(3)尽量使用CSS3动画，合理使用requestAnimationFrame动画代替

setTimeout,适当使用canvas动画(5个元素以内使用CSS动画，5个元素以

上使用canvas动画(iOS8中可使用webGL))o

(4)对于高频事件优化Touchmove,Scroll事件可导致多次渲染。

使用requestAnimationFrame监听帧变化，以便在正确的时间进行渲染，增加

响应变化的时间间隔，减少重绘次数。

使用节流模式(基于操作节流，或者基于时间节流)，减少触发次数。

(5)提升GPU的速度，用CSS中的属性(CSS3transitions.CSS33D

transforms.Opacity>Canvas、WebGL、Video)来触发GPU渲染.

4、渲染层面性能优化

【仅供参考】

**「渲染层面」**的性能优化，无疑是如何让代码解析更好执行更快。因此笔

者从以下五方面做出建议。

「CSS策略」：基于CSS规则

「DOM策略」:基于D0M操作

「阻塞策略」：基于脚本加载

「回流重绘策略」：基于回流重绘

「异步更新策略」：基于异步更新

上述五方面都是编写代码时完成，充满在整个项目流程的开发阶段里。因此在

开发阶段需时刻注意以下涉及到的每一点，养成良好的开发习惯，性能优化也

自然而然被使用上了。

渲染层面的性能优化更多表现在编码细节上，而并非实体代码。简单来说就是

遵循某些编码规则，才能将渲染层面的性能优化发挥到最大作用。

**「回流重绘策略」**在渲染层面的性能优化里占比较重，也是最常规的性能

优化之一。上年笔者发布的掘金小册《玩转CSS的艺术之美》使用一整章讲解

回流重绘，本章已开通试读，更多细节请戳这里。

CSS策略

避免出现超过三层的嵌套规则

避免为ID选择器添加多余选择器

避免使用标签选择器代替类选择器

避免使用通配选择器，只对目标节点声明规则

避免重复匹配重复定义，关注可继承属性

DOM策略

缓存DOM计算属性

避免过多DOM操作

使用DOMFragment缓存批量化DOM操作

阻塞策略

脚本与DOM/其它脚本的依赖关系很强：对〈script》设置defer

脚本与DOM/其它脚本的依赖关系不强：对〈script》设置async

回流重绘策略

缓存DOM计算属性

使用类合并样式，避免逐条改变样式

使用display控制DOM显隐，将DOM离线化

异步更新策略

在异步任务中修改DOM时把其包装成微任务

5、网页从输入网址到渲染完成经历了哪些过程？

【仅供参考】

大致可以分为如下7步：

输入网址；

发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；

与web服务器建立TCP连接；

浏览器向web服务器发送http请求；

web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的

url地址）；

浏览器下载web服务器返回的数据及解析html源文件；

生成DOM树，解析css和js,渲染页面，直至显示完成；

6、什么时候会出现资源访问失败?

【仅供参考】

开发过程中，发现很多开发者没有设置图标，而服务器端根目录也没有存放默

认的Favicon,ico,从而导致请求404出现。通常在App的webview里打开

Favicon.ico,不会加载这个Favicon.ico,但是很多页面能够分享。

如果用户在浏览器中打开Favicon,ico,就会调取失败，一般尽量保证该图标

默认存在，文件尽可能小，并设置一个较长的缓存过期时间。另外，应及时清

理缓存过期导致出现请求失败的资源。

7、性能优化六大指标

【仅供参考】

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

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

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

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

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

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

「脚本优化」:脚本在编码时可做的性能优化

FV8引擎优化」：针对V8引擎特征可做的性能优化

8、你知道哪些优化性能的方法？

【仅供参考】

具体方法如下。

(1)减少HTTP请求次数，控制CSSSprite.JavaScript与CSS源码、图片的

大小，使用网页Gzip、CDN托管、data缓存、图片服务器

(2)通过前端模板JavaScript和数据，减少由于HTML标签导致的带宽浪

费，在前端用变量保存Ajax请求结果，每次操作本地变量时，不用请求，减少

请求次数。

(3)用innerhTML代替DOM操作，减少DOM操作次数，优化JavaScript性

能。

(4)当需要设置的样式很多时，设置className而不是直接操作Style。

(5)少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作

(6)避免使用CSS表达式，它又称动态属性，

(7)预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳。

(8)避免在页面的主体布局中使用表，表要在其中的内容完全下载之后才会显

示出来，显示的速度比DIV+CSS布局慢。

9、如