1月前端面试记-外链论坛 - Powered by Discuz! Archiver

f9yx0du 发表于 2024-7-9 17:58:35

1月前端面试记

<img src="http://mmbiz.qpic.cn/mmbiz_gif/hGeYs9Tr6I8AhabwXibPbGVpibNP1SrD0ZPenpfJvvDibcMn64OMlz2Oibky0ep5VzicLZYgX9XHLhPxibqXSqVuPAHQ/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
编者注： 【文末有惊喜】作者于16.12.18辞职，之前有过一年上下的前端工作经验。从12月26号起始到1月9号先后面试了微X，百度，阿里巴巴uc，唯品会以及深圳腾讯等几家机构，特此总结与各位共勉。作者： WU_CHONG原文链接：https://gold.xitu.io/post/587dab348d6d810058d87a0a
<h3 style="color: black; text-align: left; margin-bottom: 10px;">背景</h3>
我于16.12.18辞职，之前有过一年上下的前端工作经验。从12月26号起始到1月9号先后面试了微X，百度，阿里巴巴uc，唯品会以及深圳腾讯等几家机构，特此总结与各位共勉。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">微X</h3>
因为我已然毕业工作过，因此去微X面试是走的社招。微X社招极其严格，共八轮面试，总体来讲我基本上当了一把炮灰。因为腾讯前端又细分为重构和JS，因此微X的面试基本上以JS为主。微X第1面是笔试，共一个小时，四道编程题:
JS手写二分搜索算法
给你一段代码，让你发掘其中的问题(考察闭包)
实现一个Lazyman(请自动搜索)
用JS代码求出页面上一个元素的最后的bac公斤round-color，不思虑IE浏览器，不思虑元素float状况。
前两道题比较基本，只要有JS基本的朋友通常都应该没什么问题。第三道题，有些难度，然则我之前曾在网上见过该题，运用队列或promise都能够。第四道题，看完之后满脸懵逼，想了半天亦没明白它考察什么内容。因为时间关系，我直接用了window.getComputedStyle。后来交完之后仔细想想，好似确实有非常多状况没思虑到，例如当这个元素的背景色为透明时，它最后的背景色应该为其父元素的背景色。微X二面是项目经历面，我跟面试官大致介绍下我过去一年做的项目。而后掏出笔记本起始一块看我之前写的代码，面试官觉得我之前做的项目繁杂度不太高。而后就问了我其他几个问题:既然你面的是小程序组，那样你认识小程序吗？我说不认识。而后问我是不是运用过React，我说无。面试官不是很满意，但最后让我过了。微X第三面是前端基本面，面完之后我的人生观出现了改变，我感觉我不配做前端。第1个问题是，请问前端优化的手段有那些？我心里暗喜，这么简单的问题还问。而后我答将CSS文件放在上面，JS文件放在下面。正准备说下一条时，面试官问为何这般做?我答JS下载解析时会阻塞DOM树的构建，倘若放在上面可能会显现白屏的状况。而后面试官问，有无可能让JS下载解析不阻塞DOM树构建?我答运用defer或asyn字段。面试官问有什么区别？我答...而后面试官问CSS下载解析会不会阻塞DOM树渲染?我已然起始一身汗了，这个问题我不太确定。而后面试官让我接着说优化手段，我答CSS-sprit或将小图运用base64内嵌。面试官问我CSS-sprit原理是什么?运用base64虽然会减少请求数，然则会增大文件的体积，以什么为基准去衡量什么时候运用base64?此时我已然泪流满面。而后面试官问我认识HTTPS吗？我说认识。他问，请问HTTPS和HTTP有什么区别?我答HTTPS增多了SSL层。面试官问请画出SSL四次握手过程?此刻已然崩溃，我答不会。而后他问请问SSL握手时有对叫作加密和非对叫作加密吗？我答不晓得。他问怎样优化这一层？我答不晓得。而后继续回答优化手段?我答将静态内容推向CDN。而后他问此刻CDN不稳，时而工作时而崩溃，我有一个首页怎样保证每次都能正常表示该首页?答案是CSS inline。他看了看时间，说那就下一个问题。而后给了我一个柱状图，让我运用html和CSS绘制出来。当时我是用了flex。而后他让我手写一个快排算法，我写了。而后他让我用CSS和JS动画在刚才那个柱状图中表现出快排的全部过程，而后我哭了。其实这个动画是见过的，只不外平时运用的都是canvas。面试结束，我跪了。整体来言，微X的面试难度还是挺大的。他对每一个细节的考察非常仔细，不仅需求你知其然更要让你知其为何。另一一方面我亦认识到了准备的不足。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">百度</h3>
百度的面试是我最爱好的，考察的比较全面。百度第1面为基本面，包含HTML/CSS/JS各方面，共50分钟上下，大约30个问题上下:
HTML5新特性(新增的标签, API等)，如localstorage的用法以及与cookie的区别，怎样理解web语义化
CSS3新特性，如动画等
CSS特性，如position的用法，怎样实现居中，bootstrap源代码的理解，盒模型(W3C和IE)，flex的运用
前端兼容性处理(CSS hack技术)
JS基本，如this用法，new关键字的过程，call与apply的区别，闭包，原型以及JS怎样实现继承
前端基本，浏览器缓存，跨域，从输入url到渲染的全部过程，事件(W3C和IE)，TCP三次握手过程，怎样实现懒加载(跟预加载的区别)
百度二面为基本面+算法+项目经历，连续一个小时。问题如下:
之前有看过你做的一个移动页简历，请问怎样实现？我重点是运用REM+Media Query，按照区别尺寸的设备进行区别的font-size设置。而后问我REM和EM的区别，倘若父元素的font-size亦是采用em表示，那样子元素的font-size怎么计算等。
有无遇到过margin重叠的现象，怎样处理？BFC
平常的清除浮动的办法有那些？bootstrap是怎么做的？bootstrap是怎么实现grid系统的？
怎么理解JS模块化？有无运用过webpack？
算法题仅有一道:什么是浅复制和深复制？有什么区别？如何实现Object的深复制？首要我对这个问题进行分析，Object是一个树形结构，因此我采用递归的办法进行复制。面试官随后提问能否经过循环的办法？我思考了一会，回答说循环的关键在于循环要求的设置，我想借助栈做为循环判断的要求，当栈为空时，循环结束。当时我马上反应过来，由于Object子节点的个数不确定，可能入栈出栈会存在必定问题。面试官随后问，还有什么东西无思虑到吗？我想了下说无。他提示了下，倘若显现环怎么办？我愣了一下说不晓得。而后他给我个提示说运用深度优先的办法借助栈并不可处理这个问题，而后让我运用宽度优先试试，将代码发给他。面试结束后我发给了他我的代码，各位能够参考下:// 深度优先遍历复制, 借助队列function deepCopy(obj) { var newObj = {}, srcQueue = [obj], srcVisitedQueue = [], copyQueue = [newObj], copyVisitedQueue = []; while (srcQueue.length > 0) { var currentSrcElement = srcQueue.shift(), currentCopyElement = copyQueue.shift(); srcVisitedQueue.push(currentSrcElement); copyVisitedQueue.push(currentCopyElement); for (var key in currentSrcElement) { if (typeof currentCopyElement[key] !== object) { currentCopyElement[key] = currentSrcElement[key]; } else { // 有环的状况 var index = srcVisitedQueue.indexOf(currentSrcElement[key]); if (index >= 0) { currentCopyElement[key] = copyVisitedQueue[index]; } else { srcQueue.push(currentSrcElement[key]); currentCopyElement[key] = {}; copyQueue.push(currentCopyElement[key]); } } } } return newObj;}// Test case// 1. 只含有简单类型的Object{a: 1, b:2} => pass// 2. 简单类型和繁杂类型同期存在的状况下的Object => pass:// var obj1 = {//     a: 1,//     b: 2,//     c: {//         d: 3,//         e: {//             f: 4,//             g: 5//         }//     },//     h: {//         i: 6,//         j: 7//     }// };// 3. 有环的状况下的Object => pass:// var obj1 = {//     a: 1,//     b: 2,//     c: obj1// };
而后面试官问了关于我项目经历，之前曾看到你推进过机构的模块化，请问是基于什么背景，你是怎样推进的，遇到过什么问题等等。百度三面便是属于开放性面试。首要面试官跟我讨论了下我二面其中的那道算法题，问我是不是处理，环怎样处理，而后问是不是看过Jquery的源代码怎么进行Object的深复制的？我答看过，是采用递归。他而后问为何Jquery对环的思虑只判断当前节点是不是为根节点?该问题我没回答上来。而后他说此刻百度有许多分部，每一个分部都有自己的组件库，实现的功能基本相同，但有的用的是原生的JS，有的是运用JQuery，有的是运用React，此刻想进行统一，怎样处理？我说采用重构，他问了问我重构的思路有那些。而后他说百度有些项目在线上已然很久了，代码比较陈旧，倘若你去重构可能会对线上的版本有冲击，你怎么处理这个问题?我答小幅度重构，而后进行回滚等。而后他问，此刻有一个很急的项目，必须一个组件，刚好网上供给的有该组件，你是怎样屏蔽该组件与现有项目的差异?我的思路是写一个wrapper屏蔽掉该组件与现有库的差异。而后面试官问，倘若引入该组件必要引入一个新的库，如React你该怎样选取？引入的话有什么好处坏处？我供给了自己的有些看法。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">阿里巴巴UC</h3>
UC的面试是最容易的，以至于我感觉我可能没经过。UC第1面是一个阿里非常高级的前端工程师，面试大约一小时。首要让我讲了讲我对移动前端的认识？而后我讲了讲移动前端布局，JS方面，性能优化等，大于15分钟。而后他问我怎样理解前端工程化？而后我又讲了15分钟等。而后他问我有什么问题吗？我问请问你怎样理解前端以及你是怎样从pc端转入移动端？他站在黑板上给我讲了20多分钟。包含hybrid技术以及此刻流行的RN和Weex，以及阿里此刻的业务运用的有些技术以及为何运用等。第1轮面试结束。第二轮面试是一个后端的哥们，面试大约30分钟。问了我有些前端优化的办法，以及平常遇到过最大的困难是什么，怎样处理。有什么难忘的事等。而后问我有什么问题？我说为何你不问我前端的基本知识亦不问我前端的项目经验？他说不必，已然认识我的背景了等等，而后带我吃了个饭。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">唯品会</h3>
唯品会技术面共5轮，考察的非常全面。前两面都是基本面跟百度大概类似。然则它重点问了我web安全的有些知识，xss和csrf。问我怎样处理关联的问题？xss的话重点运用转义，csrf的话项目中我重点运用的是jwt(javascript web token)。而后针对jwt细节问了我20多分钟。第三面是一个制品经理面，说虽然是技术然则还是要认识制品才行。问我有无用过唯品会app，我说无。而后问我晓得唯品会是干什么的吗？我说一家专做特卖的网站。而后给我一个唯品会的页面问我有什么意见，而后我讲了20多分钟。第四面是技术总监，进来之后先把我吊了一顿。说虽然感觉你前端基本各方面比较好，然则唯品会的业务性非常强，我无任何电商方面的经验等，让我过来从头做起之类的。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">腾讯</h3>
因为面试的是移动方面的业务，因此重点问的有zepto库的运用，移动端布局，优化，JS的有些基本还有localstorage等。重点还问了一下我是怎样在项目中开展测试的(单元测试和e2e测试)。后序面试因为要去深圳总部，因此我推掉了。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">总结</h3>
针针对前端的面试，还是必须必定的时间去好好梳理，尤其是知识点的细节必定要非常清楚。关于项目经历必定要有一条主线，在这条主线上你做过什么，遇到过什么坑，怎么处理必定要非常清楚等。另一一点算法还是很要紧的，举荐大众一本书<<剑指offer>>，面试前我前前后后看过三遍。共勉之！
<img src="http://mmbiz.qpic.cn/mmbiz/cZV2hRpuAPjEIibB1UYw1VMPzscNxReKZVxEh23qB9KgPqFq3uoyBy3M93PcFOunrvjkYVrtfvXMworbBuWAZ4A/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
福利时间想要加入咱们TopGeek社群吗？想要与志同道合的小伙伴们一块成长和发展吗？想要即时得到各样技术福利吗？<a style="color: black;">请点击查看文案：《加入咱们-TopGeek社群》认识详情或点击下方的阅读原文</a>。<img src="http://mmbiz.qpic.cn/mmbiz_jpg/hGeYs9Tr6IicRCMqLknZwfVzS8jia9qOKtOceALo4wzjhxpOo6L6HmpN5sW6ict3DEemGSUJxPKPRpnz8BAgxfIew/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/hGeYs9Tr6IicRCMqLknZwfVzS8jia9qOKtZEJXriaK7UOLm3iaNjpOaVEhkNdTfbNbqD5b5lgTep2T0vA8J6YYdTHw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
TopGeek 干货制造者
<img src="http://mmbiz.qpic.cn/mmbiz/cZV2hRpuAPjEIibB1UYw1VMPzscNxReKZVxEh23qB9KgPqFq3uoyBy3M93PcFOunrvjkYVrtfvXMworbBuWAZ4A/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="http://mmbiz.qpic.cn/mmbiz_gif/hGeYs9Tr6IicRCMqLknZwfVzS8jia9qOKtLqO4b9mQyEYhRvCVdv7UGhGuOuvJmFibfskiaYQty4hJicjHVpciara0qw/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">
敢不敢点开阅读原文啊？

akbchina.cn 发表于 2024-8-31 00:18:59

你的见解独到，让我受益匪浅，期待更多交流。

4zhvml8 发表于 2024-9-28 21:48:02

论坛是一个舞台，让我们在这里尽情的释放自己。

m5k1umn 发表于 2024-10-4 21:36:13

我深受你的启发，你的话语是我前进的动力。

qzmjef 发表于 2024-10-4 23:15:41

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。

页: [1]

外链论坛's Archiver

1月前端面试记