2019腾讯暑期实习面试(offer)前端

最近在忙着准备找实习,因此没有更新以前的文章.

不过所幸功夫不负有心人,我拿到了腾讯的offer.

这里分享一下面试的经验.

 

简介

本人双非本科,普通学生一枚.

面的是腾讯的Web前端开发.

整个面试一共有四轮,分为:一面(笔试\初试)  二面(技术\复试) 三面(项目\复试) 四面(HR\终面)

 

一面

我是在五月份的时候收到的初试的消息

第一面的形式是远程视频面试,在牛客网上进行.

 

面试首先确定是一个自我介绍,这里我就不赘述了

聊了一下个人大概状况事后,而后就开始面试了

 

第一个问题:

怎么判断一个对象是否是数组?

1. 首先能够用 ES5 提供的 isArray 方法进行判断,这个方法应该是最官方的
2. 可使用 instanceof Array 来判断,不过这种方式存在问题,好比当存在多个全局对象(如使用ifream),那么这个窗口的Array对象对另外一个窗口使用 instanceof 就会判断失败
3. 这里是我当时给的答案(在JS高级编程一书中有),经过 toString 来进行判断

   function isArray(value){
       return Object.prototype.toString.call(value) === "[object Array]";
   }

    

第二个问题:

了解深拷贝与浅拷贝吗?你能实现一下深拷贝吗?

这个问题首先咱们要知道深拷贝浅拷贝的区别,咱们知道JS的值分为基础类型和引用类型,也就是说在进行赋值操做时引用类型赋值的实际上只是将地址进行赋值

也就是两个变量指向了同一个地址,浅拷贝呢就是正常的赋值操做,而深拷贝则但愿是一个新的独立的值,而不是仅仅拷贝地址

 

由此咱们能够给出如下拷贝函数(这里给的代码只是一个示意,并非最佳实践)

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，若是是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //若是不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

 

第三个问题:

知道继承吗?实现一下?

这里的话我问了一下面试官,使用ES6的class实现,仍是使用原生JS实现?

面试官说均可以,我就用的原生JS写的,用的组合继承的方式

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

// 建立一个新的构造函数
function SubType(){
    // 调用父类的构造函数
    SuperType.applay(this,arguments);
    this.subprototype = false;
}

// 重写这个构造函数的原型对象让其指向SuperType的实例
SubType.prototype = new SuperType();
// 修改 constructor 让其指向正确地构造函数
SubType.prototype.constructor = SubType;

// 添加这个新构造函数的自身的方法
SubtType.prototype.getSubValue = funtion(){
    return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue()); // true 能够访问到原型对象上的方法和属性

到这里视频面试在线打代码的部分就完成了,后面就问了一些前端方面的问题

 

第四个问题:

你了解XSS和CSRF吗?

回答了解,以后就会详细问了.

 

首先XSS分为如下三种

1. 反射型XSS: 在url上拼接攻击代码,访问get请求的接口,来注入XSS代码
2. MXSS:DomXSS 在 dom 元素的 title , name 等属性注入
3. 存储型XSS: 经过表单(通常是评论区等地方)提交XSS数据,等后台从数据库中读取返给前端页面时生效

CSRF的攻击方式则是,当用户登陆过A网站经过A网站的合法性身份校验事后,B网站经过钓鱼连接等形式获取用户在A网站的合法身份来进行攻击

 

二者的区别:

最大的区别在于 CSRF 须要用户完成合法性验证后才能进行,而XSS则不须要

 

防护:

XSS的主要防护手段是经过先后端的数据过滤来实现,对一些HTML的特殊字符进行转义

CSRF的主要防护手段则是经过使用token验证来验证用户身份的合法性

 

一面的主要内容就是上述几个问题,整个过程45分钟,我在打代码的时候当时有个逻辑写反了,找了好久都没有找到问题,最后是被面试官指出了,因此在面试官那落了个马虎大意的不良印象.

不过最后仍是顺利经过了初试.在次日的晚上面试状态就变为了复试.

 

二面

在面试状态变动后的一个礼拜后预定了复试的时间(由于中间过了个端午)

一样的首先是自我介绍,而后就进入正题.

 

第一个问题:

浏览器输入网址后到页面显示的整个过程?

1. DNS解析
2. TCP链接创建(三次握手,四次挥手)
3. 加载文件(HTML,JS,CSS)
4. 渲染页面(生成DOMtree,CSSrule,结合成render tree ,页面布局,元素绘制)

 

第二个问题:

HTTPS和HTTP的区别?采用的加密算法?

 

http使用明文传输,https采用加密方式传输

具体加密过程以下:

1. 客户端向服务器发起HTTPS请求，链接到服务器的443端口(默认)
2. 服务器端有一个密钥对，即公钥和私钥，是用来进行非对称加密使用的，服务器端保存着私钥，不能将其泄露，公钥能够发送给任何人
3. 服务器将本身的公钥发送给客户端,客户端收到服务器端的公钥以后，会对公钥进行检查，验证其合法性，若是发现发现公钥有问题，那么HTTPS传输就没法继续。严格的说，这里应该是验证服务器发送的数字证书的合法性，关于客户端如何验证数字证书的合法性。若是公钥合格，那么客户端会生成一个随机值，这个随机值就是用于进行对称加密的密钥，咱们将该密钥称之为client key，即客户端密钥，这样在概念上和服务器端的密钥容易进行区分。而后用服务器的公钥对客户端密钥进行非对称加密，这样客户端密钥就变成密文了，至此，HTTPS中的第一次HTTP请求结束
4. 客户端会发起HTTPS中的第二个HTTP请求，将加密以后的客户端密钥发送给服务器
5. 服务器接收到客户端发来的密文以后，会用本身的私钥对其进行非对称解密，解密以后的明文就是客户端密钥，而后用客户端密钥对数据进行对称加密，这样数据就变成了密文
6. 而后服务器将加密后的密文发送给客户端
7. 客户端收到服务器发送来的密文，用客户端密钥对其进行对称解密，获得服务器发送的数据。这样HTTPS中的第二个HTTP请求结束，整个HTTPS传输完成

 

对称加密：DES

非对称加密：RSA

 

第三个问题:

cookie的做用?cookie的安全?cookie与webstorage的区别?

 

cookie的做用:

cookie能够跟踪会话，弥补HTTP无状态协议的不足

• 判断用户是否登录过网站，以便下次登陆时可以实现自动登陆（或者记住密码）。若是咱们删除cookie，则每次登陆必须重新填写登陆的相关信息

• 保存上次登陆的时间等信息

这里面试官就问我,使用Cookie来作状态保持是否安全?怎么解决?

 

首先Cookie是不安全的,能够经过脚本获取,也能被中间人截取

解决方案:

1. Cookie内容加密
2. 设置HttpOnly头(没法使用JS获取Cookie)
3. Secure:true (只有在HTTPS时才发送Cookie)
4. 设置过时时间

 

Cookie与Webstorage (H5提出的用于替代Cookie的解决方案)的区别:

• • 生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器以后localStorage中的数据也不会消失。localStorage除非主动删除数据，不然数据永远不会消失。 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即便刷新页面或者进入同源另外一个页面，数据依然存在。可是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不同的

1. • 存储大小：localStorage和sessionStorage的存储数据大小通常都是：5MB

   • 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通讯

   • 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可使用ECMAScript提供的JSON对象的stringify和parse来处理

   • 应用场景：localStoragese：经常使用于长期登陆（+判断用户是否已登陆），适合长期保存在本地的数据。sessionStorage：敏感帐号一次性登陆

   • 相比Cookie的优势：

   • 存储空间更大：cookie为4KB，而WebStorage是5MB

   • 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据能够直接获取，也不会像cookie同样每次请求都会传送到服务器，因此减小了客户端和服务器端的交互，节省了网络流量

   • 快速显示：有的数据存储在WebStorage上，再加上浏览器自己的缓存。获取数据时能够从本地获取会比从服务器端获取快得多，因此速度更快

   • 安全性：WebStorage不会随着HTTP header发送到服务器端，因此安全性相对于cookie来讲比较高一些，不会担忧截获，可是仍然存在伪造问题

   • WebStorage提供了一些方法，数据操做比cookie方便

　　　　　　

第四个问题:

前端性能优化的手段?

• 网络加载

  • 减小HTTP资源请求数: 合并静态资源,构建工具合并雪碧图\避免重复资源

  • 减小HTTP请求大小: 对文件进行压缩优化,使用gzip传输压缩内容\移除代码注释压缩代码

  • 将CSS,JS放到外部文件:HTML引用外部资源能够有效利用浏览器静态资源缓存

  • 避免空的 href 和 src

  • 指定Cache-Control 或 Expires

  • 合理设置 Etag 和 Last-Modified

  • 减小页面重定向

  • 静态资源分域存放增长下载并行数

  • 静态资源CDN来存储文件

  • CDN Combo 下载传输内容

  • 缓存Ajax cache属性设置为 true

  • 使用Get Ajax的速度比POST请求快

  • 减小Cookie大小进行Cookie隔离(分域存放静态资源)

  • 异步JS

  • 避免CSS import 加载CSS

• 页面渲染

  • CSS资源放到页面顶部

  • JS放到页面底部

  • 不在HTML中缩放图片

  • 减小DOM元素数量和深度

  • 避免使用<table><ifream>等慢元素,这些元素会整个渲染完成后再绘制到页面上

  • 避免使用CSS表达式或CSS滤镜

 

第五个问题:

前端性能检测?

 

Performance Timing API\ 浏览器Profile工具\ 页面埋点\ 资源加载时序图 用于获取页面加载的性能

若是是远程监控用户的页面性能则须要将相关数据上传到服务器存储

 

第六个问题:

你了解算法吗?

 

我:了解一点

 

你知道堆排序和快排的区别吗?

 

我:数据结构不一样,堆排是一种树状结构,时间复杂度都是(nlogn最好)

 

他们的时间复杂度同样,为何日常更多使用快排,而不是堆排?

 

堆排的时间常量要大于快排,也就是执行交换操做的性能不一样,在性能上快排的性能略优于堆排,而且使用场景中快排效率最坏的状况的几率比较小

快排：数组中交换数据，在数据量不是特别大，并且离散程度较高的状况下效率很高

堆排序：建立堆，数据交换，调整堆的时间均不少

因此在实际应用中，咱们用快排会更多一点

 

平时学习的方式?

 

我:前端掘金社区, github , infoq, 博客, 书籍

 

大概多长时间看完一本书?

 

我:第一遍通看一个星期,彻底掌握差很少要一个多月.

 

有没有对书上的内容进行实践?

 

我:可以实践的部分会作一些demo,很差实践的部分则会分享一些本身的学习笔记在博客上

 

你的博客在外网可以访问吗?

 

我:能够,而后给了连接

 

 

而后二面的内容就差很少了,期间问了一些简历上的项目,这里因人而异因此我就再也不多说了,整个过程大概65分钟.

这里到三面有一个小插曲,我看见我官网上的面试流程变灰了,我觉得挂掉了,还郁闷了几天

不过三天后告诉我约了下一场面试.

 

三面

首先还是万年不变的自我介绍:

而后面试官问了:

1. 你以为简历的哪一个项目对你来讲最有挑战性?
2. 中间遇到什么困难?
3. 你是怎么解决的?
4. 若是让你继续开发你以为有什么改进的?
5. 你以为你的项目市场前景如何?
6. 你在项目中负责的工做?
7. 你是怎么作的?
8. 你的职业规划?
9. 你的目标?
10. 你最近在看什么书?
11. 你看过的书中哪一本对你影响最大?为何?

 

这一面主要就是问你简历的项目了,回答项目的时候从 

1. 背景
2. 目标
3. 行动
4. 结果

的顺序来答就好,至于其它的问题就只能看你本身的临场发挥了

 

在两天的焦急等待后,收到了HR面的通知

 

终面

终面的HR是个女HR,我以前一度觉得我去的部门只有汉子

简单的自我介绍事后就开始聊人生

 

问题:

1. 你为何要来实习?
2. 你大学参加的这么多比赛里面哪个让你印象深入?为何?
3. 你是怎么改进的?
4. 你有没有面试其余的互联网公司?
5. 你为何选择要来面腾讯?

 

HR面的话,问题就和技术没啥关系了,感受主要考察的就是你的意愿强不强烈

你的为人处世,性格等方面

我当时对于这些问题,就一直表示十分但愿可以进入腾讯

若是看过我早期的文章的同窗,应该知道我在去年就投过腾讯的实习,而后在一面就光荣的挂掉了

因此在HR问我最后问题的时候个人原话是这样的:

"我十分但愿可以进入腾讯,您那边可能也知道我在去年就投过我们公司,当时确实是由于本身的能力达不到我们公司的要求,不过这一年我一直都在努力提高本身,此次面试才走到了如今,就算此次我或许没有达到要求,没有机会到我们公司实习,可是我认为只要我一直努力迟早可以达到我们公司的要求."

 

到这里HR就笑了,说她没有什么问题要问个人了,offer的话后面有人会联系你.

 

我当时都惊了,我看其它大佬的面经的时候都是回去等通知,没有直接说offer的事情的.

我也不知道,在面试中我哪一点吸引了面试官,不过最终仍是如愿以偿地拿到了offer

 

结语

这里的话我想说,面试的话不少时候最后咱们均可能拿不到咱们心仪的offer,面试确实是一个比较看运气的事情

就算面试结果不太理想,但这确实是一个发现本身不足的很好的机会.

我从今年的3月开始准备面试,期间面了 阿里,京东,字节跳动,美团,腾讯(offer以前面的一次腾讯三面被刷)

就经过这些面试找到本身知识点的不足,而后面完事后就去查,弥补这些不足,最后终于如愿.

 

感谢昨天的本身的努力,不忘初心,方得始终.

但愿你们都能拿到本身心仪公司的offer.