面经：2018暑期实习腾讯二面（前端）

时间：2018年4月12日下午2点

地点：广州市天河区朋福喜来登大酒店

面试官：三十多岁的中年人，让我很有压力

问题深度：★ ★

问题广度：★ ★

面试官友好程度：★ ★

出其不意程度：★ ★ ★ ★

综合难度：★ ★ ★ ★

一、面试前

面试之前一直在思考这个问题，感觉一面问的知识点广度还是可以的，二面很可能会加深深度，所以也是临阵磨枪的准备了不少“知识”和应对策略，结果...知道真相的我眼泪流下来。

二、面试中

扫描二维码关注公众号，回复： 2563726 查看本文章

一进门，看到桌子后面坐的中年大叔就知道这一关可能不太容易。果然，张嘴之间，言谈举止，都给我很大的压力，问的问题很少，但是颇有股咄咄逼人的气势，紧张的我战战兢兢，如履薄冰。好了，废话不多说，直接来看看发生了什么？

1. 自我介绍

没的说

2. 说一个你最近在做的项目，这个项目中体现了你的哪些能力？

我就给他说了一个项目

追问：那能体现你的什么能力呢？（特别希望听到你回到哪些地方体现了哪些能力）

我只好重新梳理一遍，把项目拆开，一步一步地说哪一步体现了我的什么能力。

3. 说一下一个网页加载的全过程（这个问题一面的时候也有问过）

我回答了一下，讲得比一面要细一点：DNS -> 缓存 -> hosts -> TCP -> HTTP -> HTML -> CSS -> JS -> 重排、重绘

4. 原型链了解吗？说一下

这个问题一面也有问过，我又回答了一遍

追问：你刚刚提到了new，那么在new 的时候发生了什么？

没答上来

5. JS 加载有几种方式？

这个问题昨天也问过，我说三种，同步、async、defer.

6. 好吧，来写代码吧，写个图片轮播把，给我看了个案例，然后给了我五张图片。

突然很懵逼，啊咧？这是啥意思，写啥？不知道，让写图片轮播，好吧，呢就写吧。一开始只写了js 因为他啥都没给我，我以为就让我写个逻辑。写完以后，给他看，他说不是啊，我想看到实现的效果。emmm，然后再写html 和 css，所幸还可以百度，有些函数名不记得，原生js 方法不记得的，可以去查。

来来回回二十多分钟接近三十分钟吧，他开始催我了，还有点bug 没调好，心里很慌，感觉他一会还有事，就给他看了。看完以后，他说好，就这样吧（感觉要凉）。然后问我有没有什么问题。我....呃.....因为刚刚大部分时间都在写代码（我的意思是就问了那么几个问题，是不是有点少啊，拿出这么长时间来让我写代码，这个形式有点诡异啊），您觉得我的表现怎么样？

面试官答：我不太喜欢去评价一个人怎么样？..............（听到第一句，立马就走神了，完了，他在回避我的问题，真的要凉了）。根据项目来看你的实战能力、技术还是不错的，但是不一定适合我这个部门.......

三、面试后

出门等电梯的时候又碰到他了，看到我笑了一下，电梯来了还让我先上，跟刚刚面试时的感觉完全不同啊啊啊，- . -！

回来后我又理了下逻辑，把这个东西重新写了一遍，结果只用15 分钟就写好了，还没有bug。面试的时候花接近30 分钟写出了带bug 的，很难受。

四、图片轮播代码

1. demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <script src="demo.js"></script>
  <link rel="stylesheet" href="demo.css" />
  <title>demo</title>
</head>
<body>
  <ul class="tab-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <img id="imgDom" src="" alt="" />
</body>
</html>

2. demo.js

var img = ['1.jpg', '2.jpg', '3.jpeg', '4.jpeg', '5.jpeg'];

var liList = null;
var imgDom = null;
var intId = null;
var index = 0;

window.onload = function () {
  liList = document.getElementsByTagName('li');
  imgDom = document.getElementById('imgDom');
  cycle();
  imgDom.onmouseenter = function (argument) {
    stopCycle();
  }
  imgDom.onmouseout = function (argument) {
    cycle();
  }
}
// 轮播
function cycle () {
  intId = setInterval(function (argument) {
    // 更改图片显示
    imgDom.src = img[index];
    // 更改tab 外观
    for (var i = 0, len = liList.length; i < len; i++) {
      if (hasClass(liList[i]), 'active') {
        removeClass(liList[i], 'active');
      }
    }
    addClass(liList[index], 'active');
    // index 自增
    index = (index + 1) % 5;
  }, 1000);
}
// 停止轮播
function stopCycle () {
  clearInterval(intId);
}
// 重新开始轮播
function restartCycle () {
  cycle();
}
// class 判断
function hasClass( elements,cName ){ 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
}; 
function addClass( elements,cName ){ 
  if( !hasClass( elements,cName ) ){ 
    elements.className += " " + cName; 
  }; 
}; 
function removeClass( elements,cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }; 
};

3. demo.css

ul li {
  list-style: none;
  display: inline-block;
  background-color: grey;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

img {
  display: inline-block;
  width: 320px;
  height: 220px;
  margin-left: 40px;
  border: 1px solid grey;
}

.active {
  background-color: green;
}

4. 实现效果

（感觉要凉，还没出结果，出了结果再更新~~）

（两周之后才收到面试结果，果然凉了 - -！）

面经：2018暑期实习腾讯二面（前端）

猜你喜欢