《历年前端(1~5年经验)面试题.docx》由会员分享，可在线阅读，更多相关《历年前端(1~5年经验)面试题.docx（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、历年前端（15年经验）面试题（一）一、HTML/CSS 篇1、href 与 src 区别？【仅供参考】href （Hypertext Reference）指定网络资源的位置，从而在当前元素或者当前 文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的 不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。） src source （缩写），指向外部资源的位置，指向的内容将会应用到文档中当前 标签所在位置。href与src的区别请求资源类型不同：href指向网络资源所在位置，建立和当前元素（锚点）或 当前文档（链接）之间的联系。在请求src资源时会将其指向的资源下载
2、并应 用到文档中，比如JavaScript脚本，img图片；作用结果不同：href用于在当前文档和引用资源之间确立联系；src用于替换 当前内容；浏览器解析方式不同：当浏览器解析到src ,会暂停其他资源的下载和处理， 直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向 资源应用到当前内容。这也是为什么建议把js脚本放在底部而不是头部的原 因。2、HTML5为什么只需要写?【仅供参考】HTML5不基于SGML,因此不需要对DTD进行引用，但是需要D0CTYPE来规范浏 览器的行为（让浏览器按照它们的方式来运行）。而HTM4.01基于SGML,所以 需要对DTD进行引用，才能告
3、知浏览器文档所使用的类型。3、行内元素有哪些？块级元素有哪些？空（void）元素有那些？【仅供参考】定义：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个 元素都有默认的display值，如div的display默认值为“block，则为 “块级”元素;span默认display属性值为inline” ,是“行内”元素。行内元素有：a b span img input select strong （强调的语气）使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快W3c标准使网站容易维护、有利于搜索引擎查找13、TypeScript中的类型断言？【仅供参考】
4、类型断言可以手动指定一个值的类型/第一种let employeeCode = code;第二种let employeeCode = code as number14、TypeScript 中？.，？，！ ： ，_ , * 等符号的含义？【仅供参考】?.可选链?类似与短路或，？?避免了一些意外情况，0, NaN以及false被视为 false 值。只有 undefind, null 被视为 false 值。!.在变量名后添加！，可以断言排除undefined和null类型一，声明该函数将被传递一个参数，但您并不关心它!：待会分配这个变量，ts不要担心*求嘉 15、TypeScript的as语法是
5、什么？【仅供参考】as是TypeScript中类型断言的附加语法，引入as-语法的原因是原始语法()与 JSX冲突let empCode: any = 111;let employeeCode = code as number;16、枚举和常量枚举的区别？【仅供参考】枚举会被编译时会编译成一个对象，可以被当作对象使用const枚举会在typescript编译期间被删除，const枚举成员在使用的地方会被内联进来，避免额外的性能开销 17、TypeScript 与 JavaScript 有什么不同【仅供参考】TypeScript 支持 ES61. 它支持强类型或静态类型、模块、可选参数等。2.
6、它支持面向对象的编程概念，如类、接口、继承、泛型等。3. TypeScript有可选的参数特性。4. 它编译代码并在开发期间突出显示错误。5. TypeScript 支持模块。6. TypeScript在编译时提供了错误检查功能。它将编译代码，如果发现任何 错误，它将在运行脚本之前突出显示这些错误。18、Promise中reject和catch处理上有什么区别【仅供参考】reject是用来抛出异常，catch是用来处理异常reject是Promise的方法，而catch是Promise实例的方法reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二 个回调，则进入ca
7、tch网络异常(比如断网)，会直接进入catch而不会进入then的第二个回调19、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能【仅供参考】基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$ 来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼 接。ES6反引号(、)就能解决类模板字符串的功能let name = web;let age = 10;let str =你好，$ name已经 $ age岁了str = str.replace(/$(*)/g, function()return eval(arguments1);)console, log(str);
8、你好，web 已经 10 岁了20、什么时候不使用箭头函数？说出三个或更多的例子【仅供参考】使用函数作为构造函数时(箭头函数没有构造函数)要在函数中使用this/arguments时，由于箭头函数本身不具有 this/arguments,因此它们取决于外部上下文当想要函数被提升时（箭头函数是匿名的）当我们希望函数中的this指向调用这个函数的对象时，也不用箭头函数， 因为咱们无法保证this即对象本身。三、Vue/React 篇1、什么是 React Fiber?【仅供参考】Fiber是React 16中新的协调引擎或重新实现核心算法。它的主要目标是支 持虚拟DOM的增量渲染。React Fi
9、ber的目标是提高其在动画、布局、手势、 暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新 的并发原语。React Fiber的目标是增强其在动画、布局和手势等领域的适用性。它的主要 特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。2、React中的合成事件是什么？【仅供参考】合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览 器的行为合并为一个APE这样做是为了确保事件在不同浏览器中显示一致的 属性。3、如何在ReactJS的Props上应用验证？【仅供参考】当应用程序在开发模式下运行时，React将自动检查咱们在组件上设置的所有 prop
10、s,以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在 控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的props 用 isRequired 定义的。 下面是一组预定义的prop类型: React. PropTypes. string React. PropTypes. number React. PropTypes. func React. PropTypes. node React. PropTypes.bool 4、为什么React Router v4中使用switch关键字【仅供参考】虽然P用于封装Router中的多个路由，当你想要仅显示要在多个定义的路 线
11、中呈现的单个路线时，可以使用“switch”关键字。使用时，switch标 记会按顺序将已定义的URL与己定义的路由进行匹配。找到第一个匹配项后， 它将渲染指定的路径。从而绕过其它路线5、什么是高阶组件？【仅供参考】高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模 式，是从React的组合特性中衍生出来的，称其为纯组件，因为它们可以接受 任何动态提供的子组件，但不会修改或复制输入组件中的任何行为HOC可以用于以下许多用例代码重用、逻辑和引导抽象渲染劫持state抽象和操作props处理6、Vue组件间通信有哪几种方式？【仅供参考】Vue组件间通信是面试常考的知识点之一
12、，这题有点类似于开放题，你回答出 越多方法当然越加分，表明你对Vue掌握的越熟练。Vue组件间通信只要指以下3类通信：父子组件通信、隔代组件通信、兄弟组 件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件 间通信。（1） props / $emit适用父子组件通信这种方法是Vue组件的基础，相信大部分同学耳闻能详，所以此处就不举例展 开介绍。（2） ref与$parent / $children适用父子组件通信ref：如果在普通的D0M元素上使用，引用指向的就是D0M元素；如果用在子 组件上，引用就指向组件实例Sparent / $children：访问父 / 子实例（3）
13、EventBus ($emit / $on)适用于 父子、隔代、兄弟组件通信 这种方法通过一个空的Vue实例作为中央事件总线(事件中心)，用它来触发 事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。（4） $attrs/$listeners适用于 隔代组件通信Sattrs：包含了父作用域中不被prop所识别（且获取）的特性绑定（class 和style除外）。当一个组件没有声明任何prop时，这里会包含所有父作用 域的绑定（class和style除外）,并且可以通过v-bind=$attrs”传入内 部组件。通常配合inheritAttrs选项一起使用。Slisteners
14、：包含了父作用域中的（不含.native修饰器的）v-on事件监听 器。它可以通过v-on=$listeners”传入内部组件（5） provide / inject适用于隔代组件通信祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注 入变量。provide / inject API主要解决了跨级组件间的通信问题，不过它的 使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提 供与依赖注入的关系。（6） Vuex适用于 父子、隔代、兄弟组件通信Vuex是一个专为Vue. js应用程序开发的状态管理模式。每一个Vuex应用的 核心就是store （仓库
15、）。“store”基本上就是一个容器，它包含着你的应用 中大部分的状态（state ）oVuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若 store中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变store中的状态的唯一途径就是显式地提交（commit） mutation。这样使 得我们可以方便地跟踪每一个状态的变化。7、Vuex是通过什么方式提供响应式数据的？【仅供参考】在Store构造函数中通过new Vue（）实现的。利用Vue来监听state下的数据变化，给状态（数据）添加getter、setter可以监听数据改变。8、vue. js的两个核心是什
16、么？【仅供参考】数据驱动和组件化思想 9、Object, defineProperty怎么用，三个参数？，有什么作用啊?【仅供参考】Object. defineProperty ()方法会直接在一个对象上定义一个新属性，或者修 改一个对象的现有属性，并返回此对象。obj：需要定义属性的对象prop：需要定义的属性：要定义或修改的属性描述符。value: 18，/设置默认值(与get()互斥)enumerable: true,这一句控制属性可以枚举enumerable改为true就可以参与遍历了 默认值falsewritable: true, /该属性是否可写 默认值false (与set ()
17、互 斥)configurable: true, /该属性是否可被删除默认值falseget /当有人读取prop的时候get函数就会调用，并且返回就是sss的值 set /当有人修改prop的时候set函数就会调用，有个参数这个参数就是 修改后的值10、说一下Vue生命周期四个初始化阶段方法【仅供参考】beforeCreate() ,创建vue之前执行(数据和虚拟D0M树 还没有加载完 成)created() ,创建vue之前执行(数据已经加载好，虚拟D0M树没有加载完 成)beforeMount 0 ,页面渲染之前执行(数据和虚拟D0M树都已经加载好，但 数据这时并没有填充)mounted(
18、) ,页面渲染之后(数据已经填充完成)11、v-pre的作用【仅供参考】可以让元素及元素的子元素不编译解析，这样可以加快vue的解析速度12、响应式原理(变化侦测)【仅供参考】使用发布订阅模式将数据劫持和模板编译结合，实现双向绑定1、observer:封装Object. defineProperty方法用来劫持对象属性的 getter和setter,以此来追踪数据变化。2、读取数据时触发getter来收集依赖(Watcher)到Dep。3、修改数据时触发setter,并遍历依赖列表，通知所有相关依赖(Watcher)4、Dep类为依赖找一个存储依赖的地方，用来收集和管理依赖，在getter中
19、收集，在setter中通知。5、Watcher类就是收集的依赖，实际上是一个订阅器，Watcher会将自己的 实例赋值给window, target (全局变量)上，然后去主动访问属性，触发属性 的 getter, getter 中会将此 Watcher 收集到 Dep 中，Watcher 的 update 方法 会在Dep的通知方法中被调用，触发更新。6、Observer类用来将一个对象的所有属性和子属性都变成响应式的，通过递 归调用def ineReactive来实现。7、由于无法侦测对象上新增/删除属性，所以提供$set和$delete API5。13、说一下V-bind是什么，有什么用
20、？【仅供参考】v-bind：绑定属性14、说一*下 vm. $mount ()的作用【仅供参考】手动地挂载一个未挂载的实例15、vue中key值的作用【仅供参考】需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此 节点，找到正确的位置区插入新的节点所以一句话，key的作用主要是为了高效的更新虚拟DOM16、谈谈你对keep-alive的了解？【仅供参考】keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重 新渲染，其有以下特性：一般结合路由和动态组件一起使用，用于缓存组件；提供include和exclude属性，两者都支持字符串或正则表达式，in
21、clude 表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会 被缓存，其中exclude的优先级比include高；对应两个钩子函数activated和deactivated ,当组件被激活时，触发钩子 函数activated,当组件被移除时,触发钩子函数deactivatedo 17、v-cloak指令的作用【仅供参考】用于 防止闪屏，防止页面出现18、说一下你对组件的理解【仅供参考】对页面某一个区域进行封装，这个区域可以很小，也可以就是整个页面组件本身就是一个Vue实例对象组件必须有且只有一个根元素1、就是一个可复用的vue实例，可以作用组件对页面进行封装，可以把
22、页面 的某一个区域封装成一个组件，然后复用封装的区域可以就是一个标签，也可以是整个页面2、组件就是一个可复用的vue实例，则vue中有的东西，组件中都可以使用 (比如属性计算，监听，生命周期)但是组件没有el这个选项，并且data是一个函数3、组件必需要有一个根元素标签(不能有两个)19、举例说明vue事件绑定中有哪些修饰符，分别作用是什么【仅供参考】stop - 调用 event. stopPropagation () 0prevent - 调用 event. preventDefault () ocapture -添加事件侦听器时使用capture模式。self -只当事件是从侦听器绑定的
23、元素本身触发时才触发回调。keyCode | keyAlias)-只当事件是从特定键触发时才触发回调。.native -监听组件根元素的原生事件。once -只触发一次回调。left - (2. 2. 0)只当点击鼠标左键时触发。right - (2. 2. 0)只当点击鼠标右键时触发。middle - (2. 2. 0)只当点击鼠标中键时触发。passive - (2. 3. 0)以 passive: true 模式添加侦听器20、v-model 的原理？【仅供参考】我们在vue项目中主要使用v-model指令在表单input、textarea、select 等元素上创建双向数据绑定，我们知
24、道v-model本质上不过是语法糖，v- model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件；checkbox 和 radio 使用 checked 属性和 change 事件；select字段将value作为prop并将change作为事件。以input表单元素为例：相当于input v-bind: value=/，something/z v-on: input二something ;$event. target, value”如果在自定义组件中，v-model默认会利用名为value的prop和名为input 的
25、事件，如下所示：父组件：子组件：valueprops:value: String,methods: testl () this. $emit ( input5 ,小红),),四、Webpack/Rollup 篇1、webpack, rollup 和 parcel 对比？【仅供参考】webpack为处理资源管理和分割代码而生，可以包含任何类型的文件，灵活， 插件多rollup用标准化的格式(es6)来写代码，通过减少死代码(tree-shaking) 尽可能地缩小包体积parcel超快的打包速度，多线程在多核上并发编译，不用任何配置webpack 和 rollup 都需要配 config 文件，
26、指明 entry, output, plugin, transformations二者的细微区别在于：rollup 有对 import/export 所做的 node polyfills, webpack 没有rollup支持相对路径，而webpack没有，所以得使用path. resolve/path. join 两者实现tree-shaking的方式也不一样，这是个面试点，会问到，实现方式， 哪个体积更小更彻底，为什么parcel则是完全开箱可用的，不用配置2、Webpack的基本功能有哪些？【仅供参考】代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等等文件
27、优化：压缩JavaScript、CSS、html代码，压缩合并图片等代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异 步加载模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类 合并成一个文件自动刷新：监听本地源代码的变化，自动构建，刷新浏览器代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试 是否通过自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。3、Webpack的打包过程/打包原理/构建流程？【仅供参考】初始化：启动构建，读取与合并配置参数，加载plugin,实例化Compiler 编译：从Entry出发，针对每个Mo
28、dule串行调用对应的Loader去翻译文件中 的内容，再找到该Module依赖的Module,递归的进行编译处理输出：将编译后的Module组合成Chunk,将Chunk转换成文件，输出到文件系 统中细节：Webpack CLI通过yargs模块解析CLI参数，并转化为配置对象option (单 入口： Object,多入口: Array),调用 webpack (option)创建 compiler 对 象。如果有 option, plugin,则遍历调用 plugin. apply ()来注册 plugin,判断是否开启了 watch,如果开启则调用compiler, watch,否则调
29、用 compiler. run,开始构建。创建Compilation对象来收集全部资源和信息，然后触发make钩子。make阶段从入口开始递归所有依赖，每次遍历时调用对应Loader翻译文件中内容，然后生成AST,遍历AST找到下 个依赖继续递归，块级元素有：div ul ol li dl dt dd hl h2 h3 h4p空元素：常见：br hr img input link meta不常见： area base col command embed keygen param source track wbr4、请你说一下Web Worker和WebSocket的作用。【仅供参考】Web W
30、orker的作用如下：(1)通过 worker= new Worker (url)加载一个 JavaScript 文件，创建一个 Worker,同时返回一个Worker实例(2)用 worker. postMessage (data)向 Worker 发送数据(3)绑定worker, onmessage接收Worker发送过来的数据(4)可以使用worker, terminate ()终止一个Worker的执行。WebSocket的作用如下。它是Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是 HTML5新增的协议，WebSocket的连接是持久的，它在客户端和服务器之间保 持双
31、工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的 时间间隔去轮询。5、HTML5应用程序缓存为应用带来什么优势？【仅供参考】应用程序缓存为应用带来3个优势。(1)离线浏览，让用户可在应用离线时(网络不可用时)使用它们。(2)速度，让已缓存资源加载得更快。(3)减少服务器负载，让浏览器将只下载服务器更新过的资源。6、介绍一下你对浏览器内核的理解？【仅供参考】主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引 擎。渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加 入CSS等)，以及计算网页的显示方式，然后
32、渲染到用户的屏幕上。JS引擎则：解析和执行javascript来实现逻辑和控制D0M进行交互。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立， 内核就倾向于只指渲染引擎。根据入口和模块之间关系组装chunk,输出到dist中的一个文件内。在以上过程中，webpack会在特定的时间点(使用tapable模块)广播特定的 事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的 api改变webpack的运行结果4、webpack的作用是什么，谈谈你对它的理解？【仅供参考】现在的前端网页功能丰富，特别是SPA (single page web applicati
33、on单页 应用)技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解 决Scss, Less新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于webpack的辅助了。现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推 出了和自身框架依赖的webpack构建工具。react. js+WebPackvue. js+WebPackAngluarJS+WebPack5、HMR热模块更新【仅供参考】借助 webpack. HotModuleReplacementPlugin (), devServer 开启 hot场景1：实现只刷新css,不影响js
34、场景2： js中实现热更新，只更新指定js模块if (module, hot) module, hot. accept C ./library, js , function() / Do something with the updated library module)；6、webpack的工作原理？【仅供参考】WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass, TypeScript等)，并将其转换和打包为合适的格式供浏览器使用。在3.0出现 后，Webpack还肩负起了优化项目的责任。7、
35、有哪些常见的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： 压缩 jscommons-chunk-plugin：提取公共代码 define-plugin：定义环境变量8、常见 Plugi
36、ns【仅供参考】HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle. js cleanwebPackPlugin打包自动删除上次打包文件9、前端为什么要进行打包和构建？【仅供参考】代码层面：体积更小（Tree-shaking、压缩、合并），加载更快编译高级语言和语法（TS、ES6、模块化、scss） 兼容性和错误检查（polyfill, postcss, eslint） 研发流程层面：统一、高效的开发环境统一的构建流程和产出标准集成公司构建规范（提测、上线）10、webpack的核心概念【仅供参考】Entry：入口，Webpack执行构建的第一步将从Entry
37、开始，可抽象成输入。 告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index. js output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认 为./distModule：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。 Loader：模块转换器，用于把模块原内容按照需求转换成新内容。Plugin：扩展插件，在Webpack构建流程中的特定时机会广播出对应的事件, 插件可以监听这些事件的发生，在特
38、定时机做对应的事情。11、loader的作用【仅供参考】webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函 数会以源码作为参数，比如，将ES6转换为ES5,将less转换为css,然后再 将css转换为js,以便能嵌入到html文件中。12、谈谈你对Webpack的理解(Webpack是什么？)【仅供参考】Webpack是一个模块打包器，可以分析各个模块的依赖关系，最终打包成 bundle 静态文件(js css jpg)。webpack是一个静态模块打包器，当webpack处理应用程序时，会递归构建一 个依赖关系图，其中包含应用程序需要的每个模块，然后将这些
39、模块打包成一 个或多个bundleowebpack就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换 成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间 有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做 处理。webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就 能加入到这条生产线中，去改变生产线的运作。13、有哪些常见的Loader?他们是解决什么问题的？【仅供参考】file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输 出的文件
40、url-loader：和file-loader类似，但是能在文件很小的情况下以base64的 方式把文件内容注入到代码中去source-map-1 oader：加载额外的Source Map文件，以方便断点调试 image-loader：加载并且压缩图片文件babel-loader：把 ES6 转换成 ES5css-loader：加载CSS,支持模块化、压缩、文件导入等特性style-loader：把CSS代码注入到JavaScript中，通过D0M操作去加载 CSSoeslint-loader：通过 ESLint 检查 JavaScript 代码14、什么是 Tree-sharking?【仅
41、供参考】指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking 通过 UglifyJsPlugin 来进行，css 中通过 purify-CSS 来进行。【仅供参考】babel-preset-es2015: babel-preset-es2016: babel-preset-es2017: babel-preset-latest:15、理解 babel-preset-env可以将es6的代码编译成es5.可以将es7的代码编译为es6.可以将es8的代码编译为es7.支持现有所有ECMAScript版本的新特性 16、babel 相关：polyfill 以
42、及 runtime 区别，ES stage 含义,preset - env作用等等【仅供参考】polyfill 以及 runtime 区别babel-polyfill的原理是当运行环境中并没有实现的一些方法，babel- polyfill会做兼容。babel-runtime它是将es6编译成es5去执行。我们使用es6的语法来编写， 最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6, 只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。babel-polyfill它是通过向全局对象和内置对象的prototype上添加方法来实 现的。比如运行环
43、境中不支持Array, prototype. find方法，引入polyfill, 我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。babel-runtime:它不会污染全局对象和内置对象的原型，比如说我们需要 Promise, 我们只需要 import Promise from 5babel-runtime/core- js/promise即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。StageStageStageStageStage0 -设想1 -建议2 -草案3 -候选4 -完成stage-x：指处于某一阶段的js语言提案 (Strawman)：只是一个想法
44、，可能有Babel插件。(Proposal)：这是值得跟进的。(Draft)：初始规范。(Candidate)：完成规范并在浏览器上初步实现。(Finished)：将添加到下一个年度版本发布中。17、plugin的作用【仅供参考】plugin是一个类，类中有一个apply （）方法，主要用于Plugin的安装，可以在 其中监听一些来自编译器发出的事件，在合适的时机做一些事情。18、Plugin （插件）的作用是什么？【仅供参考】Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它给 Webpack带来了很大的灵活性。Webpack是通过plugins属性来配置需要使用的
45、插件列表的。plugins属性是 一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过 构造函数传入这个组件支持的配置属性。19、什么是bundle,什么是chunk,什么是module【仅供参考】bundle：是由webpack打包出来的文件chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块 module：是开发中的单个模块20、怎么配置单页应用？怎么配置多页应用？【仅供参考】单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入 口即可，这里不再赘述多页应用的话，可以使用webpack的AutoWebPlugin来完成简单自
46、动化的构 建，但是前提是项目的目录结构必须遵守他预设的规范。多页应用中要注意的 是：每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比 如，每个页面都引用了同一套css样式表随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够 灵活，避免每次添加新页面还需要修改构建配置五、性能/浏览器/其他篇1、如何设置DNS缓存?【仅供参考】在浏览器地址栏中输入URL以后，浏览器首先要查询域名（hostname）对应服 务器的IP地址，一般需要耗费20120nls的时间。DNS查询完成之前，浏览器无法识别服务器IP,因此不下载任何数据。基于性 能考虑，ISP运营商、局域网路由
47、、操作系统、客户端（浏览器）均会有相应 的DNS缓存机制。（1）正IE缓存30nlin,可以通过注册表中DnsCacheTimeout项设置。（2） Firefox 混存 1 min, 通过 network. dnsCacheExpiration 配置。（3）在Chrome中通过依次单击“设置”一“选项” 一 “高级选项”，并勾选 “用预提取DNS提高网页载入速度”选项来配置缓存时间。2、如何优化服务器端的接口？【仅供参考】具体方法如下。（1）接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成 一个以减少HTTP请求数。（2）减少数据量：去掉接口返回的数据中不需要的数据。（3）缓存数据：首次加载请求后，缓存数据；对于非首次请求，优先使用上次 请求的数据，这样可以提升非首次请求的响应速度。3、列举你知道的Web性能优化方法。【仅供参考】具体优化方法如下。（1）压缩源码和图片（JavaScript采用混淆压缩，CSS进行普通压缩，JPG 图片根据具体质量压缩为50喧70%,把PNG图