2022年前端面试大全

2022年前端面试大全(一)

一、HTML/CSS篇

1、iframe的优缺点？

【仅供参考】

优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题

Securitysandbox

并行加载脚本

缺点：

iframe会阻塞主页面的Onload事件

即时内容为空，加载也需要时间

没有语意

2、本地存储和会话(事务)存储之间的区别是什么？

【仅供参考】

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时

会话重置存储数据。

3、Websql是HTML5的一个规范吗？

【仅供参考】

不是，许多人把它标记为HTML5,但是它不是HTML5规范的一部分，这个规范

是基于SQLite的

4、cookie和session的区别是什么？

【仅供参考】

区别如下：

(1)cookie数据存放在客户的浏览器上，session数据存放在服务器上。

(2)cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie

欺骗。考虑到安全问题应当使用sessiono

(3)session会在一定时间内保存在服务器上。当访问增多时，会占用较多服

务器的资源。为了减轻服务器的负担，应当使用cookie。

（4）单个cookie保存的数据不能超过4KB,很多浏览器都限制一个站点最多

保存20个cookieo

所以个人建议可以将登录信息等重要信息存放在session中，其他信息（如果

需要保留）可以存放在cookie中。

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

【仅供参考】

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

间的通信

6、行内元素有哪些？块级元素有哪些？空（void）元素有那些？

【仅供参考】

定义：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个

元素都有默认的display值，如div的display默认值为“block"，则为

“块级”元素；span默认display属性值为"inline”，是“行内”元素。

行内元素有：abspanimginputselectstrong（强调的语气）

块级元素有：divulol1idldtddhlh2h3h4…p

空元素：

常见：brhrimginputlinkmeta

不常见：areabasecolcommandembedkeygenparamsourcetrackwbr

7、什么是Websql?

【仅供参考】

Websql是一个在浏览器客户端的结构关系数据库，是浏览器内的本地RDBMS

（关系型数据库管理系统），可以使用SQL查询。

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

【仅供参考】

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

CacheAPI、UserInteractionAPI>DataTransferAPI、CommandAPI、

ConstraintionValidationAPI和HistoryAPI

9、哪些浏览器支持HTML5?

【仅供参考】

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

HTML5

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

【仅供参考】

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

basefonto

11、HTML5为浏览器提供了哪些数据存储方案？

【仅供参考】

在较高版本的浏览器中，提供了sessionStorage：和globalStorage。在

HTML5规范中,用localStorage取代globalStorage。

HTML5中的WebStorage包括两种存储方式,分别是sessionStorage和

localStorage。

sessionStorage用于在本地存储一个会话(session)中的数据，这些数据只

有同一个会话中的页面才能访问，当会话结来后，数据也随之销毁。因此

sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不

会过期的。

localStorage和sessionStorage都具有相同的操作方法，例如setitem,

getltem和removeItem等

12、title与hl的区别？

【仅供参考】

title属性没有明确意义只表示是个标题，hl则表示层次明确的标题，对页面

信息的抓取也有很大的影响。

13、如何显示我们自己画的一个弹框？

【仅供参考】

可以用一个简单的方法，在页面上单击一个按钮，弹出一个弹框，而弹框也是

自己写的一个div。单击前，先把弹框隐藏，onclick事件发生之后就会显示

出来

14、HTML5中如何实现应用缓存？

【仅供参考】

首先，需要指定“manifest”文件，"manifest”文件帮助你定义缓存如何工

作以下是“manifest”文件的结构。

CACHEMANTEEST

#version1.0

/demo,css

/demo,js

/demo,png

所有manifest文件都以“CACHEMANIFEST”语句开始。

#（散列标签）有助于提供缓存文件的版本。

manifest文件的内容类型应是"text/cache-manifesto

创建一个缓存manifest文件后，在HTML页面中提供manifest链接，代码如

下所示。

<htmlmanifest」icketang.appcache”>

第一次运行以上文件时，它会添加到浏览器应用缓存中，在服务器宕机时，页

面从应用缓存中获取数据。

15、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）

【仅供参考】

带单位：px是固定值，而em会参考父元素font-size值计算自身的行高

纯数字：会把比例传递给后代。例如，父级行高为1.5,子元素字体为18px,

则子元素行高为1.5*18=27px

百分比：将计算后的值传递给后代

16、画一条0.5px的直线？

【仅供参考】

考查的是css3的transform

height:Ipx;

transform:scale（0.5）;

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

【仅供参考】

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

CSS雪碧图

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

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

属性值为0时，不加单位

压缩CSS代码

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

影响。

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

【仅供参考】

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

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

解决办法：

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

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

19、如何让文字换行

【仅供参考】

word-wrap,word-break,white-space都可以做到

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;，z>

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

word;z，>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

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

</div>

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

display:flex;，z>

<divstyle=/，flex:1;word-break:break-

word;，z>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

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

</div>

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

【仅供参考】

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

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

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

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

但是没有间隙了

二、JS/ES6/TS篇

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

【仅供参考】

functionshow(){}

functiongetName(){return'牛夫人'}

varflag=show()|getName()

答案：flag值为‘牛夫人’

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

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

2、javascript的内存(垃圾)回收机制？

【仅供参考】

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

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

离开环境标记为离开环境

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

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

记的就是要删除的变量了

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

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

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

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

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

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

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

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

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

现循环引用问题。

3、理解下面代码的区别

【仅供参考】

functionfoo(){//code}()

以function关键字开头的语句会被解析为函数声明，而函数声明是不允许直接

运行的。只有当解析器把这句话解析为函数表达式，才能够直接运行

(functionfoo(){//code..})()

运算符开头的表达式被立即执行

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

【仅供参考】

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

setTimeout(function(){

console,log(i)

},0)

)

答案：5个5

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

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

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

【仅供参考】

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

新)

区别：

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

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

6、箭头函数有哪些特点?

【仅供参考】

不需要function关键字来创建函数

省略return关键字

改变this指向

7、null/undefined的区别

【仅供参考】

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

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

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

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

8、介绍JS有哪些内置对象？

【仅供参考】

数据封装类对象:Object、Array、Boolean,Number>String

其他对象：Function、Arguments、Math、Date、RegExp>Error

ES6新增对象：Symbol>Map、Set>Promises,Proxy、Reflect

9^说一下innerHTML与innerText的作用与区别？

【仅供参考】

作用：都可以获取或者设置元素的内容

区别：innerHTML可以解析内容中的html标签

innerText不能解析内容中的html标签

10、TypeScript的优点

【仅供参考】

1.Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。

2.TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。

3.TypeScript支持强类型或静态类型

4.它使用基于类的面向对象编程。

5.它有助于代码结构。

11、枚举和常量枚举的区别？

【仅供参考】

枚举会被编译时会编译成一个对象，可以被当作对象使用

const枚举会在typescript编译期间被删除，const枚举成员在使用的地方

会被内联进来，避免额外的性能开销

12、TypeScript中如何实现函数重载？

【仅供参考】

要在TypeScript中重载函数，只需创建两个名称相同但参数/返回类型不同的

函数。两个函数必须接受相同数量的参数。这是TypeScript中多态性的重要

组成部分。

例如，你可以创建一个add函数，如果它们是数字，则将两个参数相加，如果

它们是字符串，则将它们连接起来。

functionadd(a:string,b:string):string;

functionadd(a:number,b:number):number;

functionadd(a:any,b:any):any{

returna+b;

)

addC'Hello","Steve");//returns"HelloSteve”

add(10,20);//returns30

13、TypeScript的缺点

【仅供参考】

1.TypeScript需要很长时间来编译代码

2.要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的

定义文件。

3.类型定义文件的质量是一个问题，即如何确保定义是正确的？

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

【仅供参考】

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

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

15、什么是装饰器，它们可以应用于什么？

【仅供参考】

装饰器是一种特殊的声明，它允许你通过使用@<name>注释标记来一次性修改类

或类成员。每个装饰器都必须引用一个将在运行时评估的函数。

例如，装饰器@sealed将对应于sealed函数。任何标有的@56210(^都将用于评

估sealed函数。

functionsealed(target){

//dosomethingwith'target,

)

它们可以附加到：

类声明

方法

配件

特性

参数

注意：默认情况下不启用装饰器。要启用它们，你必须

experimentalDecorators从tsconfig.json文件或命令行编辑编译器选项中的

字段

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{

return"A+”：

)

)

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

17、Typescript的内置类型

【仅供参考】

number、string、boolean^undefined、null、void

18、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所

有key

【仅供参考】

letname=Symbol('name');

letproduct={

[name]:"洗衣机",

“price”:799

)；

Reflect.ownKeys(product);

19、下面Set结构，打印出的size值是多少

【仅供参考】

lets=newSet();

s.add([l]);s.add([1]);

console.log(s.size);

答案：2

两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同

的存储地址，因此并不是相同的值都能存储到Set结构中，所以size为2

20^forEach>forin、forof、for区别

【仅供参考】

for:最原始的数组遍历写法，写法比较麻烦。

forEach:不可以遍历对象，用来遍历数组，中途无法跳出循环，break和

return不凑效。

for...in:主要用来遍历对象的key值，可以遍历数组但是会遍历原型上的某些

键，某些情况下，会以任意的顺序遍历键名(只可遍历数组中所有可枚举的属

性)用hasOwnProperty筛选不遍历原型上的

for...of：语法简单，可以与break、continue和return配合使用，主要用来

遍历数组键值。不会遍历原型链。(

数据结构只要有symbol,iterator属性，就会被视为具有iterator接口，就可

以用for...of循环遍历成员，可用for...of循环遍历的有：数组、set、

map、String、arguments对象、类数组对象)

三、Vue/React篇

1、为什么不直接更新state?

【仅供参考】

如果试图直接更新state,就不会重新渲染组件

需要使用setState()方法更新state,它对state对象进行更新，当state

改变时，组件通过重新渲染来响应

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

【仅供参考】

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

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

通过Ihis.props来获取传入的propso

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

3、你怎样理解“在React中，一切都是组件”这句话

【仅供参考】

组件是React应用UI的构建块。这些组件将整个UI分成小的独立并可重用

的部分。每个组件彼此独立，而不会影响UI的其余部分。

4、useMemo和memo的区别是什么？

【仅供参考】

useMemo是个钩子函数

React,memo。本质是一个高阶组件(HOC),高阶组件和高阶函数类似，高阶函

数是接收一个函数，然后经过一些判断和处理后再返回这个函数；

比如我们常见的防抖、节流函数。对应到高阶组件，就是接收一个组件，然后

经过一些判断和处理后再返回这个组件。

React,memo(),这个高阶组件接收一个组件A作为参数并返回一个组件B,如

果组件B的props没有改变，则组件B会阻止组件A重新渲染。A和B本质上

是同一个组件，但A是否进行重新渲染，需要由Props是否发生改变来决定。

5、什么是Redux?

【仅供参考】

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

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

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

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

【仅供参考】

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

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

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

错：function,applyisundefinedo

7、组件的设计原则

【仅供参考】

⑴页面上每个独立的可视/可交互区域视为一个组件仕匕如页面的头部，尾部，

可复用的区块）

（2）每个组件对应一个''工程”目录，组件所需要的各种资源在这个目录下就近维

护（组件的就近维护思想体现了前端的工程化思想，为前端开发提供了很好的分

治策略，在vue.js中，通过.vue文件将组件依赖的模板，js,样式写在一个

文件中）

（每个开发者清楚开发维护的功能单元，它的代码必然存在在对应的组件目录

中，在该目录下，可以找到功能单元所有的内部逻辑）

（3）页面不过是组件的容器，组件可以嵌套自由组合成完整的页面

第一：容错处理，这个要做好，极端场景要考虑到，

第二：缺省值（默认值）要有，一般把应用较多的设为缺省值

第三：颗粒化，把组件拆分出来.

第四：一切皆可配置，如有必要，组件里面使用中文标点符号，还是英文的标

点符号，都要考虑到

第五：场景化，如一个dialog弹出，还需要根据不同的状态封装成success,

waring,等

第六：有详细的文档/注释和变更历史，能查到来龙去脉，新版本加了什么功能

是因为什么

第七：组件名称，参数prop,emit,名称设计要通俗易懂，最好能做到代码即

注释这种程度

第八：可拓展性，前期可能不需要这个功能，但是后期可能会用上，要预留什

么，要注意什么，心里要有数

第九：规范化,我这个input组件，叫on-change,我另外一个select组件叫

change,

第十：分阶段：不是什么都要一期开发完成看具体业务，如果一个select,我

只是个简单的select功能

8、$on（）函数有什么用？

【仅供参考】

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

9、v-html与v-text区别

【仅供参考】

答案：

v-hlml:可以转义标签和渲染数据

v-text：不能转义标签只能渲染数据

v-text展示效果：<strong>Hello</strong>Vue!

v-html展示效果：HelloVue!

10、Vuex如何区分state是外部直接修改，还是通过mutation方法修改

的？

【仅供参考】

在vuex底层会有一个committing变量，初始值false；当通过mutation方法

修改数据时

把committing变量变成true；如果是直接改变的变量则不改变committing变

J^L

里

11、v-cloak可以解决什么问题

【仅供参考】

v-cloak指令解决vue屏幕闪屏

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]

{display:none)一起用时，这个指令可以隐藏未编译的Mustache标签直

到实例准备完毕。

12、Vue框架怎么实现对象和数组的监听？

【仅供参考】

Vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。

即：

输入框内容变化时，Data中的数据同步变化。即View=>Data的变化。

Data中的数据变化时，文本节点的内容同步变化。即Data=>View的变化。

其中，View变化更新Data,可以通过事件监听的方式来实现，所以Vue的

数据双向绑定的工作主要是如何根据Data变化更新View.,

Vue主要通过以下4个步骤来实现数据双向绑定的：

实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利

用Object,defineProperty()对属性都加上setter和getter。这样的话，

给这个对象的某个值赋值，就会触发setter,那么就能监听到了数据变化。

实现一个解析器Compile：解析Vue模板指令，将模板中的变量都替换成数

据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加

监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更

新。

实现一个订阅者Watcher：Watcher订阅者是Observer和Compile之间通信

的桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性值

变化的消息时，触发解析器Compile中对应的更新函数。

实现一个订阅器Dep：订阅器采用发布-订阅设计模式，用来收集订阅者

Watcher,对监听器Observer和订阅者Watcher进行统一管理。

13、组件间通讯方式

【仅供参考】

props/$emit

(1)父组件向子组件传值(props将数据自上而下传递)

(2)子组件向父组件传递数据($emit和v-on来向上传递信息)

eventBus事件总线($emit/$on)

通过EventBus进行信息的发布与订阅

vuex:

是全局数据管理库，可以通过vuex管理全局的数据流

ref/$refs

ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例

来访问组件的数据和方法

依赖注入(provide/inject)

provide和inject是vue提供的两个钩子，和data、methods是同级的。并

且provide的书写形式和data一样。

provide钩子用来发送数据或方法。

inject钩子用来接收数据或方法

$parent/$children

使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和

方法)。

使用$children可以让组件访问子组件的实例，但是，$children并不能保

证顺序，并且访问的数据也不是响应式的。

$attrs/$listeners

实现组件之间的跨代通信。

14^描述一•下vue在生命周期的beforeMount阶段时，页面是怎么样的

【仅供参考】

beforeMount执行时,数据和虚拟DOM树已经都加载完成,但是这时数据没有渲

染

15、能说下vue-router中常用的hash和history路由模式实现原理吗？

【仅供参考】

(1)hash模式的实现原理

早期的前端路由的实现就是基于location,hash来实现的。其实现原理很简

单，location.hash的值就是URL中#后面的内容。比如下面这个网站，它

的location,hash的值为'#search'：

<url>#search

hash路由模式的实现主要是基于下面几个特性：

URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，

hash部分不会被发送；

hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏

览器的回退、前进按钮控制hash的切换；

可以通过a标签，并设置href属性，当用户点击这个标签后，URL的hash

值会发生改变；或者使用JavaScript来对loaction.hash进行赋值，改变

URL的hash值；

我们可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转

(渲染)。

(2)history模式的实现原理

HTML5提供了HistoryAPI来实现URL的变化。其中做最主要的API有以下

两个：history.pushState()和history.repalceState()«这两个API可以

在不进行刷新的情况下，操作浏览器的历史纪录。

唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，

如下所示：

window,history.pushState(null,null,path);

window,history.replaceState（null,null,path）;

history路由模式的实现主要基于存在下面几个特性：

pushState和repalceState两个API来操作实现URL的变化；

我们可以使用popstate事件来监听url的变化，从而对页面进行跳转（渲

染）；

history.pushState（）或history.replaceState（）不会触发popstate事

件，这时我们需要手动触发页面跳转（渲染）

16、说一下vm.$refs的作用

【仅供参考】

一个对象，持有注册过refattribute的所有DOM元素和组件实例。

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

【仅供参考】

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

18、Vue原理总结

【仅供参考】

【模板编译】将template模板，经过编译系统后生成VNode,（模板字符串

-*AST-Render函数）

【渲染】然后再通过渲染系统来将VNode生成真实D0M

（document.createElement&&Mount挂载到真实DOM节点上）

【响应式】通过响应式系统对数据进行监听，当数据发生改变时，触发依赖项

（组件）

[Diff&Patch]组件内收到通知后，会通过diff算法对比VNode的变化，尽

可能复用代码，找出最小差异，保证性能消耗最小。

【渲染】拿到需要新增/删除/修改的VNode后，逐一去操作真实D0M进行修改

（通过选择器选择到对应真实D0M节点进行修改）

19、v-cloak指令的作用

【仅供参考】

用于防止闪屏，防止页面出现{{}}

20、Vue中的key有什么作用？

【仅供参考】

key是为Vue中vnode的唯一标记，通过这个key,我们的diff操作可以

更准确、更快速。

Vue的diff过程可以概括为：oldCh和newCh各有两个头尾的变量

oldStartIndex>oldEndlndex和newStartIndex>newEndIndex,它们会新节

点和旧节点会进行两两对比，即一共有4种比较方式：newStartlndex和

oldStartlndex、newEndlndex和oldEndlndex、newStartlndex和

oldEndlndex、newEndlndex和oldStartlndex,如果以上4种比较都没匹

配，如果设置了key,就会用key再进行比较，在比较的过程中，遍历会往中

间靠，一旦Startldx>Endldx表明oldCh和newCh至少有一个已经遍历完

了，就会结束比较。

所以Vue中key的作用是：key是为Vue中vnode的唯一标记，通过这个

key,我们的diff操作可以更准确、更快速!

更准确：因为带key就不是就地复用了，在sameNode函数a.key===b.key

对比中可以避免就地复用的情况。所以会更加准确。

更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式更

快，源码如下：

functioncreateKeyToOldldx(children,beginldx,endldx){

leti,key

constmap={}

for(i=beginldx;i<=endldx;++i){

key=children[i].key

if(isDef(key))map[key]=i

)

returnmap

)

四、Webpack/Rollup篇

1、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文件，并且可以

过滤无用的代码

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

【仅供参考】

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

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

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

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

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

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

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

的处理；

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

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

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

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

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

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

内容写入到文件系统。

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

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

改变Webpack的运行结果。

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

【仅供参考】

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

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

4、TreeShaking技术

【仅供参考】

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

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

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

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

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

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

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

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

代码。

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

【仅供参考】

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

口即可，这里不再赘述

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

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

是：

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

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

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

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

6、webpack的核心概念

【仅供参考】

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

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

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

为./dist

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

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

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

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

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

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

7、plugin的作用

【仅供参考】

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

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

8、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）：将添加到下一个年度版本发布中。

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

【仅供参考】

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

复用模块。

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

块。

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

webpack来构建。

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

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

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

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

SourceMap一同上传。

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

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

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

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

的模块里。

10、webpack如何配置多入口文件？

【仅供参考】

entry:{

home:resolve(_dirname,"src/home/index.js"),

about:resolve(_dirname,"src/about/index.Js")

)

用于描述入口的对象。你可以使用如下属性：

dependOn:当前入口所依赖的入口。它们必须在该入口被加载前被加载。

filename:指定要输出的文件名称。

import:启动时需加载的模块。

1ibrary:指定library选项，为当前entry构建一个library。

runtime:运行时chunk的名字。如果设置了，就会创建一个新的运行时

chunko在webpack5.43.0之后可将其设为false以避免一个新的运行时

chunko

publicPath:当该入口的输出文件在浏览器中被引用时，为它们指定一个公共

URL地址

11、sourceMap

【仅供参考】

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

配置方式：

例如：devtool：'source-map'

加不同前缀意义：

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

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

方模块

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

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

最佳实践：

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

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

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

【仅供参考】

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

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

复加载。

13、Loader机制的作用是什么？

【仅供参考】

webpack默认只能打包js文件，配置里的module,rules数组配置了一组规

则，告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换打包成

JSo

注意：

use属性的值需要是一个由Loader名称组成的数组，Loader的执行顺序是由

后到前的；

每一个Loader都可以通过URLquerystring的方式传入参数，例如css-

loader?minimize中的minimize告诉css-loader要开启CSS压缩。

14、Plugin（插件）的作用是什么？

【仅供参考】

Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它给

Webpack带来了很大的灵活性。

Webpack是通过plugins属性来配置需要使用的插件列表的。plugins属性是

一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过

构造函数传入这个组件支持的配置属性。

15、什么是Tree-sharking?

【仅供参考】

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

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

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

【仅供参考】

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

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

module：是开发中的单个模块

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

【仅供参考】

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

出的所有资源（JS/CSS）

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

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

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

uglifyjs-webpack-plugin：压缩js

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

define-plugin：定义环境变量

18、Webpack的打包过程/打包原理/构建流程？

【仅供参考】

初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler

编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中

的内容，再找到该Module依赖的Module,递归的进行编译处理

输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系

统中

细节：

WebpackCLI通过yargs模块解析CLI参数，并转化为配置对象option（单

入口：Object,多入口：Array）,调用webpack（option）创建compiler对

象。

如果有option.plugin,则遍历调用plugin,apply（）来注册plugin,

判断是否开启了watch,如果开启则调用compiler,watch,否则调用

compiler.run,开始构建。

创建Compilation对象来收集全部资源和信息，然后触发make钩子。

make阶段从入口开始递归所有依赖，

每次遍历时调用对应Loader翻译文件中内容，然后生成AST,遍历AST找到下

个依赖继续递归，

根据入口和模块之间关系组装chunk,输出到dist中的一个文件内。

在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的

事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的

api改变webpack的运行结果

19、webpack的工作原理？

【仅供参考】

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

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

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

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

20、webpack,rollup和parcel对比？

【仅供参考】

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

插件多

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

尽可能地缩小包体积

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

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

transformations

二者的细微区别在于：

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

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

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

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

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

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

1、针对CSS,如何优化性能？

【仅供参考】

具体优化方法如下。

（1）正确使用display属性，display属性会影响页面的渲染，因此要注意

以下几方面。

display:inline后不应该再使用widthsheight^margin、padding和

floato

display:inline-block后不应该再使用floato

display:block后不应该再使用vertical-aligno

display:table-*后不应该再使用margin或者floato

（2）不滥用floato

（3）不声明过多的font-size。

（4）当值为0时不需要单位。

（5）标准化各种浏览器前缀，并注意以下几方面。

浏览器无前缀应放在最后。

CSS动画只用（-webkit-无前缀）两种即可。

其他前缀包括-webkit-、-moz-、-ms-、无前缀(Opera浏览器改用blink内

核，所以-0-被淘汰)

(6)避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间

也长。

(7)尽量使用id、class选择器设置样式(避免使用style属性设置行内样

式)

(8)尽量使用CSS3动画。

(9)减少重绘和回流。

2、针对HTML,如何优化性能？

【仅供参考】

具体方法如下。

(1)对于资源加载，按需加载和异步加载

(2)首次加载的资源不超过1024KB,即越小越好。

(3)压缩HTML、CSS、JavaScript文件。

(4)减少DOM节点。

(5)避免空src(空src在部分浏览器中会导致无效请求)。

(6)避免30*、40*、50*请求错误

(7)添加Favicon,ico,如果没有设置图标ic。，则默认的图标会导致发送一

个404或者500请求。

3、请说一下你用过的浏览器存储，并说出它们的区别？

【仅供参考】

sessionStorage

localStorage

cookie

相同点：三者都是在浏览器本地存放数据；

区别：

sessionStorage：数据只存在于会话期间

localStorage：数据永久存储

cookie：数据默认会话结束时过期，但可以设置过期时间，在请求服务端，浏

览器会默认把cookie数据发送给服务器，cookie能存放的数据相对较小

4、性能优化六大指标

【仅供参考】

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

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

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

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

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

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

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

PV8引擎优化J：针对V8引擎特征可做的性能优化

5、大文件上传断点续传

【仅供参考】

大文件上传

前端上传大文件时使用Blob,prototype,slice将文件切片，并发上传多个切

片，最后发送一个合并的请求通知服务端合并切片

服务端接收切片并存储，收到合并请求后使用流将切片合并到最终文件

原生XMLHttpRequest的upload,onprogress对切片上传进度的监听

使用Vue计算属性根据每个切片的进度算出整个文件的上传进度

断点续传

使用spark-md5根据文件内容算出文件hash

通过hash可以判断服务端是否已经上传该文件，从而直接提示用户上传成功

(秒传)

计算hash耗时的问题，不仅可以通过web-workder,还可以参考React的

FFiber架构，通过requestldleCallback来利用浏览器的空闲时间计算，也不

会卡死主线程

通过XMLHttpRequest的abort方法暂停切片的上传

上传前服务端返回已经上传的切片名，前端跳过这些切片的上传

6、对MutationObserver的理解及应用

【仅供参考】

MutationObserver接口提供了监视对D0M树所做更改的能力。它被设计为旧的

MutationEvents功能的替代品，该功能是DOM3Events规范的一部分。

disconnect()阻止MutationObserver实例继续接收的通知，直到再次调用其

observe。方法，该观察者对象包含的回调函数都不会再被调用。

observe。配置MutationObserver在D0M更改匹配给定选项时，通过其回调函

数开始接收通知。

takeRecords()从MutationObserver的通知队列中删除所有待处理的通知,并

将它们返回到MutationRecord对象的新Array中。

7、描述浏览器的渲染过程？，D0M树和渲染树的区另U?

【仅供参考】

浏览器的渲染过程：

解析HTML构建DOM(DOM树)，并行请求css/image/js

CSS文件下载完成，开始构建CSSOM(CSS树)

CSSOM构建结束后和DOM一起生成RenderTree(渲染树)

布局(Layout)：计算出每个节点在屏幕中的位置

显示(Painting)：通过显卡把页面画到屏幕上

D0M树和渲染树的区别：

D0M树与HTML标签---对应，包括head和隐藏元素

渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个

节点都有对应的css属性

8、如何设置DNS缓存？

【仅供参考】

在浏览器地址栏中输入URL以后，浏览器首先要查询域名(hostname)对应服

务器的IP地址，一般需要耗费20~120ms的时间。

DNS查询完成之前，浏览器无法识别服务器IP,因此不下载任何数据。基于性

能考虑，ISP运营商、局