2022年经典前端面试题.pdf

《2022年经典前端面试题.pdf》由会员分享，可在线阅读，更多相关《2022年经典前端面试题.pdf（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年经典前端面试题(一)一、HTML/CSS篇1、W e b sql 是H T M L 5 的一个规范吗？【仅供参考】不是，许多人把它标记为H T M L 5,但是它不是H T M L 5 规范的一部分，这个规范是基于S Q L i te 的2、H T M L 5 中的应用缓存是什么？【仅供参考】H T M L 5 应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要3、如何使用C a nv a s和H T M L 5 中的S V G 画一个矩形？【仅

2、供参考】使用S V G 绘制矩形的代码如下：使 用 C a nv a s绘制矩形的代码如下。v a r c a nv a s=d oc u m e nt.g e tE l e m e ntB y l d (m y c a nv a sj ；v a r c tx=c a nv a s.g e tC onte x t(2 d )；c tx.r e c t(1 00,1 00,3 00,2 00)；c tx f i l l sty l e =pi nk c tx.f i l l ()4、ti tl e 与 hl的区别？【仅供参考】ti tl e 属性没有明确意义只表示是个标题，hl则表示层次明确的标

3、题，对页面信息的抓取也有很大的影响。5、H T M L 5 如何实现跨域？【仅供参考】在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。r e sponse.se tH e a d e r (A c c e ss-C ontr ol-A l l ow-O r i g i n,*)；r e sponse.se tH e a d e r (A c c e ss-C ontr ol-A l l ow-M e th od s,P O S T )；r e sponse.se tH e a d e r (A c c e ss-C ontr ol-A l l ow-H e a d e r s

4、,x-r e qu e ste d-w i th,c onte nt-第1/2 7页ty pe ）；6、i f r a m e 的优缺点？【仅供参考】优点：解决加载缓慢的第三方内容如图标和广告等的加载问题S e c u r i ty sa nd b ox并行加载脚本缺点：i f r a m e 会阻塞主页面的O nl oa d 事件即时内容为空，加载也需要时间没有语意7、应用缓存中的回退是什么？【仅供参考】应用缓存中的回退会帮助你指定在服务器不可访问时，显示某文件。例如在下面的m a ni f e st文件中，如果用户输入了“/h om e”，同时服务器不可到达，“4 04 h tm”文件应送

5、达。F A L L B A C K：/h om e/4 04.h tm l8、应用缓存中网络命令的作用是什么？【仅供参考】网络命令描述不需要缓存的文件，例如以下代码中“login.php”始终都不应该缓存或者离线访问。NE T W OR Klogin,php9、行内元素有哪些？块级元素有哪些？空（void）元素有那些？【仅供参考】定义：C S S 规范规定，每个元素都有d is pla y属性，确定该元素的类型，每个元素都有默认的d is pla y值，如 d i v 的 d is pla y默认值为“b loc k”，则 为“块级”元素；s pa n默认d is pla y属性值为inlin

6、e”，是“行内”元素。行内元素有：a b s pa n img inpu t s e le c t s t r ong（强调的语气）块级元素有：d iv u l ol li d l d t d d hl h2 h3 h4 p空元素：常见：b r hr img inpu t link me t a不常见：a r e a b a s e c ol c omma nd e mb e d k e yge n pa r a m s ou r c e t r a c k wb r1 0、本地存储的数据有生命周期吗？【仅供参考】本地存储的数据没有生命周期，它将一直存储数据，直到用户从浏览器清除或者使用第2/

7、2 7 页J a va S c r ipt 代码移除。1 1、哪些浏览器支持H T M L 5?【仅供参考】几乎所有的浏览器(如 S a f a r i、C hr ome F ir e f ox Ope r a I E)都支持H T M L 51 2、如何显示我们自己画的一个弹框？【仅供参考】可以用一个简单的方法，在页面上单击一个按钮，弹出一个弹框，而弹框也是自己写的一个d ivo单击前，先把弹框隐藏，onc lic k 事件发生之后就会显示出来1 3、C a nva s 和S vG 的区别是什么？【仅供参考】两者的区别如下：(1)一 旦 C a nva s 绘制完成将不能访问像素或操作它；任

8、何使用S VG 绘制的形状都能被记忆和操作，可以被浏览器再次显示。(2)C a nva s 对绘制动画和游戏非常有利；S VG 对创建图形(如C AD)非常有利。(3)因为不需要记住以后事情，所 以 C a nva s 运行更快；因为为了之后的操作，S VG 需要记录坐标，所以运行比较缓慢。(4)在 C a n v a s 中不能为绘制对象绑定相关事件；在S V G 中可以为绘制对象绑定相关事件。(5)C a n v a s 绘制出的是位图，因此与分辨率有关；S v G 绘制出的是矢量图，因此与分辨率无关。1 4、c o o k i e 和 s e s s i o n 的区别是什么?【仅供参考

9、】区别如下：(1)c o o k i e 数据存放在客户的浏览器上，s e s s i o n 数据存放在服务器上。(2)c o o k i e 不是很安全，别人可以分析存放在本地的c o o k i e 并 进 行 c o o k i e 欺骗。考虑到安全问题应当使用s e s s i o n o(3)s e s s i o n 会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用c o o k i e o(4)单 个 c o o k i e 保存的数据不能超过4K B,很多浏览器都限制一个站点最多保存20个c o o k i e。所以个人建议可

10、以将登录信息等重要信息存放在s e s s i o n 中，其他信息(如果需要保留)可以存 放 在 c o o k i e 中。1 5、H T M L 5 C a n v a s 元素有什么作用？【仅供参考】C a n v a s 元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在H T M L 上进行图形操作。第3/27 页1 6、画一条0.5p x 的直线？【仅供参考】考查的是c s s 3的t r a n s f o r mh e i gh t:I p x;t r a n s f o r m:s c a l e（0.5）;1 7、你知道哪些关于l e t t e r-s p a

11、 c i n g的妙用？【仅供参考】可以用于消除i n l i n e-b l o c k 元素间的换行符空格间隙1 8、I r e m、l e m I v h、I p x 各自代表的含义？【仅供参考】r e m:r e m 是全部的长度都相对于根元素元素。通常做法是给h t m l 元素设置一个字体大小，然后其他元素的长度单位就为r e m。e m:子元素字体大小的e m 是相对于父元素字体大小，元素的w i d t h/h e i gh t/p a d d i n g/m a r gi n 用e m的话是相对于该元素的f o n t-s i z ev w/v h:全 称 是V i e w

12、p o r t W i d t h 和 V i e w p o r t H e i gh t,视窗的宽度和高度，相当于屏幕宽度和高度的遥，不过，处理宽度的时候%单位更合适，处 理 高 度 的 话 v h单位更好。p x:p x 像 素（P i x el）。相对长度单位。像素p x 是相对于显示器屏幕分辨率而言的。1 9、有什么方式可以对一个D 0 M设置它的C S S?【仅供参考】有以下三种方式。外链式，即通过li n k 标签引入一个外部C S S 文件中。内嵌式，即将C S S 代码写在s tyle标签内。行内式，即将C S S 代码写在元素的s tyle属性中。2 0、标准盒子模型和I

13、E （怪异）盒子模型理解多少？【仅供参考】b o x-s i z e：c o n ten t-b o x 是标准盒子模型，实际的区域是p a d d i n g +b o r d er +c o n ten t,c o n ten t区域就是设置的元素宽度，p a d d i n g 和b o r d er 会占用外部空间b o x-s i z e：b o r d er-b o x 的话，元素的宽度为p a d d i n g +b o r d er +c o n ten t,元素设置了宽度，不会占用外部空间。二、JS/ES6/TS篇1、a j a x 过程？【仅供参考】/-t A.I Trf

14、a.x ri T T.c .:t_ L t L A-f.口A.I Zrfa.A.P3.I 1 W m:t_ L第4/2 7页U J 创建X ML llltp K eq ues t河家，也观足刖建一个开步明用何家.(2)创建一个新的H T T P 请求,并指定该H T T P 请求的方法、U R L 及验证信息.(3)设置响应H T T P 请求状态变化的函数.(4)发送H T T P 请求.(5)获取异步调用返回的数据.(6)使用J a va S c r i p t和D O M实现局部刷新.2、J a va s c r i p t如何实现继承？【仅供参考】实例继承：将子构造函数的p r o t

15、o typ e指向父构造函数的一个实例原型继承：将子构造函数的p r o to typ e指向父构造函数的p r o to typ e构造函数绑定：使 用 c a ll或 a p p ly方法，将父对象的构造函数绑定在子对象上拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象E S 6 语法 ex ten d s：c la s s C o lo r P o i n t ex ten d s P o i n t 3、d o c umen t lo a d 事件和 d o c umen t r ea d y事件的区别【仅供参考】页面加载完成有两种事件lo a d 是当页面所有资源全部加载完成后(

16、包括D O M文档树，c s s 文件，j s 文件，图片资源等)，执行一个函数问题：如果图片资源较多，加载时间较长，o n l o ad 后等待执行的函数需要等待较长时间，所以一些效果可能受到影响$(d o c u m e n t),r e ad y。是当D 0M文档树加载完成后执行一个函数(不包含图片，c s s 等)所以会比l o ad 较快执行在原生的j S 中不包括r e ad y。这个方法，只有l o ad 方法就是o n l o ad 事件4、说几条写J av aS c r i p t 书写的基本规范？【仅供参考】代码一定要正确缩进，建议使用”二个或者四个空格 缩进语句结束使用分

17、号；规范定义J S O N对象，补全双引号用 和声明对象和数组变量和函数在使用前进行声明以大写字母开头命名构造函数，全大写命名常量代码段使用花括号 包裹还有要书写正确的标识标签5、说一下i n n e r H T ML 与 i n n e r T e x t 的作用与区别？【仅供参考】作用：都可以获取或者设置元素的内容区别：i n n e r H T ML 可以解析内容中的h t m l 标签第5/27页i n n e r T e x t 不能解析内容中的h t m l 标签6、用j s 递归的方式写1到100求和？【仅供参考】f u n c t i o n ad d(n u m l,n u

18、m 2)c o n s t n u m =n u m l +n u m 2;i f(n u m 2=100)r e t u r n n u m;e l s e r e t u r n ad d(n u m,n u m 2+1)v ar s u m =ad d(l,2);7、o f f s e t W i d t h/o f f s e t H e i g h t,c l i e n t W i d t h/c l i e n t H e i g h t,s c r o l l W i d t h/s c r o l W e i g h t 的区别？【仅供参考】o f f s e t W i d

19、 t h/o f f s e t H e i g h t 返回值包含 c o n t e n t +p ad d i n g +bo r d e r +包含滚动条，效果与e.g e t B o u n d i n g C l i e n t R e c t ()相同c l i e n t W i d t h/c l i e n t H e i g h t 返回值只包含c o n t e n t +p ad d i n g,如果有滚动条，也不包含滚动条s c r o l l W i d t h/s c r o l l H e i g h t 返回值包含 c o n t e n t +p ad d

20、 i n g +溢出内容的尺寸8、渐进增强与优雅降级【仅供参考】渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。9、fo r i n 和 fo r o f【仅供参考】答案：(1)、fo r i n一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性不建议使用fo r i n 遍历数组，因为输出的顺序是不固定的。如果迭代的对象的变量值是n u ll或 者 u n d e fi n e d,fo r i n 不执行循环体，建议在使用fo r i n

21、循环之前，先检查该对象的值是不是n u ll或 者 u n d e fi n e d(2)、fo r o ffo r o f 语句在可迭代对象(包括 A r r a y,M a p,S e t,S t r i n g,T y p e d A r r a y,a r gu m e n t s 对象等等)第6/27页上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句1 0、数组方法p o p()p u s h()u n s h i ft ()s h i ft ()【仅供参考】p o p ()尾部删除p u s h。尾部添加u n s h i ft ()头部添加s h i ft。头

22、部删除1 1、c o n t i n u e 与 b r e a k的区别【仅供参考】c o n t i n u e：跳过本次循环，直接进入下一次循环b r e a k：直接终止循环1 2、请解释一下什么是防抖与节流【仅供参考】防 抖(d e b o u n c e)总结：就是指触发事件后在n秒内函数只能执行一次，如 果 在 n秒内又触发了事件，则会重新计算函数执行时间。节 流(t h r o t t le)总结：就是每次触发事件的隔间至少要大于等于n 秒，不会重置计时1 3、T y p e s c r i p t 中？.，？，！：，_ ,*等符号的含义？【仅供参考】?.可选链?类似与短路或，

23、？?避免了一些意外情况，0,N a N 以及”,fa ls e 被视为fa ls e 值。只有u n d e fi n d,n u ll被视为fa ls e 值。!.在变量名后添加！，可以断言排除u n d e fi n e d 和n u ll类型_ ,声明该函数将被传递一个参数，但您并不关心它!：待会分配这个变量，t s不要担心*求塞1 4、T y peS cript 中的泛型【仅供参考】T y peS cript 泛型是一个提供创建可重用组件方法的工具。它能够创建可以处理多种数据类型而不是单一数据类型的组件。泛型在不影响性能或生产率的情况下提供类型安全性。泛型允许我们创建泛型类、泛型函数、

24、泛型方法和泛型接口fu nct ion id ent it y (arg:T):T ret u rn arg;第7/2 7 页let ou t pu t 1 =id ent it y st ring(my S t ring);let ou t pu t 2 =id ent it y (1 0 0 );console,log(ou t pu t l);console.I og(ou t pu t 2);1 5、如何理解T y peS cript 中的类【仅供参考】T y peS cript 是一种面向对象的J av aS cript 语言，支持O O P 编程特性，比如类、接口等。与J av a

25、一样，类是用于创建可重用组件的基本实体。它是一组具有公共属性的对象。类是创建对象的模板或蓝图。它是一个逻辑实体。class”关键字用于在T y pescript 中声明一个类。class S t u d ent st u d C od e:nu mber;st u d N ame:st ring;const ru ct or(cod e:nu mber,name:st ring)t h is.st u d N ame=name;t h is.st u d C od e=cod e;)get G rad e():st ring ret u rn A+”;)类的特征：封装、继承、多态、抽象1 6、

26、T y peS cript 支持哪些面向对象的术语【仅供参考】1 .模块2 .类3 .接口4 .继承5 .数据类型6 .成员函数1 7、T y peS cript 中如何实现函数重载？【仅供参考】要 在 T y peS cript 中重载函数，只需创建两个名称相同但参数/返回类型不同的函数。两个函数必须接受相同数量的参数。这 是 T y peS cript 中多态性的重要组成部分。例如，你可以创建一个ad d 函数，如果它们是数字，则将两个参数相加，如果它们是字符串，则将它们连接起来。fu nct ion ad d(a:st ring,b:st ring):st ring;第8/27页func

27、tion add(a:number,b:number):number;function add(a:any,b:any):any return a+b;)add(Hello,Steve);/returns Hello Steve”add(10,20);/returns 3018、枚举和常量枚举的区别？【仅供参考】枚举会被编译时会编译成一个对象，可以被当作对象使用const枚举会在typescript编译期间被删除，const枚举成员在使用的地方会被内联进来，避免额外的性能开销19、forEach、for in、for of、for区别【仅供参考】for:最原始的数组遍历写法，写法比较麻烦。fo

28、rEach:不可以遍历对象，用来遍历数组，中途无法跳出循环，break和return不凑效。for.in:主要用来遍历对象的key值，可以遍历数组但是会遍历原型上的某些键，某些情况下，会以任意的顺序遍历键名(只可遍历数组中所有可枚举的属性)用hasOwnProperty筛选不遍历原型上的for.of：语法简单，可以与break、continue和return配合使用，主要用来遍历数组键值。不会遍历原型链。(数据结构只要有symbol,iterator属性，就会被视为具有iterator接口，就可以用for.of循环遍历成员，可用for.of循环遍历的有：数组、set、map、String ar

29、guments对象、类数组对象)20、使用结构赋值，实现两个变量的值的交换【仅供参考】let a=1;let b=2;a,b=b,a;三、Vue/ReactMi、受控组件和非受控组件区别是啥?【仅供参考】受控组件是React控制中的组件，并且是表单数据真实的唯一来源。非受控组件是由D 0 M 处理表单数据的地方，而不是在React组件中。尽管非受控组件通常更易于实现，因为只需使用refs即可从D 0 M 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式第9/27页2、R e a c t 中的状态

30、是什么？它是如何使用的？【仅供参考】状 态 是 R e a c t 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与p r o p s 不同，它们是可变的，并创建动态和交互式组件。可以通过t h i s,s t a t e 0访问它们3、你 对“单一事实来源”有什么理解？【仅供参考】R e d u x 使 用“S t o r e”将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在S t o r e 中，并且它们从S t o r e 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序4、什么是R e a c t 路由【仅供参考】R

31、e a c t 路由是一个构建在R e a c t 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这 使 U R L 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 W e b 应用。R e a c t路由有一个简单的A P I5、什么是受控组件？【仅供参考】在 H T M L 中，表单元素如 i n p ut、和 se l e c t 通常维护自己的状态,并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。而 R e a c t的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数（例如o n C h a n g

32、e）触发时重新渲染组件，因为状态被更新。以这种方式由R e a c t控制其值的输入表单元素称为受控组件。6、列 出 R e d ux 的组件【仅供参考】A c ti o n -这是一个用来描述发生了什么事情的对象。R e d uc e r -这是一个确定状态将如何变化的地方。S to r e -整个程序的状态/对象树保存在S to r e 中。V i e w -只显示S to r e 提供的数据。7、如何 R e a c t.c r e a te E l e m e n t?【仅供参考】c o n st e l e m e n t=（H e l l o,w o r l d!第1 0/2 7页

33、)c o n st e l e m e n t=R e a c t.c r e a te E l e m e n t(h l c l a ssN a m e:g r e e ti n g ,H e l l o,w o r l d!)；8、sta te 和p r o p s区别是什么？【仅供参考】相同点：都是普通的j s对象，他们包含着影响渲染输出的信息不同点：sta te 是组件自己管理数据，控制自己的状态，可变p r o p s是外部传入的数据参数，不可变没有sta te 的叫做无状态组件，有sta te 的叫有状态组件多用p r o p s,少用sta te9、R e a c t中的事件是

34、什么？【仅供参考】在 R e a c t中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于 处 理 D O M 元素中的事件。但是有一些语法差异，如：用驼峰命名法对事件命名而不是仅使用小写字母。事件作为函数而不是字符串传递。事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问1 0、R ea c t 有哪些限制？【仅供参考】R ea c t 只是一个库，而不是一个完整的框架它的库非常庞大，需要时间来理解新手程序员可能很难理解编码变得复杂，因为它使用内联模板和JS X1 1、说一下v-b i n d 是什么，有什么用？【仅供

35、参考】v-b i n d：绑定属性1 2、V u ex 用过吗？简单介绍一下？【仅供参考】状态管理模式+库相当于共享仓库，方便任何组件直接获取和修改。s t a t e-数 据【存项目共享状态，是响应式的，s t o r e的数据改变，所有依赖此状态的组件会更第1 1/2 7 页新】$s t o r e.s t a t e,c o u n tm u t a t i o n s -方 法【同步函数，只建议在这个地方修改数据】i n c (s t a t e,参数唯一)$s t o r e.c o m m i t C i n c ,2)a c t i o n s -【异步操作】【提交的是m u t

36、 a t i o n s,不直接修改状态】i n c r em en t(c o n t ex t,n u m)c o n t ex t,c o m m i t()t h i s.$s t o r e.d i s p a t c h C ,a r g)g et t er s -包 装 数 据【s t o r e的计算属性，可缓存】s h o w:f u n c t i o n(s t a t e)t h i s.$s t o r e.g et t er s.s h o w传参，返回函数：s h o w (s t a t e)(r et u r n f u n c t i o n(参 数)r e

37、t u r n .【不会缓存数据】1 3、你 有 对 V u e项目进行哪些优化？【仅供参考】(1)代码层面的优化v-i f 和 v-s h o w 区分使用场景c o m p u t ed 和 w a t c h 区分使用场景v-f o r 遍历必须为i t em 添 加 k ey,且避免同时使用v-i f长列表性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无限列表性能服务端渲染S S R o r 预渲染(2)Web p a c k 层面的优化Web p a c k 对图片进行压缩减 少 E S 6 转 为 E S 5 的冗余代码提取公共代码模板预编译提取组件的C S S

38、优化 S o u r c eMa p构建结果输出分析V u e 项目的编译优化(3)基 础 的 W e b 技术的优化开 启 g z i p 压缩浏览器缓存第12/27页C D N 的使用使 用 C h r o m e P er f o r m a n c e查找性能瓶颈14、谈谈你对k eep-a l i v e的了解？【仅供参考】k eep-a l i v e是 V u e 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：一般结合路由和动态组件一起使用，用于缓存组件；提 供 i n c l u de和 ex c l u de属性，两者都支持字符串或正则表达式，i n

39、 c l u de表示只有名称匹配的组件会被缓存，ex c l u de表示任何名称匹配的组件都不会被缓存，其 中 ex c l u de的优先级 比 i n c l u de高；对应两个钩子函数a c t i v a t ed和 dea c t i v a t ed,当组件被激活时，触发钩子函数a c t i v a t ed,当组件被移除时，触发钩子函数dea c t i v a t ed。15、v u e2 和v u e3 的响应式原理都有什么区别呢？【仅供参考】v u e2 用的是 O b j ec t.def i n dP r o p er t y 但是v u e3 用的是P r o

40、 x yO b j ec t.def i n dP r o p er t y 缺点：一次只能对一个属性进行监听，需要遍历来对所有属性监听对于对象的新增属性，需要手动监听对于数组通过p u s h、u n s h i f t 方法增加的元素，也无法监听P r o x y 就没有这个问题，可以监听整个对象的数据变化，所以用v u e3.0会用P r o x y 代替def i n edP r o p er t y016、说一下v-s l o t 的作用【仅供参考】提供具名插槽或需要接收p r o p 的插槽。17、0 修改了组件的声明方式，改成了类式的写法，这样使得和T y p eS c r i

41、p t 的结合变得很容易。【仅供参考】此外，v u e 的源码也改用了 T y p eS c r i p t 来写。其实当代码的功能复杂之后，必须有一个静态类型系统来做一些辅助管理。现 在 v u e3.0 也全面改用T y p eS c r i p t 来重写了，更是使得对外暴露的a p i 更容易结合T y p eS c r i p t o 静态类型系统对于复杂代码的维护确实很有必要。（4）其它方面的更改v u e 3.0的改变是全面的，上面只涉及到主要的3个方面，还有一些其他的更改：第1 3/2 7 页支持自定义渲染器，从而使得w e e x可以通过自定义渲染器的方式来扩展，而不是直接f

42、 or k源码来改的方式。支 持 Fr a g m e nt （多个根节点）和 Pr ot a l （在 d om 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。基 于 t r e e s h a k i ng 优化，提供了更多的内置功能。1 8、v-pr e 的作用【仅供参考】可以让元素及元素的子元素不编译解析，这样可以加快v u e 的解析速度1 9、说一下v m.$r e f s 的作用【仅供参考】一个对象，持有注册过r e f a t t r i b u t e 的所有D O M 元素和组件实例。2 0、虚 拟 D O M 实现原理？【仅供参考】虚 拟 D O M 的实现原理

43、主要包括以下3部分：用 J a v a S c r i pt 对象模拟真实D 0 M树，对 真 实 D OM进行抽象；d i f f 算 法 一 比 较 两 棵 虚 拟 D 0 M树的差异；pa c h 算 法 一 将 两 个 虚 拟 D 0 M对象的差异应用到真正的D 0 M树。四、Webpack/RoHup篇1、常见Pl u g i ns【仅供参考】Ht m l Wb pa c k Pl u g i n自动在打包结束后生成h t m l 文件，并引入b u nd l e.j sc l e a nw e b Pa c k Pl u g i n打包自动删除上次打包文件2、你是如何提高w e b

44、 pa c k 构件速度的？【仅供参考】多入口情况下，使用C om m ons C h u nk Pl u g i n来提取公共代码通过e xt e r na l s 配置来提取常用库利用D l l Pl u g i n和D l l R e f e r e nc e Pl u g i n预编译资源模块通过D l l Pl u g i n来对那些我们引用但是绝对不会修改的npm 包来进行预编译，再通过D l l R e f e r e nc e Pl u g i n将预编译的模块加载进来。使用Ha ppy pa c k 实现多线程加速编译使用 w e b pa c k-u g l i f y-p

45、a r a l l e 来提升u g l i f y Pl u g i n的压缩速度。原理上w e b pa c k-u g l i f y-pa r a l l e l 采用了多核并行压缩来提升压缩速度第1 4/2 7 页使用Tree-shaking和Scope Hoi sting来剔除多余代码3、sourceMap【仅供参考】是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置配置方式：例如：devtool：source-map加不同前缀意义：inline:不生成映射关系文件，打包进main.jscheap:L 只精确到行，不精确到列，打包速度快2.只管业务代码，不管第三方模块mo

46、dule：不仅管业务代码，而且管第三方代码eval:执行效率最快，性能最好最佳实践：开发环境：cheap-module-eval-source-map线上环境：cheap-mudole-source-map4、什么是模热更新？有什么优点？【仅供参考】模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式5、lazy loading(模块懒加载)【仅供参考】借助import。语法异步引入组件，实现

47、文件懒加载：prefetch,preloadingwebpack提倡多写异步代码，提升代码利用率，从而提升页面性能先加载主业务文件，prefetch利用网络空闲时间，异步加载组件import(/*webpackPrefetch:true/LoginModal);preload和主业务文件一起加载，异步加载组件import(/webpackPreload:true*/*ChartingLibrary,);6、webpack-dev-server 和 http服务器的区别【仅供参考】webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统

48、的http服务对开发更加有效。7、理解 babel-preset-env【仅供参考】第15/27页babel-preset-es2015:可以将es6的代码编译成es5.babel-preset-es2016:可以将es7的代码编译为es6.babel-preset-es2017:可以将es8的代码编译为es7.babel-preset-latest:支持现有所有ECMAScript版本的新特性8、webpack的作用是什么，谈谈你对它的理解？【仅供参考】现在的前端网页功能丰富，特别是SPA（single page web application单页应用）技术流行后，JavaScript的复杂

49、度增加和需要一大堆依赖包，还需要解决Scss,Less.新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于webpack的辅助了。现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。react.js+WebPackvue.js+WebPackAngluarJS+WebPack9 webpack3和webpack4的区别【仅供参考】mode/-mode参数，新增了mode/-mode参数来表示是开发还是生产（development/production）production 侧重于打包后的文件大小，development

50、侧重于goujiansud移除loaders,必须使用rules（在3版本的时候loaders和rules是共存的但是到4的时候只允许使用rules）移除了CommonsChunkPlugin（提取公共代码），用optimization.splitChunks和optimization.runtimeChunk来代替支持es6的方式导入JSON文件，并且可以过滤无用的代码10、有哪些常见的Plugin?他们是解决什么问题的？【仅供参考】html-webpack-plugin：可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）c 1 ean-webpack-plugi