写给初级前端的面试经验

太过爱你忘了你带给我的痛 2021-09-20 06:30 355阅读 0赞

最近到了金三银四的跳槽季，很多人都会面临跳槽找工作，并且再过几个月又会到毕业季，越来越多的毕业生会面临这个问题。

同样，我们组因为业务需要（我们今年倒是还没有人员离职，感动╭(╯^╰)╮）需要进行社招，我最近看了不少简历，并且对一些小伙伴进行了电话沟通（电面），对面试找工作有一些自己浅薄的观点

因为个人认为本人的技术还是很菜的，并且工作经验也没有特别丰富，所以文章内容都是自己一些浅薄的看法观点，若有不对之处，欢迎大家指出，不喜勿喷啊~~~

本篇文章可能只是适用于初级前端，也就是刚毕业的大学生或者毕业 2 年之内的小伙伴，大家酌情阅读~~~

(更新：最后的面试题只是自己总结的一些偏基础的知识~~~ 刚毕业的小伙伴看着也不要有什么压力，不是代表初级前端必须掌握的技能，只是总结出前端面试中比较常见的问题~~~作为面试者，多准备一些有益无害嘛ヾ(=･ω･=)o)

如果大家喜欢，可以点赞或留言我再继续更新面试题~~~~，谢谢大家~~~

## **简历的格式** ##

简历最好在 1-2 页，最好不超过 2 页。简历真的不是字写的多就好，不管是技术还是 hr 都很难一个字一个字看你的简历。所以简历上写的一定是精华，需要写你的优势。

个人不太喜欢花里胡哨的简历，排版整齐就好，但是也要注意不要有错别字，虽然都知道是无心的，但是给人的印象确实不怎么好，最起码可以说明你没有仔细看过你自己的简历，同时最好区分大小写，数字/英文和汉字之前要有空格，这个真的是一个好习惯，之前在掘金翻译的时候养成的习惯，现在就算是微信聊天基本上也都会遵循，极大的提高了阅读效率。

最好不要使用在招聘网站上使用模板生成的简历，同时要记得使用 PPT 模板的时候要把不必要的东西删除啊= =，（收到过简历上第一行是 chapter，也没有姓名，就问他为什么没有名字，然后给我回答 chapter 是英文名= = ）

对于已经毕业 2 年以上的，学生时期的经历（学生会主席、拿过什么什么奖学金）就可以不用写了。

## **简历的内容** ##

前端这块的简历基本上就基本介绍、技术栈、工作经验、项目经验就可以。

基本介绍写明 姓名、电话和邮箱、毕业时间、学历、出生年月就可以（照片有没有都行、政治面貌、籍贯无所谓），电话一定要真实可以打通的电话（真的遇到过到的简历电话和邮箱中间四位是 \*\*\*\* (ಥ\_ಥ)），也遇到过打电话打几次打不通的（工作日和非工作日都联系过），即使您再优秀，联系不上也白搭啊(/□＼\*)

## **项目经验和投递的 title 相匹配** ##

个人觉得 9102 年了，会用 JQ 基本就可以不用写在简历上了，如果你研究过（不等于看过）JQ 源码可以酌情写上。

同时，你的简历要和你投递的岗位相匹配，比如 title 是资深前端工程师，那么你能够使用 div + css 写页面就可以不用写在简历上了，因为这应该是最最基本的要求。

简历上是要突出你的优势，同时也是自我总结能力的一个体现

## **简历上写的内容要是你擅长的** ##

面试的题目很大部分都是从你简历里面问的。所以，对于那种自己只是找了篇文章然后实现了下的项目或者只是写过 demo 的，就不要写在简历里面了。

简历里面写的一定是你全部了解的，因为前端的技术栈或者各种各样的框架层出不穷，面试者基本不会问一个你没听说过的框架，那怎么知道你会什么呢，就从你的简历里面看喽～

我就遇到过很多简历写的很好，但是一问就不知道了。比如有个简历上写的“对面向对象编程有深刻的理解”，我问：“面向对象的三大要素是什么”，回答：“这个概念性的记不清了。”，好吧，那我换一个：“你平时怎么实现封装和继承”回答：“平时项目中基本用不到” ，“那面向对象和面向过程编程有什么区别呢？” 回答的思路不清晰，磕磕巴巴。对于这种情况，个人觉得你最好就不要把“对面向对象编程有深刻的理解”写在简历上了，因为如果你不写，我可能还不会问，但是你掌握的水平和“有深刻理解”差距还是蛮大的，这就是一个减分项了。

还有一个是简历中在个人技能和项目的第一个都写的是“用 node 开发个人博客”，刚好我本人最近也在做这块内容，想着问下。然后回答“其实我是在网上找了篇博客跟着实现了下，现在忘记了”

所以说简历上真的要写你非常了解的领域啊！只是听过名次和写写 demo 的话写在简历上反而是减分项。

## **注意用词** ##

简历中对某项技术的描述一般有以下几个词语：

> 了解：理解基本概念，有过简单的使用经验 —— “用过” 熟悉：基本操作很熟练，有过密集的使用经验 ——“用得不少” 精通：深入理解其底层原理及各种实现方式，并有丰富的项目经验——“有研究”

切记准确用词，慎用“精通”！！

## **电面** ##

收到简历之后我们一般都会先进行一轮电话面试（每个公司的流程不一样），因为成本比较低嘛，问一些基础问题大概就可以知道面试者的水平在哪个范围了，和我们招聘的岗位的匹配程度如何。

同时，我建议面试者被邀现场面试之前最好也进行下电话沟通，如果直接现场面的话最少你要请半天假吧，如果说双方的匹配程度比较低就不用白跑一趟了。

我们这边电面以基础为主，如果基本能够符合我们的招聘要求，再约现场面。

我个人认为，基础比较好（不仅仅是 js 基础，还有计算机体系基础和编程基础），三大框架熟悉其一并略懂原理 这两点是最起码的，自己用 webpack 配置过项目懂得 webpack 打包原理、学习过框架源码、对性能优化有过实践、对新技术的了解程度 这些都是加分项（因为我们项目中没有用到 node，node 基本不会问，除非你在简历中写有）。

并且也会考虑面试者的综合素质，主要是表达能力（沟通无碍就好）、性格是否十分内向、回答问题是否条理清晰。

我个人的话会有一个常问的面试题库，然后在电面前根据面试者的简历筛选要问的问题，比如前面说到的，你简历中写有“对面向对象有深刻的理解”，那么我就会准备几个面向对象的问题。

整体来说，电面之后就基本可以确定了面试者和我们招聘岗位的匹配程度，在面试的过程中会记录下面试者的回答情况，对于有明确答案的问题看其是否回答正确，对于开放性问题，看其思路是否清晰。

我个人的话问框架 api 都是一些比较常用基础的 api，考察下你使用到什么程度，比较会问一些原理，比如 vue 的双向绑定原理（vue 2.0 和 vue 3.0，两种实现的优缺点）、vue 的 nexttick 原理、diff 算法等。

我们在电面完之后通常都会问面试者有什么问题想要问我们的，大部分面试者会问我们组所做的业务，也会被问到技术方面的问题= =，一般这个环节都是看下面试者有什么诉求的，就是你如果有什么强烈的诉求可以问下。

电面完之后一般不会直接说是否通过，都会说“后续**可能**还会有其他同事联系您”，但是根据点面的过程，应该自己心里都会有个大概吧= =

关于为什么不直接给答案，一方面是处于礼貌:)，一方面是可能当时并不能及时给出结果。

一个比较好的方法就是面试完需要考虑下才能给出答复，并且一般就算面试没有过也不会再给你说没有过。所以默认一周之内如果没有 hr 再联系你，基本就可以认为是面试没有过了。

## **现场面** ##

一般电面之后我们会找 hr 小姐姐约现场面试，对于现场面试我并没有太多的经验，这里只是给出参考意见。

现场面就看各个面试官的习惯了，有的会继续问一些技术，有的会重视项目经验，我们这是现场技术面之后要给一个定级，看是否达到招聘要求。

一般情况下是第一轮面试之后如果能给定级那么就找我们技术 leader 来聊下，把把关，没啥问题再找 hr 小姐姐来聊下。

## **给刚毕业大学生的一点建议** ##

## **刚毕业找工作并不是全看技术** ##

在刚毕业的时候我会认为找工作是只看技术的，毕竟我们是技术岗位。

但是现在自身的感觉包括也和其他小伙伴聊过之后发现技术有的时候占比也没有想象那么高。

因为其实我们毕业之后 1 -2 年内并不是特别能拉开差距，大家的水平相差都不是特别大。

这个时候可能一些其他的品质更重要，比如你的沟通能力、你的性格、是否踏实。

同时，找工作这个事情，运气和缘分也是很重要的，比如当时的岗位是否是急缺岗位，如果是新增的部门或者刚好有人离职需要补位，这些特殊情况下，可能要求会稍微降低些（绝对不会降低太多）。

所以最好是找团队人员内推，这样对团队的情况会更加了解。

但是个人觉得，3 年之后技术水平的差距就会越来越大了，并且想要缩短差距也会越来越难。

## **刚毕业尽量去大公司** ##

其实就和你上大学选择名校还是一般学校，有些人说不想当大公司的螺丝钉的时候可以先问下自己能不能够进入大公司，不要还没有进入就开始酸。

有能力去而选择不去和去不了是两个概念。

从自身以及周围人的经验而谈，大公司你能学到的东西从各方面都是比小公司强一点的（这里说的小公司不代表某些小而精的公司）。

个人经验而言，大公司并不是每个人都是螺丝钉，做重复的劳动，因为你所对接的部门有很多，你需要和各种各样的前端、后端、产品、设计、QA 接触，每个人的习惯都不尽相同，也会遇到跨部门合作，不同部门的技术栈可能会不一样，所以，你所接触的东西是多元化的；

相反，小公司所接触的前端、后端、设计和 QA 基本都比较固定，基本上也不会有跨部门合作的需求，并且技术栈相对而言比较固定，使用了一套技术栈基本也不会换，所以你的技术提升视野可能会稍微窄一点。

并且大公司的业务复杂程度和用户数量也是小公司所不能提供的。

说句实在话，简历中有知名互联网公司的工作经验是很加分的，基本都能有个面试资格，因为从某种程度降低了成本，因为既然能够去知名互联网公司，说明肯定是有优势的。

## **不要只会 API，要了解其原理** ##

我们老大经常给我们说过的一句话是：“不要只会一些 API 的东西”，现在前端的一个现象是，很多人使用了一些 API，就觉得掌握了某些知识。

要注重一些底层知识，一些原理，这才是长远发展的必备技能。

比如在电面的时候问：“一句话概述下什么是 promise”，很多人都回答 promise 的使用方法。

## **找工作是双向选择的过程，一个好的团队很重要** ##

找工作真的是双向选择的过程，不仅仅是公司选择你，也是你选择公司的过程，有能力的话最好找一个好的团队，做的业务是自己喜欢的，最起码不能太反感不是。

其实从面试官你基本也可以判断出该团队的水平，个人的一点看法是，如果你本身还处于成长阶段，如果面试时候问的问题你都可以顺利的回答出，那么该工作你就要慎重考虑下，可能成长空间会小一点。

## **减少跳槽的频率** ##

关于跳槽频率，这个不管是技术 leader 和 hr 都是考虑的一个问题。

因为前几年，个人感觉涨薪的最便捷途径就是跳槽，涨薪幅度会比较高，在一家公司等加薪比较慢。

但是如果你跳槽过于频繁其实是不利的，个人认为，一年跳槽一次这个频率就有些高了。

京东也是将这点明确有要求的，一票否决制度，五二原则（五年内之内最多在两家公司）

## **关于学历** ##

现在很多公司的门槛都是本科相关专业毕业，并且以后的要求肯定会越来越高。

每个公司要求不一样。

## **觉得面试中有些问题工作中用不到** ##

很多人都会有这样的一个问题：觉得面试中问的很多问题在实际工作中根本用不到。

我觉得你会有这样的问题可能是你和这个公司的岗位并不相匹配。

因为当时我面试饿了么的时候，问我了一些简单的算法的问题和一些底层原理，但是面试的时候还有些吐槽。

入职之后，发现面试问的问题在工作中确实用到了，并且在自己准备面试题的过程中，也是根据平时的工作经验总结的。

自己当时觉得用不到是因为之前的业务场景不够复杂，用户量不够大，所以有些知识点用不到，很多产品需求都是需要自己实现的，现有的组件不能满足有些问题。

比如自己需要实现一个组织架构树，对每一个节点进行不同的操作，有的时候还需要 table 和 tree 相结合，一些比较复杂的节点数据可能比较多，所以还需要考虑性能优化的问题。

所以面试的时候就会问: 如何遍历一个树，并对其进行优化。

## **注重底层原理和概念的学习** ##

有的人会问 底层知识，原理有没有用？？ 答案肯定是有用的！！

对于一个人的技能，我觉得最重要的是解决问题的能力，因为我们的工作其实就是解决一个又一个的问题，不管是从产品层面还是从技术层面，都是将这个问题解决。

而你了解更多的底层知识，更多的原理知识，都是提高你解决问题的能力，如果你知道 api 背后的原理就能更好的选择使用哪个 api。

并且了解底层知识和原理也会提高你排查问题的能力，因为你工作中总会遇到：“明明就是这样的啊，为什么报错啊，为什么不能用啊，为什么和预期不对啊”，你如果只是知道 api 是怎么使用的，有的时候是没办法很好的排查问题的。

## **最好从官方文档学习** ##

不知道大家学习知识的时候都是从何种渠道学习的呢？

个人的建议是最好从官方文档学习，遇到问题最好去看下源码。

学习知识最好从一手的内容学习，只看别人的写的博客之类的是不行的，就像吃别人嚼过的馍一样，包括我这篇文章，我都不能保证所有的观点和知识点的正确性，当然了，当你对某个知识点理解不清楚的去看下其他人的观点也是对你有帮助的。

--------------------

下面是我个人的面试题

## **部分面试题（答案仅供参考，不保证其正确性）** ##

## **CSS** ##

## **Q1：怎么实现三列布局（左侧和右侧宽度固定，中间自适应）** ##

[常见 CSS 布局][CSS]

> 该问题主要想了解面试者的思维是否有局限性，实现该布局是一个比较常见并且方法很多的一种布局方式，并且可以引导面试者一步一步回答 CSS 相关的基础问题。

*  绝对定位 + 中间版块不给宽度
 *  两侧浮动 + 中间自动撑开（使用 calc 动态计算宽度，设置对应宽度的 margin）
 *  flex，左右设置 flex-basis，中间设置 flex-grow

> 基本上最常见的答案是这三种布局方式，但是很多人都只说一个 flex，其他两种布局方式稍微考虑下就可以想到（o´ﾟ□ﾟ\`o），该问题不是想让面试者回答出什么奇淫技巧，只是对 CSS 基础知识的一个考察。

Q 1-1: flex 具体是怎么实现三列布局的（左侧和右侧的宽度是怎么设置的，中间自适应使用的是哪个属性）

> flex 设置宽度和宽度自适应应该算是 flex 的最基本用法，在面试中，问到 flex 的设置宽度和中间自适应具体是哪个属性，很多面试者都回答“不记得了，平时都是自动填充的”

Q 1-2: 设为 flex 属性之后，子元素的哪些属性会失效

float、clear 和 vertical-align

Q 1-3 float/绝对定位 怎么实现中间宽度自适应

## **Q2: 移动端开发 rem 布局的原理（rem 单位换算）** ##

## **Q3: 有没有自己写过组件** ##

Q 3-1: 怎么实现样式的继承和复用

Q 3-2: 你平时都是怎么管理自己的 CSS

*  base.css、common.css、page.css（对应都存放哪些内容）

Q 3-3: 你平时都是使用 sass/lass/styles 的哪些功能，sass 的计算属性对页面性能有影响吗？

## **Q4: 如何在页面上画一个圆** ##

*  SVG
 *  CANVAS
 *  css border-radius
 *  background
 *  map + area
 *  直接放一张圆形图片

Q 4-1: 如何在页面上画一个椭圆

![v2-3c40829a650f96ab57be6975d78f8601_hd.jpg][]

Q 4-2: 如果圆边界模糊，有什么办法去锯齿

> 这几个问题基本上可以了解到面试者平时都是怎么使用 CSS 的了，对于 CSS，我觉得够用就好，因为我们现在基本急太处理兼容性问题（有 babel 并且我们的项目不要求兼容 ie6 等古老的浏览器）

## **JS** ##

## **Q1: JS 基本数据类型** ##

[cherryblog.site/deepcopy.ht…][cherryblog.site_deepcopy.ht]

Q 1-1 JS 数据类型有哪些，其中基本数据类型有哪些

*  Boolean
 *  Null
 *  Undefined
 *  Number
 *  String
 *  Symbol (ECMAScript 6 新定义)
 *  Object

(ES6之前)其中5种为基本类型:string,number,boolean,null,undefined,ES6出来的Symbol也是原始数据类型 ，表示独一无二的值。Object 为引用类型(范围挺大),也包括数组、函数

Q: 1-2 原始数据类型和引用类型的区别

在内存中的存储方式不同，原始数据类型在内存中是栈存储，引用类型是堆存储 栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

在内存中存储方式的不同导致了原始数据类型不可变 原始数据类型和引用数据类型做赋值操作一个是传值一个是传址

Q: 1-3 深拷贝 和 浅拷贝 的区别

[cherryblog.site/deepcopy.ht…][cherryblog.site_deepcopy.ht]

Q: 1-4 怎么实现浅拷贝

*  ES6：object.assign()
 *  展开运算符…
 *  自己封装函数实现

Q: 1-5 怎么实现一个深拷贝

*  JSON.parse() (但是如果里面有 function 和 undefined 不可用)
 *  lodash
 *  自己封装

Q: 1-6 null和undefined的差异

相同点:

*  在 if判断语句中,值都默认为 false
 *  大体上两者都是代表无,具体看差异 差异:
 *  null转为数字类型值为0,而undefined转为数字类型为 NaN(Not a Number)
 *  undefined是代表调用一个值而该值却没有赋值,这时候默认则为undefined
 *  null是一个很特殊的对象,最为常见的一个用法就是作为参数传入(说明该参数不是对象)
 *  设置为null的变量或者对象会被内存收集器回收

> 这个问题是一个 JS 基础相关的问题，可以考察面试者 JS 基本功

## **Q2: 实现给数字添加千分位符的方法** ##

*  正则表达式：`"12345678".replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')`
 *  字符串分析， 循环，然后3位加','
 *  数字分析， 取到整数部分， %1000 操作， 然后加逗号 拼接字符串 (12345678).toLocaleString("en-US") => "12,345,678"

## **Q3: 面向对象三大要素** ##

[cherryblog.site/javascript-…][cherryblog.site_javascript-]

*  封装、继承、多态

Q3-1: 能够简单的说明面向对象和面向过程的区别吗

*  面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
 *  面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
 *  面向对象： 狗.吃(屎)
 *  面向过程： 吃.(狗,屎)

Q3-4: 怎么实现封装和继承

Q3-5: 一句话概述什么是闭包

## **Q4: 一句话概述什么是 promise** ##

> The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.  
> 译文：Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

## Q 4-1: promise 解决了哪些问题 ##

## Q 4-2: 在没有 promise 之前，怎么解决异步回调 ##

[JS 异步回调的 4 种解决方案][JS _ 4]

## Q 4-3: 自己如何实现一个 promise（[blog.csdn.net/chaunceyw/a…][blog.csdn.net_chaunceyw_a] ##

*  new Promise(fn) 返回一个promise对象
 *  在fn 中指定异步等处理
    
     *  处理结果正常的话，调用resolve(处理结果值)
     *  处理结果错误的话，调用reject(Error对象)

> promise 也是一道常见的面试题，在开始问什么是 promise 的时候，很少有人能够用一个话说出什么是 promise，都只是说 promise 的 api 怎么使用，包括闭包，也很少有人能够用一句话概括什么是闭包。个人感觉不能用一句话概括都是理解的不够深入或者没有从更高的层面理解

## **Q5: eventloop** ##

在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，如果微任务不是空的那么执行微任务中的事件，如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈...如此反复，进入循环。

*  macro-task(宏任务)
    
     *  setTimeout
     *  setInterval
     *  setImmediate

*  micro-task(微任务)
    
     *  Promise
     *  process.nextTick

> eventloop 也是一个很常见的面试题，也是回答出来比较高的一个问题，可以写一个函数，让面试者回答输出

## **计算机相关** ##

## **Q1 :比较 HTML XML XHTML 和 JSON** ##

*  我们最熟悉的就是 HTML（HyperText Markup Language / 超文本标记语言），用来描述和定义 网络内容的标记语言，超文本的意思是说，除了能标记本文，还能标记 图片，视频，链接 等其他内容
 *  XML（Extensible Markup Language / 可扩展标记语言），表现就是给一堆文档加上标签，说明里面的数据是什么意思，方便存储、传输、分享数据。和 HTML 的区别是 HTML 的标签就预定义的，XML 是可扩展的 XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语，其实就是 HTML 的严格语法形式，约定了 属性名必需小写，空元素必需关闭，元素名小写，属性名必需加引号，布尔类型必需加属性值
 *  JSON（Javascript Object Notation）比较轻量级的数据交换格式，由键值对组成，数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小

> 这个问题确实是一个很基础的计算机先关的问题，但是很多的面试者仍然不能准确的说出 HTML 的含义（超文本标记语言），在说 XML 和 JSON 的区别的时候只能回答出 XML 常用作配置文件，JSON 用于 AJAX 传输数据

## **Q2: 概述输入一个url到网页呈现的过程** ##

Q 2-1: DNS 解析的详细过程

Q 2-2: 概述 http 的缓存控制（http2 与相关缓存控制）

Q 2-3: 简述三次握手

Q 2-4: 页面加载白屏的原因有哪些，以及如何监控白屏时间，如何优化

Q 2-5：script 标签的属性有哪些

Q 2-6: script 标签的 defer 和 async 标签的作用与区别

Q 2-7: script intergrity的作用

> 这个问题真的是前端面试必问问题，因为能全方面考察面试者的能力，能根据面试者的回答层层层深入，引申出好多问题

## **Q3: 你所接触的前端领域的通讯有哪些（[github.com/rainjay/blo…][github.com_rainjay_blo]** ##

*  前端和后端
 *  前端和移动端
 *  前端 父页面 和 iframe 之间
 *  浏览器各个 tab 之间
 *  web workers 线程通信
 *  路由间的通信
 *  vue 父子组件

## Q 3-1: 通信的要点和目的 ##

要点：1. 发送者和接收者 2. 传输媒介 3. 传输的数据 4. 传输格式（协议）

目的：1. 同步数据 2. 传递指令(执行的方法)

## **框架** ##

## **Q1: 三大框架解决了传统 JQ 开发的哪些问题** ##

使前端不用再操纵 DOM,数据驱动，通过数据的改变直接改变 DOM

Q 1-1: Vue2.0 怎么实现双向绑定的

Q 1-2: Vue3.0 怎么实现双向绑定的

Q 1-3: Object.defineProperty() 和 proxy 的区别

## **Q2: 你使用过哪些 Vue/React 全家桶，分别解决了什么问题** ##

## **Q3: Vue/React 的 diff 算法** ##

## **Q4: Vue hash 路由和 history 路由的区别** ##

## **Q5: Vue 计算属性和 watch 在什么场景下使用** ##

## **Q6: Vue 的 nexttick 实现的原理** ##

> 对于 Vue/React/Angular 三大框架会使用哪些 api 是次要的，主要是要了解框架解决的问题和实现原理。

## **打包工具** ##

## **Q1: webpack 相关，是否自己配置过** ##

Q1-1: webpack 和其他自动化构建工具（gulp、grunt、rollup）有哪些区别（[juejin.im/post/5b10c6…][juejin.im_post_5b10c6]

*  webpack 是 module bundle
 *  gulp 是 tast runner
 *  Rollup 是在 Webpack 流行后出现的替代品。Rollup 在用于打包 JavaScript 库时比 Webpack 更加有优势，因为其打包出来的代码更小更快。 但功能不够完善，很多场景都找不到现成的解决方案。

Q1-2: 模块化解决了前端的哪些痛点

*  命名冲突
 *  文件依赖
 *  代码复用

Q1-3: webpack 的 loader 和 plugin 区别，举几个常用的 loader 和 plugin 并说出作用

*  loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！ 因为 webpack 本身只能处理 JavaScript，如果要处理其他类型的文件，就需要使用 loader 进行转换，loader 本身就是一个函数，接受源文件为参数，返回转换的结果。
 *  Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 通过plugin（插件）webpack可以实 loader 所不能完成的复杂功能，使用 plugin 丰富的自定义 API 以及生命周期事件，可以控制 webpack 打包流程的每个环节，实现对 webpack 的自定义功能扩展。

Q1-4: webpack 打包的过程

*  读取文件，分析模块依赖
 *  对模块进行解析执行（深度遍历）
 *  针对不同的模块使用不同的 loader
 *  编译模块，生成抽象语法树（AST）
 *  遍历 AST，输出 JS

Q1-5: webpack 打包之后生成哪些文件

## **Q2: webpack 打包出来的文件体积过大怎么办** ##

## **Q3: webpack 热部署的原理** ##

## **Q4: webpack 打包速度过慢怎么办？** ##

> 关于 webpack ，对于初级前端，基本上只需要可以 cli 将项目起来，知道 loader 和 plugin 的区别以及常用的 loader、plugin 个人觉得就差不多了，但是对于 高级前端及以上，最好还是了解下 webpack 相关的原理

## **GIT 相关** ##

## **Q1: git rebase** ##

## **Q2: git cherrypick** ##

[CSS]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fcherryblog.site%252Fcommon-CSS-layout.html
[v2-3c40829a650f96ab57be6975d78f8601_hd.jpg]: https://pic2.zhimg.com/80/v2-3c40829a650f96ab57be6975d78f8601_hd.jpg
[cherryblog.site_deepcopy.ht]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fcherryblog.site%252Fdeepcopy.html
[cherryblog.site_javascript-]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fcherryblog.site%252Fjavascript-oop.html
[JS _ 4]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttp%253A%252F%252Fwww.ruanyifeng.com%252Fblog%252F2012%252F12%252Fasynchronous%2525EF%2525BC%2525BFjavascript.html
[blog.csdn.net_chaunceyw_a]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fblog.csdn.net%252Fchaunceyw%252Farticle%252Fdetails%252F78007842%2525EF%2525BC%252589
[github.com_rainjay_blo]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fgithub.com%252Frainjay%252Fblog%252Fissues%252F4%2525EF%2525BC%252589
[juejin.im_post_5b10c6]: https://link.zhihu.com/?target=https%3A//juejin.im/post/5b10c6786fb9a01e7c27761b%25EF%25BC%2589