2018年腾讯前端一面总结(面向2019届学生)

前言 腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性,也有在等待电话的时候的心情的忐忑。
背景 我是一名大三学生,大一在学校acm集训队,后来转向学习java,又去开发Android,在期间,学会怎么去解决一些编程遇到的问题以及灵活运用github。在大二寒假的时候,开始接触学习前端,如今已经一年了,一开始是做百度前端技术学院的任务,学习了html和css,以及参考别人优秀的代码。
js是通过红宝石,js高级教程第三版开始入门学习的,这本书里面的基础知识很精髓,那时候我也很有耐心的去看完了,虽然说可能实践还是跟不上理论,因为后面做的项目基本都是用框架去做项目,而导致对于基础知识的实践比较少。
接下来,我们进入正题吧
腾讯一面 首先,接到电话的时候,由于之前心情的忐忑,情绪还是有点兴奋的,以期待的口气向面试官问好,面试官也问问好之后就开始进入面试题了。

你先简短的介绍一下自己
在这里,我就简短的介绍了自己的学校专业,应聘的岗位,以及是怎么走向学习前端的道路,也就和我写的背景差不多。
你是怎么学习前端的?
开放性问题,我就回答了,一开始是在百度前端技术学院,后来看js高级教程第三版,接下来就是做项目,接触一些框架,然后,就开始学习框架,以及个人对于框架的一些看法。
这里面试官很好,也跟我讨论了一下学习的好不好,以及学习js基础的话,不单单要看红宝石(js高级教程第三版),也要看看js的犀牛书(js权威指南)比较好一点。
有了解js的数据类型吗?说一说
ES5的基本数据类型,Undefined,Null,Number,String,Boolean。引用类型,Object
。ES6新增了数据类型Symbol,表示独一无二的值。
有了解js的事件吗?
在这里,我不清楚是js的事件流还是js的事件方法,经过再次询问之后,是叫我讲述一下js的事件流。然后我就着这个图回答了一遍。
2018年腾讯前端一面总结(面向2019届学生)
文章图片

一个完整的JS事件流是从window开始,最后回到window的一个过程
事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程
移动端的触摸事件有了解不?
在这里,我回答说我之前的项目经验基本都是PC端的所以不了解,但是面试官建议我去了解一下,毕竟基础知识一定要扎实,才会在前端的路上走的更远。所以,我就红宝石了解了一下,这里也介绍给大家吧。
触摸事件指的是指的是用户将手指放在屏幕上,在屏幕上滑动到将手指从屏幕移开触发的事件,具体来说,有以下触摸事件的产生。
  • touchstart: 当手指触摸屏幕时候触发;
  • touchmove: 当手指在屏幕上滑动的时候连续触发;可以调用阻止默认事件preventDefault()阻止屏幕滚动;
  • touchend: 手指离开屏幕时触发;
  • touchcancel: 系统停止跟踪触摸时触发;
以上的这些时间都会冒泡,而且都可以取消冒泡,而且,对于以上事件也提供了和鼠标事件中常用的属性:bubble,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrKey和metaKey。
除了上面这些属性外,触摸事件还提供了下面这些属性:
  • touches: 跟踪返回Touch对象的数组;
  • targetTouchs: 特定事件目标的Touch对象的数组;
  • changeTouchs: 上次触摸以来改变了的Touch对象的数组;
每个Touch对象包含一下的属性
  • clientX: 触摸目标在浏览器中的x坐标
  • clientY: 触摸目标在浏览器中的y坐标
  • identifier: 标识触摸的唯一ID。
  • pageX: 触摸目标在当前DOM中的x坐标
  • pageY: 触摸目标在当前DOM中的y坐标
  • screenX: 触摸目标在屏幕中的x坐标
  • screenY: 触摸目标在屏幕中的y坐标
  • target: 触摸的DOM节点目标。
具体的例子,大家可以再在网上搜索一下。我就不带大家敲了。
说一下页面加载过程,就是输入url到加载出页面
这里发生了:
  1. 输入地址
  2. 浏览器查找域名的 IP 地址
  3. 这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
  4. 浏览器向 web 服务器发送一个 HTTP 请求
  5. 服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)
  6. 浏览器跟踪重定向地址
  7. 服务器处理请求
  8. 服务器返回一个 HTTP 响应
  9. 浏览器显示 HTML
  10. 浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
  11. 浏览器发送异步请求
这里腾讯面试官还问了我对状态码的了解,并问了一个304状态码的意思,大家想了解可以自行百度一下咯。
说一下路由器的缓存
因为上面回答了缓存,路由器的缓存,由于本人学习计网也久忘了,就老实回答面试官不清楚,面试官也建议再去了解了解。这里我了解了,也给大家分享一下吧。
通俗点说,每个路由器根据所在网络的不同,都有自己的路由表,在工作时会选择相应的路径。为什么要有路由器缓存呢,这个也是为了发送数据,因为路由器最高层一般都是网络层,网络层一般都是传送数据包,数据包又是经过应用层向下传送之后送来的一部分文件数据,如果我们没有缓存的话,那么,每次都会查找传送到达方的ip地址就会很费力。
做项目中有遇到跨域吗?跨域的原理是什么?
这里,我就老实回答有了,因为如果真的做过项目的话,确实会遇到跨域一般。但是我一般是用vue做项目,然后解决跨域又是用webpack里面配置的poxyTable进行解决跨域,相当于用代理工具,然后面试官又问了问我代理是怎么样有了解原理吗,以及跨域的原理,以及浏览器跨域的原因。
那这里我就简单解说一下跨域的原理吧.
首先,什么是跨域?跨域就是它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
所谓同源是指,域名,协议,端口均相同,不明白可以看看下面的例子:http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

为什么要实现跨域?防止CSRF攻击,我看了一篇文章关于CSRF的还不错,大家有兴趣也可以看看这篇文章
你是怎么解决跨域的?说说Cors解决的方法,和你用的jsonp的解决的原理
我回复面试官,我是用jsonp解决跨域的,然后面试官叫我说明一下jsonp跨域的原理,等我说完之后,面试官又跟我说了一下其实Cors方法更好,大家如果想理解可以看看阮一峰的跨域资源共享CORS详解和而对于jsonp跨域的工作原理,网上有很多,我就不举例子了,我建议可以直接在github上面看看源代码就可以理解。
有了解作用域吗?怎么预防作用域污染
其实网上有很多作用域的文章,参差不齐,个人觉得的话,作用域无非就是js当做对于function函数声明会提升到其他声明语句前执行,以及对于某个{}里面的作用域如果找不到某个属性,就会在该{}上下文当中查找属性,如果还找不到的话,进而类似。
作用域污染,无非就是闭包了吧,个人理解。
说说闭包
网上关于闭包的说明实在是太多,但是很多又讲的不明不白的,标题党太多,这里我建议还是直接看看js高级教程第三版里面的书本吧。
其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。
function a(){ var a; // ... return function(){ // 这里可以引用a函数里面的作用域,也就是可以使用a // 而且a函数作用域无法使用这里的值。 } }

了解前端的缓存吗?缓存分为几类?
前端的缓存无非就Cookie,LocalStorge,SessionStorge这三个吧。
个人就简单的介绍一下这三个吧,更详细可以自己去百度百度一下。
Cookie,存储容量小,仅仅4kb左右,在网络请求的时候可以发送,不建议存储重要数据,因为会被网络诈骗就是把本地的cookie发到别人的服务器上,进而获取你的账户密码。
LocalStorge,SessionStorge都是本地缓存的主要用的,两者的用法都很简单,都有各自的Set和get方法。主要的区别就是LocalStorge是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。而SessionStorge关闭浏览器就清空数据。
怎么才算一个好的前端开发者
【2018年腾讯前端一面总结(面向2019届学生)】这里的话,其实我的回答大家可能不是很在乎哈哈,就不说了,大家根据自己的理解去回答就好了。
你还有什么问题想问吗
这个问题,其实我想到了,因为我看过鹅厂wo谈会,在那里其实我就知道可能会问这个问题,而我也问了我想知道的答案,就是面试官对于我之前的回答给一个评价。
我碰到的面试官很好,他给我的评价说了很久,不管怎么说有机会和这些大牛聊聊天真的是知识层面又上升了吧。面试官给我的总结就是,基础知识可以再多去学习,不用太着急学习框架,市面上的框架千变万化,只有基础知识比较好才能够学习的更好,而且需要多学习一下性能优化,网络,安全这方面,因为在大公司里面,其实重要的东西并不是你能够做的多好看,而是你的安全性那些做的好不好,一不小心信息泄露了,那就会导致很多无法想象的事情,(这里我特建议大家看看图解http协议吧链接:https://pan.baidu.com/s/1Cvtt... 密码:u35q)
然后,建议我就是基础知识学更多一些,把知识都规范体系化,这样以后碰到问题了就会一下子就知道是哪方面的问题,直接去解决。这里面试官给我从以下几个方面进行说明,我也真的是收获颇多。
  • js基础
  • 计算机网络
  • 性能优化
  • 开发技巧
  • 移动端知识
  • 安全性问题
总结 不管怎么说,不管结果好坏,跟腾讯大牛的聊天都是值得积累的过程,不要想象的很紧张吧,这也是自己能够收获知识的时候,我是这样觉得的,哈哈,如果觉得写得还行,帮忙点个赞吧。

    推荐阅读