1月前端面试记

背景

我于16.12.18辞职，以前有过一年左右的前端工做经验。从12月26号开始到1月9号前后面试了微信，百度，阿里巴巴uc，惟品会以及深圳腾讯等几家公司，特此总结与各位共勉。

微信

因为我已经毕业工做过，因此去微信面试是走的社招。微信社招极其严格，共八轮面试，整体来讲我基本上当了一把炮灰。因为腾讯前端又细分为重构和JS，因此微信的面试基本上以JS为主。
微信第一面是笔试，共一个小时，四道编程题:

• JS手写二分搜索算法
• 给你一段代码，让你发现其中的问题(考察闭包)
• 实现一个Lazyman(请自行搜索)
• 用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float状况。

前两道题比较基础，只要有JS基础的同窗通常都应该没什么问题。第三道题，有些难度，可是我以前曾在网上见过该题，使用队列或者promise均可以。第四道题，看完以后一脸懵逼，想了半天也没明白它考察什么内容。因为时间关系，我直接用了window.getComputedStyle。后来交完以后仔细想一想，好像确实有不少状况没考虑到，例如当这个元素的背景色为透明时，它最终的背景色应该为其父元素的背景色。

微信二面是项目经历面，我跟面试官大体介绍下我过去一年作的项目。而后掏出笔记本开始一块儿看我以前写的代码，面试官以为我以前作的项目复杂度不过高。而后就问了我其余几个问题:既然你面的是小程序组，那么你了解小程序吗？我说不了解。而后问我是否使用过React，我说没有。面试官不是很满意，但最终让我过了。

微信第三面是前端基础面，面完以后个人人生观发生了改变，我感受我不配作前端。第一个问题是，请问前端优化的手段有哪些？我内心暗喜，这么简单的问题还问。而后我答将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。面试结束，我跪了。

总体来言，微信的面试难度仍是挺大的。他对每一个细节的考察很是仔细，不只要求你知其然更要让你知其为何。另一方面我也意识到了准备的不足。

百度

百度的面试是我最喜欢的，考察的比较全面。百度第一面为基础面，包括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你该如何选择？引入的话有什么好处坏处？我提供了本身的一些见解。

阿里巴巴UC

UC的面试是最轻松的，以致于我感受我可能没经过。

UC第一面是一个阿里很是高级的前端工程师，面试大约一小时。首先让我讲了讲我对移动前端的了解？而后我讲了讲移动前端布局，JS方面，性能优化等，大于15分钟。而后他问我如何理解前端工程化？而后我又讲了15分钟等。而后他问我有什么问题吗？我问请问你如何理解前端以及你是如何从pc端转入移动端？他站在黑板上给我讲了20多分钟。包括hybrid技术以及如今流行的RN和Weex，以及阿里如今的业务使用的一些技术以及为何使用等。第一轮面试结束。

第二轮面试是一个后端的哥们，面试大约30分钟。问了我一些前端优化的方法，以及日常遇到过最大的困难是什么，如何解决。有什么难忘的事等。而后问我有什么问题？我说为何你不问我前端的基础知识也不问我前端的项目经验？他说不必，已经了解个人背景了等等，而后带我吃了个饭。

惟品会

惟品会技术面共5轮，考察的很是全面。前两面都是基础面跟百度大概相似。可是它重点问了我web安全的一些知识，xss和csrf。问我如何解决相关的问题？xss的话主要使用转义，csrf的话项目中我主要使用的是jwt(javascript web token)。而后针对jwt细节问了我20多分钟。第三面是一个产品经理面，说虽然是技术可是仍是要了解产品才行。问我有没有用过惟品会app，我说没有。而后问我知道惟品会是干什么的吗？我说一家专作特卖的网站。而后给我一个惟品会的页面问我有什么建议，而后我讲了20多分钟。第四面是技术总监，进来以后先把我吊了一顿。说虽然感受你前端基础各方面比较好，可是惟品会的业务性很是强，我没有任何电商方面的经验等，让我过来从头作起之类的。

腾讯

因为面试的是移动方面的业务，因此主要问的有zepto库的使用，移动端布局，优化，JS的一些基础还有localstorage等。重点还问了一下我是如何在项目中开展测试的(单元测试和e2e测试)。后序面试因为要去深圳总部，因此我推掉了。

总结

针对于前端的面试，仍是须要必定的时间去好好梳理，尤为是知识点的细节必定要很是清楚。关于项目经历必定要有一条主线，在这条主线上你作过什么，遇到过什么坑，怎么解决必定要很是清楚等。另一点算法仍是很重要的，推荐你们一本书<<剑指offer>>，面试前我前先后后看过三遍。共勉之！