《2023年前端面试大全.docx》由会员分享，可在线阅读，更多相关《2023年前端面试大全.docx（31页珍藏版）》请在课桌文档上搜索。
1、2023年前端面试大全一、HTML/CSS篇1、什么是Websql?【仅供参考】WebSql是一个在浏览器客户端的结构关系数据库，是浏览器内的本地RDBMS（关系型数据库管理系统），可以使用SQL查询。2、如何显示我们自己画的一个弹框？【仅供参考】可以用一个简单的方法，在页面上单击一个按钮，弹出一个弹框，而弹框也是自己写的一个div。单击前，先把弹框隐藏，OnCIiCk事件发生之后就会显示出来3、canvas和svg的区别【仅供参考】canvas是html5提供的新元素,而svg存在的历史要比canvas久远，己经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩
2、展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。canvas可以看做是一个画布其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg,所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做小图标。但是由于其本质为矢量图，可以被
3、无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。4、如何进行网站性能优化【仅供参考】content方面1、减少HnP请求：合并文件、CSS精灵、inlineImage2、减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名3、减少DOM元素数量Server方面1、使用CDN2、配置ETag3、对组件使用GZiP压缩Cookie方面1、减小COOkie大小css方面1、将样式表放到页面顶部2、不使用CSS表达式3、使用Qink不使用QimPOrtJavascript方面1、将脚本放到页面底部2、将javascript和CSS从外部引入3、压缩javascript
4、和css4、删除不需要的脚本5、减少DoM访问图片方面1、优化图片：根据实际颜色需要选择色深、压缩2、优化css精灵3、不要在HTML中拉伸图片5、什么是文档的预解析？（浏览器解析过程）【仅供参考】Webkit和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。6、标签上title与alt属性的区别是什么？【仅供参考】alt是给搜索引擎识别，在图像无法显示时
5、的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。7、什么是HTML5?【仅供参考】HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、SiIVerLight等的额外插件，这些内容来自动画、视频、富GUl等HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）合作输出的。8、请描述一下cookies,SessionStora
6、ge和IoCalStorage的区别？【仅供参考】cookie其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。SessionStorage是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且SessionStorage只能被同一个窗口的同源页面所访问共享。IocalStorage也是html
7、5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和SessionStorage不同的是，除非手动删除它，否则它不会失效，并且IOCalStorage也只能被同源页面所访问共享。相关资料：SessionStorage,LocalStorage,Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于HTML5WebStorage,创建它们的目的便于客户端存储数据。而cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。Cookie数据始终在同源（协议、主机、端口相同）的http请求中携带（即使不需要），会在
8、浏览器和服务器间来回传递。存储大小：1、cookie数据大小不能超过4k。2、SessionStorage和IOCalStOrage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：kIocalStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。2、SessionStorage数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。3、cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域：1、Sessi
9、onStorage只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。2IocalStorage在所有同源窗口中都是共享的。3、cookie在所有同源窗口中都是共享的。9、与HTML4比较，HTML5废弃了哪些元素？【仅供参考】废弃的元素包括frame、frameset、noframeapplet、big、centerbasefonto10、请描述一下SeSSionStorage和IoCalStorage的区别。【仅供参考】SessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此SessionStora
10、ge不是一种持久化的本地存储，仅仅是会话级别的存储。而1。CalStorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。11、Doctype作用？标准模式与兼容模式各有什么区别？【仅供参考】DOCTYPE是用来声明文档类型和DTD规范的。!DOCTYPEhtml声明位于HTML文档中的第一行，不是一个HTML标签，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站
11、点无法工作。12、POSition的值，relative和absolute分别是相对于谁进行定位的？【仅供参考】relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。fixed:(老版本IE不支持)生成绝对定位，相对于浏览器窗口或者frame进行定位。StatiC:默认值，没有定位，元素出现在正常的文档流中。StiCky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。13、如何实现6px字体【仅供参考】.fontfont-size:12px;transform:scale(.5);)1
12、4、解释浮动及其工作原理。【仅供参考】浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度(width)0虽然浮动元素己不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。15、伪元素和伪类的区别和
13、作用？【仅供参考】伪元素:在内容元素的前后插入额外的元素或样式类似before,:after,:!first-letter,但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素伪类：将特殊的效果添加到特定选择器上类似:hover,:first-child。它是己有元素上添加类别的，不会产生新的元素。16、rgba和OPaCity的透明效果有什么不同？【仅供参考】rgba()和OPaCity都能实现透明效果，但它们最大的不同是OPaCity作用于元素，并且可以设置元素内所有内容的透明度；而rgba()只作用于元素的颜色或其背景色(设置rg
14、ba透明的元素的子元素不会继承透明效果)。17、如何用CSS做一个勾号和一个三角形？【仅供参考】勾号：左边框和下边框，然后配合旋转三角形：宽度为0,三边透明，一边着色18、移动端IPX边框怎么设置【仅供参考】/*方法1*/.borderwidth:100%;height:Ipx;background:red;*方法2*/.borderborder-image:url(border,png)*方法3*/.borderbox-shadow:000Ipx#000;19、精灵图和base64如何选择？【仅供参考】精灵图：优点：将多个图像加载请求合并为一个请求;弊端：难以维护和更新；增加内存消耗；bas
15、e64:优点：将多个图像加载请求合并为一个CSS文件请求；轻松更新生成文件；弊端：base64编码比原始二进制表示大约大25%;IE6或IE7不支持；20、哪些CSS属性可以继承？【仅供参考】答案：可继承：text-alignfontcolor、Iine-height、letter-spacingsword-spacingstext-indent不可继承：borderpaddingmarginwidthheight;二、JSES6TS篇1、JaVaSCriPt原型，原型链？有什么特点？【仅供参考】任何对象都有proto隐式原型，等于构造函数的prototypeconstobj=obj._pro
16、to_=Object,prototype/true任何函数都有prototype显示原型等于原型对象(就是一个普通对象包含公共属性)*(通过Function,prototype.bind方法构造出来的函数是个例外，它没有prototype属性)functionPerson()Person,prototype=原型对象Person,prototype,constructor=Person/trueconstpersonl=newPersonpersonl.proto_=Person,prototype/truepersonl.constructor=Person/true对象还具有constru
17、ctor属性，指向构造函数(Person,prototype,constructor=Person)原型链是依赖于_proto_,查找一个属性会沿着proto原型链向上查找，直到找到为止。特殊/原型链最终点是nullObject,prototype._proto_=null/trueobj.proto_._proto_=null/true每个对象都会在其内部初始化一个属性，就是PrOtotyPe(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype,于是就这样一直找下去，也就是我们平
18、时所说的原型链的概念。关系：instance,constructor,prototype=instance,proto特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变2、说下什么是IIFE函数【仅供参考】IIFE(立即调用函数表达式)是一个在定义时就会立即执行的函数。3、请说出以下flag的结果？为什么？【仅供参考】functionshow()functiongetName()return牛夫人!varflag=show()getName()答案：flag值为牛夫人解释：1.函数都会有一个
19、默认的返回值undefined逻辑或如果第一个值成立就直接返回第一个值，否则直接返回第二个值4、DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系【仅供参考】e.getAttribute：获取的是标签上属性可以通过e.SetAttribute(propName,PrOPvaIUe)设置标签上属性e.propName：获取的是元素对象上属性5、怎么减少重排与重绘？【仅供参考】尽量避免操作DOM元素避免多次修改dom结构或者css,集中处理，只引发一次重绘或者重排6、判断Array类型的几种方式0【仅供参考】instanceofArray.cons
20、tructor=ArrayObject.prototype.toString.call()=objectArray,Array.isArray(1)7、null和undefined的区别？【仅供参考】null表示一个对象被定义了，值为“空值”；undefined表示不存在这个值。(1)变量被声明了，但没有赋值时，就等于Undefined。(2)调用函数时,应该提供的参数没有提供，该参数等于Undefined。(3)对象没有赋值的属性，该属性的值为Undefined。(4)函数没有返回值时，默认返回Undefinedo8、javascript的typeof返回哪些数据类型(至少六个)检测类型如下
21、：【仅供参考】stringnumberboolean、undefined、object、function、symbol(ES6之后新增的类型)9、callee与call与Caller的区别：【仅供参考】callee是arguments上面的属性，表示当前正在执行的函数call改变函数调用时里边this的指向caller是函数上的一个属性,它指向当前函数外一层函数，没有外一层函数，则为null10、事件绑定的三种方式【仅供参考】在标签上直接设置事件OnClikia()dom.onelick=function()addEventListener(,click,function(),true)11、
22、split()joinO的区别【仅供参考】split()：以指定的字符分割字符串返回一个数组,字符串方法join():以指定的字符连接数组中元素返回一个字符串，数组方法12、forin和forof【仅供参考】答案：(1)、forin一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性不建议使用forin遍历数组，因为输出的顺序是不固定的。如果迭代的对象的变量值是null或者undefined,forin不执行循环体，建议在使用forin循环之前，先检查该对象的值是不是null或者undefined(2)、forofforof语句在可迭代对象(包括Array,Map,Set,Stri
23、ng,TypedArray,arguments对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句13、target和CurrentTarget区别【仅供参考】都是事件对象上的属性event.target：返回触发事件的元素event.CurrentTarget:返回绑定事件的元素(相当于事件中this)14、原生对象和宿主对象【仅供参考】原生对象：JS内置的对象，比如Array,Date宿主对象：由宿主环境决定，如果在浏览器运行，会有WindoW及其子对象document,location等，如果在node环境运行，则有globla及其子对象【仅供参考】你可以使用p
24、artial映射类型轻松地将所有属性设为可选。16、Omit类型有什么作用？【仅供参考】OITIit是实用程序类型的一种形式，它促进了常见的类型转换。Omit允许你通过传递电流Type并选择Keys在新类型中省略来构造类型。0mit17、如何从TyPeSCriPt的子类调用基类构造函数【仅供参考】使用SUPer()函数，从子类中调用父类或基类构造函数18、设计一个对象，键名的类型至少包含一个SymbOI类型，并且实现遍历所有key【仅供参考】letname=Symbol(name,);letproduct=name：洗衣机,“price:799)；Reflect.ownKeys(product
25、);19、说出至少5个ES6的新特性，并简述它们的作用。(简答题)【仅供参考】Iet关键字，用于声明只在块级作用域起作用的变量。COnSt关键字，用于声明一个常量。结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值。Symbol数据类型，定义一个独一无二的值。ProXy代理，用于编写处理函数，来拦截目标对象的操作。for.of遍历，可遍历具有iterator接口的数据结构。Set结构，存储不重复的成员值的集合。MaP结构，键名可以是任何类型的键值对集合。PromiSe对象，更合理、规范地处理异步操作。Class类定义类和更简便地实现类的继承。20、解构赋值过程及其原理
26、【仅供参考】解构赋值：其实就是分解出一个对象的解构，分成两个步骤：解构赋值过程：变量的声明变量的赋值原理：ES6变量的解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined三、Vue/React篇1、你怎样理解“在ReaCt中，一切都是组件”这句话【仅供参考】组件是React应用UI的构建块。这些组件将整个UI分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI的其余部分。2、什么是受控组件？【仅供参考】在HTML中，表单元素如inputtextarea和select通常维护自己的状态，并根据用户输入进行
27、更新。当用户提交表单时，来自上述元素的值将随表单一起发送。而React的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数（例如OnChange）触发时重新渲染组件，因为状态被更新。以这种方式由React控制其值的输入表单元素称为受控组件。3、state和props区别是什么？【仅供参考】相同点：都是普通的js对象，他们包含着影响渲染输出的信息不同点：State是组件自己管理数据，控制自己的状态，可变ProPS是外部传入的数据参数，不可变没有state的叫做无状态组件，有state的叫有状态组件多用props,少用state【仅供参考】通过React.CreateRef()
28、创建的，并通过ref属性附加到react元素,在构造组件中，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。5、什么是虚拟DOM?【仅供参考】虚拟DOM是真实DoM在内存中的表示，UI的表示形式保存在内存中，并且与实际的DOM同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和6、列出Redux的组件【仅供参考】Action-这是一个用来描述发生了什么事情的对象。Reducer-这是一个确定状态将如何变化的地方。Store-整个程序的状态/对象树保存在StOre中。View-只显示Store提供的数据。7、Redux有哪些优点？【仅供参考】Redux的优点
29、如下：结果的可预测性-由于总是存在一个真实来源，即store,因此不存在如何将当前状态与动作和应用的其他部分同步的问题。可维护性-代码变得更容易维护，具有可预测的结果和严格的结构。服务器端渲染-你只需将服务器上创建的store传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。开发人员工具-从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。社区和生态系统-Redux背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。易于测试-Redux的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
30、组织-Redux准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单【仅供参考】答案：肯定可以的。解析：9、描述一下VUe在生命周期的InOUnted阶段时，页面是怎么样的【仅供参考】mounted执行时,数据和虚拟DOM树己经都加载完成,也渲染完成10、Vue框架怎么实现对象和数组的监听？【仅供参考】Vue数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。即：输入框内容变化时，Data中的数据同步变化。即View=Data的变化。Data中的数据变化时，文本节点的内容同步变化。即Data=View的变化。其中，View变化更新Data,可以通过事件监听的方式来实现，所以V
31、ue的数据双向绑定的工作主要是如何根据Data变化更新ViewoVue主要通过以下4个步骤来实现数据双向绑定的：实现一个监听器ObSerVer：对数据对象进行遍历，包括子属性对象的属性，利用Object.defineProperty()对属性都加上setter和getter0这样的话，给这个对象的某个值赋值，就会触发setter,那么就能监听到了数据变化。实现一个解析器Compile：解析Vue模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。实现一个订阅者Watcher：
32、Watcher订阅者是Observer和Compile之间通信的桥梁，主要的任务是订阅Observer中的属性值变化的消息，当收到属性值变化的消息时，触发解析器Compile中对应的更新函数。实现一个订阅器Dep:订阅器采用发布-订阅设计模式，用来收集订阅者Watcher,对监听器Observer和订阅者Watcher进行统一管理。11、Wateh是什么，有什么用【仅供参考】属性监听作用：当需要一个数据改变,然后去做一些逻辑处理,则可以来使用属性监听12、Vuex用过吗？简单介绍一下？【仅供参考】状态管理模式+库相当于共享仓库，方便任何组件直接获取和修改。state-数据【存项目共享状态，是响
33、应式的，store的数据改变，所有依赖此状态的组件会更新】$store.state,countmutations-方法【同步函数，只建议在这个地方修改数据】inc(state,参数唯一)$mit(,inc,2)actions-【异步操作】【提交的是mutations,不直接修改状态】increment(context,num)context,commit()this.$store.dispatch(,arg)getters-包装数据【store的计算属性，可缓存】show:function(state)this.$store.getters,show传参，返回函数:show(state)ret
34、urnfunction(参数)return.【不会缓存数据】13、什么是Proxy?【仅供参考】Proxy：代理，是ES6新增的功能，可以理解为代理器(即由它代理某些操作)。Proxy：对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。Proxy是ES6中新增的一个特性JaVaSCriPt中用来表示由它来代理某些操作Proxy是ES6中新增的一个特性，翻译过来意思是代理，用在这里表示由它来“代理”某些操作。Proxy让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。Proxy可以理解成，在目标对象之前架设一层“拦截
35、”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。使用Proxy的核心优点是可以交由它来处理一些非核心逻辑(如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等)。从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。14、使用过VueSSR吗？说说SSR?【仅供参考】Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOMo然而，也可以将同一个组件渲染为服务端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记激活为客户端上完
36、全可交互的应用程序。即：SSR大致的意思就是VUe在客户端将标签渲染成的整个html片段的工作在服务端完成，服务端形成的html片段直接返回给客户端这个过程就叫做服务端渲染。服务端渲染SSR的优缺点如下：(1)服务端渲染的优点：更好的SEO：因为SPA页面的内容是通过Ajax获取，而搜索引擎爬取工具并不会等待Ajax异步完成后再抓取页面内容，所以在SPA中是抓取不到页面通过Ajax获取到的内容；而SSR是直接由服务端返回已经渲染好的页面(数据已经包含在页面中)，所以搜索引擎爬取工具可以抓取渲染好的页面；更快的内容到达时间(首屏加载更快)：SPA会等待所有Vue编译后的js文件都下载完成后，才开
37、始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR直接由服务端渲染好页面直接返回显示，无需等待下载js文件及再去渲染等，所以SSR有更快的内容到达时间；(2)服务端渲染的缺点：更多的开发条件限制：例如服务端渲染只支持BeforCreate和created两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序SPA不同，服务端渲染应用程序，需要处于Node.jsserver运行环境；更多的服务器负载：在Node,js中渲染完整的应用程序，显然会比仅仅提供静态文件的server更加
38、大量占用CPU资源(CPU-intensive-CPU密集)，因此如果你预料在高流量环境(hightraffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。【仅供参考】用于防止闪屏，防止页面出现16、vue.js的两个核心是什么？【仅供参考】数据驱动和组件化思想17、V-Pre的作用【仅供参考】可以让元素及元素的子元素不编译解析，这样可以加快VUe的解析速度18、说一下vm.$off()的作用【仅供参考】移除自定义事件监听器。19、说一下v-slot的作用【仅供参考】提供具名插槽或需要接收prop的插槽。20、使用Vuex管理数据，与直接在全局window下定义变量相比，有什么区别
39、或者说优势？【仅供参考】vuexVUeX由统一的方法修改数据(store数据需要到IiIUtatiOn层)Vuex数据更新具有响应式层次划分明确，便于管理windowwindow全局作用域下定义的数据是静态的，数据不具有响应式全局变量多了会造成命名污染四、WebPaCk/RolIup篇1、WebPaCk的打包过程/打包原理/构建流程？【仅供参考】初始化：启动构建，读取与合并配置参数，加载PIUgin,实例化ComPiIer编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件中的内容，再找到该ModUle依赖的ModUIe,递归的进行编译处理输出：将编译后的MOdUI
40、e组合成ChUnk,将ChUnk转换成文件，输出到文件系统中细节：WebpackCLI通过yargs模块解析CLI参数，并转化为配置对象OPtion（单入口：Object,多入口：Array）,调用webpack（option）创建compiler对象。如果有option,plugin,则遍历调用PIUgin.apply（）来注册plugin,判断是否开启了watch,如果开启则调用compiler,watch,否则调用compiler.run,开始构建。创建Compilation对象来收集全部资源和信息，然后触发make钩子。make阶段从入口开始递归所有依赖，每次遍历时调用对应Loader
41、翻译文件中内容，然后生成AST,遍历AST找到下个依赖继续递归，根据入口和模块之间关系组装ChUnk,输出到dist中的一个文件内。在以上过程中，webpack会在特定的时间点（使用tapable模块）广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用WebPaCk提供的api改变webpack的运行结果2、babel相关：polyfill以及runtime区别，ESstage含义，preset-env作用等等【仅供参考】polyfill以及runtime区别babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel-Polyfill会做兼容。babel-ru
42、ntime它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6,只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。babel-polyfill它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find方法，引入PoIyfi11,我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。babel-runtime:它不会污染全局对象和内置对象的原型，比如说我们需要Promise,我们只需要importPromi
43、sefrom,babel-runtime/core-jspromise即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。stage-x：指处于某一阶段的js语言提案Stage0-设想（Strawman）：只是一个想法，可能有Babel插件。Stage1-建议（Proposal）：这是值得跟进的。Stage2-草案（Draft）：初始规范。Stage3候选（Candidate）：完成规范并在浏览器上初步实现。Stage4-完成（Finished）：将添加到下一个年度版本发布中。3、常用loader【仅供参考】css-loader读取合并CSS文件StyleToader把CSS内容注入到J
44、avaScript里sass-loader解析SaSS文件（安装SaSSTOader,nodesass）postcss-loader自动添加浏览器兼容前缀（POStCSS.config配置）url-loader将文件转换为base64URI0vue-loader处理vue文件。4、Webpack中Loader和Plugin的区别【仅供参考】运行时机1.loader运行在编译阶段2.plugins在整个周期都起作用使用方式Loader:1.下载2.使用PlUgin:1.下载2.引用3.使用5、SourceMap【仅供参考】是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置配置方式：例如
45、：devtool：source-map,加不同前缀意义：inline:不生成映射关系文件，打包进main,jsCheaP:L只精确到行，不精确到列，打包速度快2.只管业务代码，不管第三方模块module：不仅管业务代码，而且管第三方代码eval:执行效率最快，性能最好最佳实践：开发环境：cheap-modu1e-eval-source-map线上环境：cheap-mudole-source-map6、什么是模热更新？有什么优点？【仅供参考】模块热更新是WebPaCk的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷
46、新浏览器。优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式7、webpack,rollup和parcel对比？【仅供参考】webpack为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活，插件多rollup用标准化的格式(es6)来写代码，通过减少死代码(tree-shaking)尽可能地缩小包体积parcel超快的打包速度，多线程在多核上并发编译，不用任何配置webpack和rollup都需要配config文件，指明entry,output,plugin,transformations二者的细微区别在于：rollup有对import/export所做的nodepolyfills,WebPaCk没有rollup支持相对路径,而webpack没有，所以得使用pat
