一年前端面试打怪升级之路（二）

传送门：

一年前端面试打怪升级之路（一）

一年前端面试打怪升级之路（二）

一年前端面试打怪升级之路（三）

对于DXY的面试印象最深入最难忘，因此就详细地列一个单独的篇幅吧

DXY

最想去的一家公司，参加过他们的技术分享会，技术氛围早有耳闻。不局限于作商业化的项目，而是会投入精力去作优化流程和提升效率的事情，开发开源工具，或者重构老旧项目等等

在我问到部门工做流程，第一位面试官说了一句话：在肯定好技术选型后，怎么爽怎么写。

这不是程序员的高潮吗？！

全程历时将近3小时，是学到最多的一次面试，也是目前以来被虐的最惨的一次。

笔试

首先笔试半小时，有一些常规的题目，涵盖的内容有基本数据类型，去重数组函数，Dom优化方案，行内元素有哪些，label的做用（这个颇有意思），css选择器的查找方式（从右往左）；css选择器的优先级；setTimeout异步流程；函数this的指向。

也有一些我的不太肯定答案的题目。其中不熟练的点有正则的声明，即时函数的执行流程，操做符优先级，css伪类选择器的优先级

将不肯定的题目罗列一下

<!--关于正则 -->
正则声明的正确选项

<!--console输出结果是什么，考察操做符优先级-->
var a = 1,b =2;
console.log(a+++b)

<!--console输出结果是什么，考察即时函数的执行流程-->
var result = (function(){
    return 1;
},function(){
    return "2"
})()
console.log(typeof result)

<!--关于css选择器优先级排序-->
id class 标签选择器 属性值选择器  伪类选择器  通配符选择器 继承选择（大概是这几类的排序）

复制代码

作完题目检查了一遍，而后交给hr，等待通知。

等的时候对于DOM建立的优化那一题忽然有了更好的方案

题目是这样的：

<!--对下列方法进行优化-->
var nodeI,m;
var data = [] //这里的data是一组真实数据
for(var i = 0,m = data.length ; i<m ; i++){
    nodeI = document.creatElement("li");
    nodeI.noteText = data[i];
    var con = document.getElementById("container");
    con.appendChild(nodeI);   
}
复制代码

我在写的时候思考了一下子，最后只是把container容器的变量提取为了全局，这样就不须要循环都去建立一个变量。

可是以后想到应该使用innerHTML属性直接使用字符串添加，这样的效率是最高的，浏览器只须要对元素重排一次，而不是每次循环都去从新渲染页面一次。

想着想着，面试官就进来了

第一位

一位冷冰冰的大哥，全程没什么话，很认真地在看我带过去的简历，以及笔试题。

第一句话就对我说，你这个基本数据类型写错了吧，这么基础的题

我心想完了不会跪在这种题目吧。拿过来仔细看了下，五种类型string,null,number,boolean,undefined没写错啊。面试官说还有object，而Null是属于object的。

我以为他说的不对，因而现场查了下，结果显示我写的应该是对的，我说了句，这点以后再求证好了就跳过了这个话题。

以后，他就开始指了几道我写的答案，问我是怎么思考的。

遇到不会的，我就说我不肯定，他也没告诉我正确答案是什么，我说的对不对。一直都是毫无波澜的表情。

过完了题目，我开始想展现下写的项目，拿出资料以及存在手机的动图，他很随意地看了下，而后说好的我知道了。

以后问有没有作过h5，和pc端有什么不一样。

我说没有作过完整的项目，h5在通常在手机端使用，点击事件不太同样；另外对页面性能要求比较高

看他反应想来是对个人答案不太满意。

后来问我有没有作过从0开始配置，开发产品，打包项目，到发布上线的完整工做流。

我实话实说没有，由于公司项目不须要使用脚手架，也没有使用打包工具。我本身写的项目有使用过webpack，了解一些配置和打包方法，但没有过发布项目的经验。（后知后觉，他应该是想问开发环境和生产环境的配置有什么不同）

他说ok了解，而后就问我有没有什么问题问他的

这句话通常就是想要结束面试的标识。我询问了他们对这个岗位的要求，以及他们的技术栈。这些点面试官有比较耐心地去解答，这时候才感受出来他是个有条不紊，话很少，可是很务实的人。

我感受应该是看过简历以及笔试题以后，内心已经有了预判以为水平不够，因此结束的很是快

他也直说，他们组缺少的成员，我这个水平可能还达不到。让我再等等，他去沟通下有没有其余组的人有兴趣的。

随后就出去了。

第一位失败，重点问题整理以下。

1. H5和普通PC端有什么不一样
2. 从0配置到发布上线的完整流程
3. 将来一年对本身的技术方向的规划
4. 对前端行业的见解

没有问个人项目，没有问解决问题的过程，没有问笔试题之外的技术问题。

二面

第二位面试官，以前有过一些了解，有关注他的掘金,一个高级前端，端着电脑进来，从头至尾笑眯眯，仍是温州老乡。感受很亲切。偷偷@相学长一下，不知道他会不会知道哈哈哈

too young too simple。个人怀疑人生之路开始了

首先作了简单的自我介绍，在自我介绍里我赶忙趁机讲了下我作过的项目，使用的技术点，以及一些比较有趣的小demo，都是上场面试中没来得及展现的

他有仔细听，有没有评价我也忘了。和上一位面试官同样没有过多的表示。或许是由于对JQ的项目兴趣不大吧。

接着又回到了笔试题上，我就抢先说了应该是错了很多，并且有道题我后来有想到更好的优化方案。

1. 我阐述了个人方案

<!--对下列方法进行优化-->
var nodeI,m;
var data = [] //这里的data是一组真实数据
var html = "";
var con = document.getElementById("container");
for(var i = 0,m = data.length ; i<m ; i++){
    html += "<li>"+data[i]+"</li>"
}
con.innerHTML = html;
复制代码

问1：为何这样更好呢。

我说只在最后一步把内容加到页面中，减小了浏览器重排重绘的次数

他马上问2：什么是重排重绘？

前两天刚看到了这个概念，讲了下本身的理解。重排是须要从新分析页面元素尺寸；重绘是元素样式的改变

问3：什么状况下会致使重排重绘？

我说页面布局被修改或者从新渲染的时候。

问4：能不能再具体点

当时没理get到他想要的答案，我就又重复了一遍。他应该是想问怎样算是布局被修改吧

标准答案：

1. 添加或者删除可见的DOM元素
2. 元素位置改变
3. 元素尺寸改变
4. 元素内容改变（例如：一个文本被另外一个不一样尺寸的图片替代）
5. 页面渲染初始化（这个没法避免）
6. 浏览器窗口尺寸改变

问5：v-show元素的显示和隐藏算是重排吗?

我说算。个人答案应该是对的，但他应该是但愿我能答出“添加或者删除可见的dom元素属于重排”这句话，v-show是设置了css的属性，是算重排的

接着基本上开始一道道过笔试题，以及在原来题目基础上扩展。

2. setTimeout的异步执行

原题以下

<!--执行结果是什么-->
var a = 2;
setTimeout(function(){
   a--;
});
a++
console.log(a);
复制代码

题目仍是比较简单，最终输出的是3.

变态的来了

问1：若是外面的a++循环一百万次呢，顺序如何？

答，仍是同样，setTimeout在后面

问2：为何会这样？

（标准答案：同步会阻塞进程。）

这里稍微有点答非所问了，我受到近期看的一篇文章影响一直在强调同步异步和阻塞非阻塞的区别，异步是执行完了告诉你，同步是等待你执行完；堵塞是浏览器一直在请求是否完成。我也不知道我在说啥，我估计他也不知道我在说啥 - -）

问3：知道promise吗，写了一个promise对象，混合setTimeout方法，要求判断输出的前后顺序

知道一点，曾经看到过相似的题目，可是时间比较久了不太记得，被我蒙对了

问4：为何会这样？

根据个人理解简单讲了下事件循环机制

更多能够参照这两篇文章：

这一次，完全弄懂 JavaScript 执行机制

深刻浅出JavaScript事件循环机制

问6：给你一个需求让你写吧。有一个实时搜索的搜索框，连续输入的时候不触发实时搜索，当用户停下来1s以上时，再显示搜索结果

电脑一摆，让我敲。

十脸懵逼说的就是我

不过其实这个需求不该该写不出来，以前作过的导航优化用的也是这个方法，在规定时间内未执行事件，就使用clearTimeout清空计时器。不过当时死脑筋陷入了时间戳，没往这方面想。

正确写法

var time = null;
input.addEventListener("input",()=>{
    cleartimeout(time);
    time = setTimeout(()=>{
        seach();
    })
})
复制代码

学长说若是这只是开始，若是能答出来还能够接着问抽象，不过我第一步就没答出来

泪奔~~~~

3. 对this的理解

原题是让选择正确的调用方法，也比较简单，正确选项长这样

var opt = {
    name:"Amy",
    say:function(){return this.name}
}
复制代码

扩展开始

问1：怎么理解函数中的this

指向调用函数的对象

问2：箭头函数的this呢

额。不改变this指向，函数外部指向哪里就是哪里

问3：setTimeout函数里面的呢

指向全局

问4：我把上面的增长一个name2:this.name输出什么？

undefined..（更确切地说，根据执行环境不一样，输出结果也不一样。这里的this指向全局，浏览器中的window.name实际上是存在的，通常来讲是空字符串）

我把say方法改为这样会如何

say:function(){
    setTimeout(function(){return this.name})
}
复制代码

问5：改为这样呢

say:function(){
    setTimeout(()=>{return this.name})
}
复制代码

只能说必定要自信，虽然对于this是理解的，可是问到后面我已经没底气了，都不太敢说。

最后两个问题我都忘了本身当时怎么说的了，正确答案都是undefined，由于在执行say()的时候函数上下文为全局了

4.跨域

原题是让写几个跨域方案

我写了cors,jsonp,window.name

问1：jsonp是怎么实现的

我说经过script标签引入

问2：为何能够这么用，数据怎么返回的？

我说script标签是能够跨域访问CDN的

标准答案：JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字通常是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

问3：window.name的局限

只能在同一窗口，大小2m

问3：知道localstorge和sessionstorge的区别吗

local是关闭窗口还会存在，数据永久保存，除非去清除浏览器缓存，session关闭窗口就清空了了

问4：localstorge和域名有关吗，sessionstorge呢

相同浏览器的条件下，local在同一域名和端口下是能够共享的，而不一样页面没法共享session的数据 （注：若是同源，且属于一个窗口下的iframe，session也是共享的）

4. 关于vue

首先问了几个关于vue的基本问题

拓展开始

问1：你以为vue和JQ相比，有什么优点

我说了维护更方便，以及数据渲染页面的方式使逻辑和页面分离，更加高效

他好像不太满意，又追问了一遍。

我说有两个最大的优点，一个是双向绑定，一个是组件。他点了点头，而后继续问：

问2：vue的双向绑定的原理是什么

我说在改变输入框的属性时其实是在调用defineProperty的get和set方法(更专业的说法叫wacher),在方法里面去修改绑定的元素的值。

问3 ：虚拟dom有了解吗

知道..不怎么了解

问4：写的时候为何data不直接返回对象数据，而是要用函数的形式return出结果？

恩....不了解

问56789：啊我已经说了不了解了因此以后的问题已经不知道他在问什么了...

不过他就开始跟我讲虚拟dom的工做原理，而后还时不时问几个问题，你以为他是怎么作到的？若是是你会怎么实现？

中途扔了一个问题给我，虚拟DOM的是这么检测到代码已经执行完了，而后插入真实的Dom中的。容许我查资料，他去洗手间。

短期内我也并无查出什么东西，而后他回来了跟我解释。

大概意思是，vue里面有一个相似于setTimeout的异步机制，在全部同步进程执行完后，执行这个异步操做，做为这段进程结束的标识。

相似于刚刚问的a++一万次，setTimeout依然在最后执行。

恩...不明觉厉

6. 关于js原生

问1：怎么去实现查找元素的find方法？

没见过这种类型的题目，因此想了一下子，而后弱鸡地说遍历啊...

问2：他说遍历子节点只能遍历一层啊，那子节点的子节点呢？

继续弱鸡地说，递归呀...

问3：还有什么更有效率的方法能够代替遍历？

不知道哎。。

他引导了我半天，才说有方法叫querySelector()知道吗，我说知道的，见过可是没去了解过。

他开始跟我说这个效率是最高的，我问为啥，他说由于底层就不是用js写的，我不明觉厉，表示惊叹。然而心中默默吐槽，你特么不是要我写个方法吗！不能这么开外挂的！

ps：后来特地去查了下，发现他说的不对啊，这个方法的性能仍是比不上js原生getElementById的，不过和jq相比，仍是快很是多，特地测试了下

//测试代码
console.time('$(".item")');
for (var i = 0; i < 10000; i++) {
  $(".item");
}
console.timeEnd('$(".item")');
//$(".item"): 56.569091796875ms

console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".item");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms

console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName("item");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms

复制代码

7.关于css：

1. 行内元素怎么设置垂直居中，块级元素呢，举三种方法

我说了四种方法：

1. 经常使用的绝对定位
2. flex布局，然而flex布局的属性名记不清了
3. 还有display设置为table
4. 使用transform或者margin往回移动50%

2. 清除浮动都有哪些方法

说了both-clear和overflow：hidden两种方法

3. nth-of-child和nth-of-type的区别

nth-of-child：查找位置优先 nth-of-type：查找元素优先

4. 怎么实如今两个元素中间有空位时，移到另外一个元素依然让其显示

我说能够用css3动画实现。

他问还有没有其余的方法

没答上来，就算是他的解释也无法让我理解，怎么作到对一个元素hover以后去设置另外一个元素的display属性？？不用js能实现？

5. 怎么实现三角形，为何会有这种现象？

将元素宽高设为0，而后边框只保留一边，另外三边设为透明。画了个图说明缘由。

6. 怎么对三角形设置阴影

我说用filter中的drop-shadow属性，他问为何，还有什么作法，我想了一下说能够直接再写个三角形放在下面，还能够写个矩形而后旋转下

关于css我以为答得还能够，包括后来的反馈也是说擅长css。不过也可能由于到最后了面试官懒得再展开了。

8.最后问了平时是怎么学习的

我说看视频，看书

问：看什么书

我说最近看了dom编程艺术和js面向对象

他立刻问：继承有哪几种方式

我讲了我理解的两种，我看的那本书中写了十几种继承方式

问：知道class吗

我说知道一些

问：和构造函数有区别吗

有区别，他的属性的是不可枚举的

这部分应该是答得不怎么样了，没有使用过，只不过之前粗略地浏览过一遍文档，估计由于已经面试了很长时间因此也没多作展开。

面试就告一段落。

总结

以上为问题记录，有些问题很简单，篇幅问题就没一一写出来了；还有些问题实在是超出了理解范围，都不知道他在问什么。只能凭借短时间记忆复述他的原话，忘了也很无力啊

高级前端的角度就是，你不只仅要会用，还要知道为何要这么用。

最后他问了我还有什么想问他的。我当时傻逼地问了我表现怎么样，他说通常，不算好也不算差

其实我更想问他你是怎么学习的，以及对个人发展有什么建议。

当时被问的有些绝望，只想知道本身有没有戏

技术总监

由于已经到了他们的下班时间了，总监就问了2个问题

1. 为何大家公司还在用JQ（目前部门就我一我的全职写前端实在是没有人手去重构项目啊！）

2. 你以为本身在技术方面的优点是什么

我只能极力表达本身的学习能力，毕竟工做时间不长，并且面试表现也不算太好，同时跟他们的技术栈不符。

但面试时百分之90的问题都是我在工做之余的学习成果，若是局限于公司的业务，不少新的概念我是接触不到的。

最后仍是个等通知的结果。只能说这是一个全凭实力说话的地方，不看你工做年限的多少，不看你的性格，也没人想要去了解你的潜力，很现实的投入产出比问题，只看你如今能不能为他们产生价值。

不过不要紧，收获不少，继续努力吧嘿~