腾讯 IMWeb 一面

面试题目

2016.05.25

说起IMWeb的面试，也是感觉到很突然，是上周五，05.20号下午，突然接到了IMWeb的电话面试，然后才想起来，上周还是上上周的时候，看到一个补录的消息，是IMWeb的补招，当时也没想太多，就只是把简历丢了过去，过了挺久没有回复，也就不记得这件事了，但是还是很开心能收到电话。
一开始有点小紧张，毕竟在腾讯校招g了，面试官说“今天只是一个初步了解，不算正式面试”，我以为是HR呢，特么结果还是问了我一堆前端知识，有点不太记得当时问了什么，主要是CSS和JS，主要是以下的一些知识点

DNS查询的具体过程
闭包、事件委托及其好处、跨域
圣杯布局、position属性的值及其区别、display当中 inline 和 inline-block的区别
兼容性
XSS和CSRF如何进行防御

虽然只是了解过程，但也问了快20分钟，吓尿，具体问题不太记得，只是记得一些大概的，毕竟过了快一周了。

然后大概在05.23号收到一条短信，是邀约我今天下午两点半面试的。电话如期而至，开始了面试

问：事件模型

事件触发过程分为 捕获阶段、处于目标阶段和冒泡阶段

问：你知道具体的原理吗？就是怎么流动的

就是一开始从document开始往下传递，此阶段为捕获阶段，到达target时，处于目标阶段，然后再冒泡上去至document，完成事件的传递

问：你说一下闭包及其使用方法

闭包从使用上来说，就是在一个函数里定义了另外一个函数，然后里面的函数可以使用到外层函数的变量。由于执行环境和作用域链的特性，在不做其他操作的前提下，内层函数总是只能访问到外层函数变量的最后一个值，所以当需要使用到外层函数变量值实时进行相关操作时，使用闭包将值传入立即执行。

问：说一下原型链的构成

原型模型的构成，我把下面的一张图给面试官说了一说

问：兼容性了解得多不多？就是具体开发过程中有没有遇到过什么兼容性问题

wtf，又问我兼容性的问题，不过的确我没有做太多兼容性的处理，所以真的也答不上什么来，的确是需要去学习学习兼容性的问题，在普遍较为多的面向群众较广的部门，他们都会要求做IE兼容，就是可能window 7 或者XP可能还有一定市场份额，IE的确也还有许多人在用，这部分我和面试官坦诚说不是特别系统的学习，之后要进行相关的学习和操作。
然后，这部分的话，面试官没有纠结太多，就让我要去了解一下，以后如果有机会来，是要做这方面的兼容的。

问：你说一些 性能优化 的方式

我大致说了一下雅虎军规的，还有一些js脚本上的操作，还有根据渲染过程讲的一些优化措施，具体可以看看一些优化的方式

一些性能优化：
https://developers.google.com/speed/docs/insights/rules?csw=1#header
https://developer.yahoo.com/performance/rules.html 雅虎军规
http://www.jianshu.com/p/268c7f3dd7a6 CSS选择器的优化
https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ JavaScript性能的优化

画风突然一转

面试官可爱的一说 “我问你一道智力题”

钟表上 5:15分的夹角是多少

还好我以前看过类似的题，想了大概30s，然后告诉他答案 67.5°

又问：那 7:45呢

原理一样，37.5°

然后就问我，现在方不方便用电脑，因为我当时的确是不方便用电脑，没有电脑在身旁，他说想开远程然后让我写几道题目，我就和他商讨说，能不能等我回去之后找他，面试官也挺好的，说没关系，看你有空的时候就来面试，今晚或者明天都OK，于是乎，我和面试官又约了晚上19:30来进行编程题的面试

time to 19:30，面试官头像变亮，我主动找了面试官，然后开了远程桌面，啊擦 压力大，直播我打代码啊，天

面试官说 90分钟，三道题，如下

1. 在页面内有一个正方形，实现其在页面内的拖拽和放下
2. 在页面内实现右键菜单
3. 实现大数相加

好吧，话不多说，直接上代码，因为有些代码过长，我先讲一下思路，然后代码都放在codepen上面吧

实现页面内的拖拽和放下

codepen地址：https://codepen.io/yacent/pen/JKPKdX

实现关键：
1. 正方形随鼠标移动，所以其position属性设为absolute，可调整
2. 记录mousedown、mousemove、mouseup
    a. mousedown 记录点击处鼠标位置，并计算与目标边缘的差值
    b. mousemove 实时修改其position属性的 top 和 left值
    c. mouseup 将拖拽对象置为空

实现页面右键菜单

codepen地址：http://codepen.io/yacent/pen/LZPggE

实现关键：
1. HTML5事件 contextmenu 事件可自定义右键菜单
2. 菜单默认不可见，事件中修改 display属性及 position属性的 top 和 left 值
3. 取消默认的行为，取消默认的右键菜单的出现
4. 点击页面其余位置，右键菜单消失

实现大数相加

这个的话，在C++的时候写过，应该不算难，主要就是以字符串进行处理，从最低位开始计算，每位的和为sum = num1 + num2 + num3(进位)，每位最终显示的值为 sum % 10，进位为 sum / 10，直接上代码

// 两个大数相加的算法
window.onload = function() {
    var a = "9999999999999";
    var b = "1245612312312421321";
    function addNum(a, b) {
        // 判断谁的更长,最长的长度
        var max = Math.max(a.length, b.length);
        var num3 = 0; // 记录进位
        var result = [];
        for (var i = 0; i < max; i++) {
            var num1 = 0;
            var num2 = 0;
            if (i < a.length) {
                num1 = +a[a.length - 1 - i];
            }
            if (i < b.length) {
                num2 = +b[b.length - 1 - i];
            }
            var sum = num1 + num2 + num3;
            result.push(sum % 10);
            num3 = Math.floor(sum / 10);
        }
        if (num3 > 0) {
            result.push(num3);
        }
        return result.reverse().join("");
    }
    console.log(addNum(a, b));
    console.log(+addNum(a, b) == +a + +b);
}