面经:2018暑期实习腾讯二面(前端)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33594380/article/details/79915846

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

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

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

问题深度:★ ★ 

问题广度:★ ★ 

面试官友好程度:★ ★ 

出其不意程度:★ ★ ★ ★ 

综合难度:★ ★ ★ ★ 


一、面试前

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

二、面试中

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

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. 实现效果


(感觉要凉,还没出结果,出了结果再更新~~)

(两周之后才收到面试结果,果然凉了 - -!)

展开阅读全文

没有更多推荐了,返回首页