历年前端大厂面试必备

历年前端大厂面试必备(一)

一、HTML/CSS篇

1、如何刷新浏览器的应用缓存？

【仅供参考】

应用缓存通过变更，”标签后的版本号来刷新，如下所示：

CACHEMANIFEST

#version2.0

/icketang.css

/icketang.js

/icketang.png

NETWORK：

login,php

2、HTML5如何实现跨域？

【仅供参考】

在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。

response.setHeader(z，Access-Control-Allow-Originzz,〃*〃)；

response.setHeader(zzAccess-Control-Allow-Methodsz/,“POST")；

response.setHeader(，zAccess-Control-Allow-Headers，z,z，x-requested-with,content-

type")；

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

【仅供参考】

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

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

【仅供参考】

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

<footer>0

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

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

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

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

和联系信息

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

【仅供参考】

第1/26页

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的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推

送到客户端，而不需要客户端以一定的时间间隔去轮询。

6、本地存储的数据有生命周期吗？

【仅供参考】

本地存储的数据没有生命周期，它将一直存储数据，直到用户从浏览器清除或者使用

JavaScript代码移除。

7、应用缓存中的回退是什么？

【仅供参考】

应用缓存中的回退会帮助你指定在服务器不可访问时，显示某文件。例如在下面的manifest文

件中，如果用户输入了“/home”，同时服务器不可到达，“404htm”文件应送达。

FALLBACK：

/home//404.html

8、HTML5新增了哪些功能AP?

【仅供参考】

新增的功能API包括MediaAPI、TextTrackAPI、ApplicationCacheAPI、User

Interaction、DataTransferAPI、CommandAPI、ConstraintValidationAPI、History

API

9、如何在页面上实现一个圆形的可点击区域

【仅供参考】

1map+area或者svg

2、border-radius

3、纯js实现，一个点不在圆上的算法

10、简述一下你对HTML语义化的理解？

【仅供参考】

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样

式CSS情况下也以一种文档格式显示，并且是容易阅读的；

第2/26页

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

【仅供参考】

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

12、什么是SVG?

【仅供参考】

SVG即可缩放失量图形(ScalableVectorGraphics)0它是基于文本的图形语言，使用文

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

13、子元素如何垂直水平居中？你会用哪几种方式？不使用margin和padding的情况下

【仅供参考】

方法一：使用flex,无论子元素是行级元素还是块级元素，都能搞定

.parent{

display:flex;

justify-content:center;//水平居中

align-items:center;//垂直居中

)

方法二：如果子元素是行级元素，text-align和line-height就可以解决

.parent{

height:200px;

width:200px;

text-align:center;

line-height:200px;//Sameasheight

)

如果子元素是块级元素，使用table-cell+vertical-align也可以解决

.parent{

display:table-cell;

vertical-align:middle;

)

.child{

margin:0auto;

)

方法三：transform可以解决

第3/26页

.parent{

position:relative;

)

.child{

position:absolute;

top:50%;

left:50%;11从相对父元素宽高50%的地方开始绘制子元素

transform:translate(-50%,-50%);//把绘制好的子元素，往上和左边，平移子元素50%

的宽高

)

14、无样式内容闪烁(FOUC)FlashofUnstyleContent**

【仅供参考】

@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导

入完成之间会有一段时间页面上的内容是没有样式的。

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载

完之后再下载HTML文件，这样先布局好，就不会出现F0UC问题。

15、vertical-align什么时候生效

【仅供参考】

父元素(inline-block\block)必须含有line-height(inline元素有无皆可),子元素中的

(inline-block/inline元素)vertical-align才能起作用

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

元素

16、我们会在写css的时候做一些标签选择器的初始化样式？为什么？比如：

【仅供参考】

body,ul,ol,li,p,hl,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0

;border:。；}

body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-

family:"SimSun","宋体","ArialNarrow”;}

ul,ol{list-style-type:none;}

select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}

a:link{color:#009;}

a:visited{color:#800080;}

a:hover,a:active,a:focus{color:4c00;text-decoration:underline;}

第4/26页

为了保证默认的标签样式在不同浏览器能有一致的效果

17、如何让文字换行

【仅供参考】

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-widt邸艮制，效果一样。

〈divstyle二〃border:lpxsolidred;width:200px;height:200px;display:flex;〃>

〈divstyle="flex:1;word-wrap:break­

word;z/>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

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

</div>

〈divstyle二〃border:lpxsolidred;width:200px;height:200px;display:flex;〃>

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

word;，z>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

〈divstyle="min-width:lOOpx;border:lpxsolidgreenzz>sss</div>

</div>

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

【仅供参考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

}

/*方法2*/

,border(

border-image:url(border.png)

)

/*方法3*/

第5/26页

.border{

box-shadow:000lpx#000;

)

19、CSSSprite(雪碧图，精灵图)是什么，谈谈这个技术的优缺点？

【仅供参考】

就是把很多图标合并到一张图上，然后根据图片的位置(background-position)加上显示的宽

高来控制具体用哪个图标，这样可以减少网络请求，但是制作和使用会显得复杂一些。

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

【仅供参考】

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

属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

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

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

二、JS/ES6/TS篇

1、请说一下你常用的字符串方法(至少七个)

【仅供参考】

trimO：去首尾空格

split(sep,limit)：将字符串分割为字符数组，limit为从头开始执行分割的最大数量

indexOf(str):返回str在父串中第一次出现的位置，若没有则返回T

lastlndexOf(str):返回str在父串中最后一次出现的位置，若没有则返回T

substr(start,length)：从字符索引start的位置开始，返回长度为length的子串

substring(from,to)：返回字符索引在from和to(不含)之间的子串

slice(start,end)：返回字符索引在start和end(不含)之间的子串

toLowerCase()：将字符串转换为小写

toUpperCaseO：将字符串转换为大写

replace(strl,str2):strl也可以为正则表达式，用str2替换strl

concat(strl,str2,...):连接多个字符串,返回连接后的字符串的副本

match(regex):搜索字符串，并返回正则表达式的所有匹配

charAt(index):返回指定索引处的字符串

charCodeAt(index):返回指定索引处的字符的Unicode的值

fromCharCode():将Unicode值转换成实际的字符串

search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置

valueOfO：返回原始字符串值

2、for循环与forEach循环的区别？

【仅供参考】

第6/26页

for循环中可以使用break、continue不用使用return因为它有循环体，且不是函数；

forEach循环不能使用break、continue,可以return,因为它执行的是函数；

3、怎么降维数组[[1,2],[3,4]]->[1,2,3,4]

【仅供参考】

使用递归循环，把所有元素放到一个新数组

Array,prototype,concat.apply(口,[[1,2],[3,41]);

4、如何使用JS删除cookie

【仅供参考】

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

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

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

5、图片img标签title与alt属性的区别

【仅供参考】

title属性：光标移入要显示图片文字

alt属性：当图片加载失败时要显示的文字

6、var、let、const区别？

【仅供参考】

var存在变量提升。

let只能在块级作用域内访问。

const用来定义常量，必须初始化，不能修改(对象特殊)

7、基本数据类型和引用数据类型有什么区别？

【仅供参考】

(1)变量直接赋值时：

基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据。

引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据。

(2)两者在内存中的存储位置：

基本数据类型存储在栈中。

引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。

8^toStringO与valueOf()的区别

【仅供参考】

toStringO方法返回一个表示该对象的字符串。

valueOfO方法返回指定对象的原始值，如果对象没有原始值，贝UvalueOf将返回对象本身

9、null/undefined的区别

第7/26页

【仅供参考】

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

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

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

undefinedo使用typeof运算得到"undefined",

10、事件绑定和普通事件有什么区别？

【仅供参考】

普通事件会覆盖掉，只执行后者方法

dom.onelick=function(){}

事件绑定不会覆盖掉，会依次执行

addEventListener('click),function(){},true)

11、请说出三种减低页面加载时间的方法

【仅供参考】

压缩css、js文件

合并js、css文件，减少http请求(精灵图)

外部js、css文件放在最底下

减少dom操作，尽可能用变量替代不必要的dom操作

12、说一下innerHTML与innerText的作用与区别？

【仅供参考】

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

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

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

13、如何在TypeScript中实现继承

【仅供参考】

继承是一种从另一个类获取一个类的属性和行为的机制。继承成员的类称为基类，继承这些成

员的类称为派生类。

classShape{

Area:number

constructor(area:number){

this.Area=area

)

)

classCircleextendsShape{

display():void{

console,log(“圆的面积：“+this.Area)

第8/26页

varobj=newCircle(320);

obj.display()

14、TypeScript中？.，？？，！：，_,**等符号的含义？

【仅供参考】

?.可选链

??类似与短路或，？?避免了一些意外情况，0,NaN以及〃"，false被视为false值。只有

undefind,null被视为false值。

!.在变量名后添加！，可以断言排除undefined和null类型

_,声明该函数将被传递一个参数，但您并不关心它

!：待会分配这个变量，ts不要担心

**求累

15、TypeScript支持哪些面向对象的术语

【仅供参考】

1.模块

2.类

3.接口

4.继承

5.数据类型

6.成员函数

16、TS的接口是什么意思？

【仅供参考】

接口是在我们的应用程序中充当契约的结构，它定义了要遵循的类的语法，这意味着实现接口的

类必须实现它的所有成员.它不能被实例化，但是可以被实现它的类对象引用。

interfaceinterface_name{

//字段声明

//方法声明

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

【仅供参考】

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

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

避免额外的性能开销

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

【仅供参考】

lets=newSet();

第9/26页

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

console.log(s.size);

答案：2

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

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

19、理解async/await以及对Generator的优势

【仅供参考】

async/await的介绍：

asyncawait是用来解决异步的，async函数是Generator函数的语法糖

使用关键字async来表示，在函数内部使用await来表示异步

async函数返回一个Promise对象，可以使用then方法添加回调函数

当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，

再接着执行函数体内后面的语句

async较Generator的优势：

(1)内置执行器。Generator函数的执行必须依靠执行器，而Aysnc函数自带执行器，

调用方式跟普通函数的调用一样

(2)更好的语义。async和await相较于*和yield更加语义化

(3)返回值是Promise。async函数返回的是Promise对象，

比Generator函数返回的Iterator对象方便，可以直接使用then0方法进行调用

20、Promise构造函数是同步执行还是异步执行，那么then方法呢？

【仅供参考】

创建Promise时，传入的回调函数的执行，是同步的

promise对象上then函数中的回调执行，是异步的

三、Vue/ReactjB

1、什么是propdrilling,如何避免？

【仅供参考】

在构建React应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法

是将一个prop从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做prop

drillingo

propdrilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。

为了避免propdrilling,一种常用的方法是使用ReactContext0通过定义提供数据的

Provider组件，并允许嵌套的组件通过Consumer组件或useContextHook使用上下文数据

2、解释Reducer的作用

【仅供参考】

第10/26页

Reducers是纯函数，它规定应用程序的状态怎样因响应ACTION而改变。Reducers通过接受

先前的状态和action来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪

种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态

3、你对“单一事实来源”有什么理解？

【仅供参考】

Redux使用“Store”将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在

Store中，并且它们从Store本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并

调试或检查程序

4、这三个点(...)在React干嘛用的？

【仅供参考】

扩展运算符或者叫展开操作符，对于创建具有现有对象的大多数属性的新对象非常方便，在更

新state时经常这么用

5、什么是虚拟D0M?

【仅供参考】

虚拟DOM是真实DOM在内存中的表示，ul的表示形式保存在内存中，并且与实际的D0M同步，这是

一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和

6、怎样解释React中render0的目的

【仅供参考】

每个React组件强制要求必须有一个render()o它返回一个React元素，是原生DOM组件的

表示。如果需要渲染多个HTML元素，则必须将它们组合在一个封闭标记内，例如〈form〉、

〈group＞、＜p＞等。此函数必须保持纯净，即必须每次调用时都返回相同的结果

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

【仅供参考】

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

需要使用setState()方法更新state,它对state对象进行更新，当state改变时，组件通过重

新渲染来响应

8、Redux有哪些优点？

【仅供参考】

Redux的优点如下：

结果的可预测性-由于总是存在一个真实来源，即store,因此不存在如何将当前状态与动

作和应用的其他部分同步的问题。

可维护性-代码变得更容易维护，具有可预测的结果和严格的结构。

服务器端渲染-你只需将服务器上创建的store传到客户端即可。这对初始渲染非常有用，

并且可以优化应用性能，从而提供更好的用户体验。

第11/26页

开发人员工具-从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。

社区和生态系统-Redux背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组

成的大型社区为库的改进做出了贡献，并开发了各种应用。

易于测试-Redux的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。

组织-Redux准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单

9、依赖其它数据计算生成一个新的数据属性；

【仅供参考】

2、当里边依赖的其它数据发生改变，就会重新计算，

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

【仅供参考】

状态管理模式+库

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

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

新】

$store.state,count

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

inc(state,参数唯一){}

$store.commitCinc',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、$on()函数有什么用?

【仅供参考】

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

12、组件间通讯方式

【仅供参考】

props/$emit

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

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

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

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

第12/26页

vuex:

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

ref/$refs

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

据和方法

依赖注入(provide/inject)

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

式和data一样。

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

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

$parent/$children

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

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

问的数据也不是响应式的。

$attrs/$listeners

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

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

【仅供参考】

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

速。

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

oldEndlndex和newStartlndex、newEndIndex,它们会新节点和旧节点会进行两两对比，即一

共有4种比较方式:newStartlndex和oldStartlndex、newEndlndex和oldEndlndex、

newStartIndex和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){

第13/26页

key=children[i].key

if（isDef（key））map[key]=i

）

returnmap

}

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

【仅供参考】

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

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

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

【仅供参考】

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

16、Vue原理总结

【仅供参考】

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

数）

【渲染】然后再通过渲染系统来将VNode生成真实DOM（document.createElement&&Mount挂载

到真实DOM节点上）

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

[Diff&Patch]组件内收到通知后，会通过diff算法对比VNode的变化，尽可能复用代码，找

出最小差异，保证性能消耗最小。

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

到对应真实D0M节点进行修改）

17、什么是Proxy?

【仅供参考】

Proxy：代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

Proxy：对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对

外界的访问进行改写。

Proxy是ES6中新增的一个特性JavaScript中用来表示由它来‘代理'某些操作

Proxy是ES6中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些

操作。Proxy让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模

式中的代理模式。

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过

这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

使用Proxy的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性

前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。从而可以让对

象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。

第14/26页

18、说一下v-model的作用

【仅供参考】

v-model：

双向绑定，用于表单元素绑定数据，数据的改变会响应到页面；

页面表单元素value的改变，同样也会响应到数据

19、说一下vm.$once()的作用

【仅供参考】

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

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

【仅供参考】

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

对数据进行劫持，但是Object,definePropertyO只能对属性进行数据劫持，不能对整个对象

进行劫持。

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

分方法的操作)的变化，那它是怎么实现的呢？我们查看相关代码如下：

/**

*ObservealistofArrayitems.

*/

observeArray(items:Array<any>){

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

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

)

/**

*对属性进行递归遍历

*/

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

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

达到利用Object,definePropertyO也能对对象和数组(部分方法的操作)进行监听。

四、Webpack/RollupM

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

【仅供参考】

第15/26页

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

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

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

【仅供参考】

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

(JS/CSS)

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

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

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

uglifyjs-webpack-plugin：压缩js

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

define-plugin：定义环境变量

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

【仅供参考】

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件

url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容

注入到代码中去

source-map-loader：加载额外的SourceMap文件，以方便断点调试

image-loader：加载并且压缩图片文件

babel-loader：把ES6转换成ES5

css-loader：加载CSS,支持模块化、压缩、文件导入等特性

style-loader：把CSS代码注入到JavaScript中，通过D0M操作去加载CSS。

eslint-loader：通过ESLint检查JavaScript代码

4、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文

件，并且可以过滤无用的代码

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

【仅供参考】

entry:{

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

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

第16/26页

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

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

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

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

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

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

5.43.0之后可将其设为false以避免一个新的运行时chunko

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

6、webpack的核心概念

【仅供参考】

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

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

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

Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的

Entry开始递归找出所有依赖的模块。

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

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

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

些事件的发生，在特定时机做对应的事情。

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

【仅供参考】

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

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

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

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

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

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

编写的。并且如果ES5是经过转换的，请最好连同SourceMap一同上传。

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

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

块应用者再次打包时出现底层模块被重复打包的情况。

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

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

【仅供参考】

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

遇到哪些文件时使用哪些Loader去加载和转换打包成js。

注意：

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

第17/26页

每一个Loader都可以通过URLquerystring的方式传入参数，例如cssToader?minimize中

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

9、什么是Tree-sharking?

【仅供参考】

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

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

10、理解babel-preset-env

【仅供参考】

babel-preset-es2015:可以将es6的代码编译成es5.

babel-preset-es2016:可以将es7的代码编译为es6.

babel-preset-es2017:可以将es8的代码编译为es7.

babel-preset-latest:支持现有所有ECMAScript版本的新特性

11、plugin的作用

【仅供参考】

plugin是一个类，类中有一个apply()方法，主要用于Plugin的安装，可以在其中监听一些来自

编译器发出的事件，在合适的时机做一些事情。

12、lazyloading(模块懒加载)

【仅供参考】

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

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

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

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

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

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

13、HMR热模块更新

【仅供参考】

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

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

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

if(module,hot){

module,hot.acceptC./library.jsJ,function0{

//Dosomethingwiththeupdatedlibrarymodule---

})；

第18/26页

14、Plugin(插件)的作用是什么？

【仅供参考】

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

很大的灵活性。

Webpack是通过plugins属性来配置需要使用的插件列表的。plugins属性是一个数组，里面的

每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置

属性。

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

【仅供参考】

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

新，比传统的http服务对开发更加有效。

16、Webpack的基本功能有哪些？

【仅供参考】

代码转换:TypeScript编译成JavaScript、SCSS编译成CSS等等

文件优化：压缩JavaScript、CSS、html代码，压缩合并图片等

代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件

自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过

自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

17、webpack的工作原理？

【仅供参考】

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

其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等)，并将其转换和打包为合

适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

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

【仅供参考】

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

一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。

grunt和gulp是基于任务和流(TasksStream)的。

类似jQue:ry,找到一个(或一类)文件，对其做一系列链式操作，更新流上的数据，整条链式

操作构成了一个任务，多个任务就构成了整个web的构建流程。

webpack是基于入口的。

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

文件，用Plugin来扩展webpack功能。

19、sourceMap

第19/26页

【仅供参考】

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

配置方式：

例如：devtool：'source-map'

加不同前缀意义：

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

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

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

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

最佳实践：

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

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

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

【仅供参考】

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

化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的JavaScript对象保存

在内存中。

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

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

webpack暴露的API对代码变化进行监控，并且告诉webpack,将代码打包到内存中。

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

重新打包。当我们在配置文件中配置了devServer.watchContentBase为true的时候，Server

会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器端对应用进行livereloado

注意，这儿是浏览器刷新，和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的配置决定是刷新浏览器呢还是进行模块热更

新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。IIotModuleReplacement.runtime

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

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

包含了所有要更新的模块的hash值，获取到更新列表后，该模块再次通过jsonp请求，获取

到最新的模块代码。

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

第20/26页

比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新

模块间的依赖引用。最后一步，当HMR失败后，回退到livereload操作，也就是进行浏览

器刷新来获取最新打包代码。

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

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

【仅供参考】

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

localstorage缓存和mainfest应用缓存。

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

【仅供参考】

具体方法如下。

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

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

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

(4)减少DOM节点。

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

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

(7)添加Favicon,ico,如果没有设置图标ico,则默认的图标会导致发送一个404或者500请

求。

3、性能优化六大指标

【仅供参考】

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

的特征将指标划分为以下六方面。

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

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

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

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

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

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

4、常见的浏览器内核有哪些？

【仅供参考】

Trident内核：IE,MaxThon,TT,TheWorld,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：0pera7及以上。[Opera内核原为：Presto,现为：Blink;]

Webkit内核：Safari,Chrome等。[Chrome的：Blink(WebKit的分支)]

第21/26页

5、平时你是如何对代码进行性能优化的？

【仅供参考】

利用性能分析工具监测性能，包括静态Analyze工具和运行时的Profile工具（在Xcode工具栏

中依次单击Product-Profile项可以启动）。

比如测试程序的运行时间，当单击TimeProfiler项时，应用程序开始运行，这就能获取到运

行整个应用程序所消耗时间的分布和百分比。为了保证数据分析在同一使用场景下的真实性，

一定要使用真机，因为此时模拟器在Mac上运行，而Mac上的CPU往往比iOS设备要快。

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

【仅供参考】

具体优化方法如下。

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

display:inline后不应该再使用width、height、margin、padding和float。

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

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

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

（2）不滥用floato

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

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

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

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

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

其他前缀包括-webkit-、-moz-、-ms-、无前缀（Opera浏览器改用blink内核，所以-0-被淘

汰）

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

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

（8）尽量使用CSS3动画。

（9）减少重绘和回流。

7、请说一下