腾讯前端一面总结

天大地大妈咪最大 提交于 2020-02-06 17:03:49

看到一片特别好的文章

原文作者:广工小成
https://segmentfault.com/a/1190000013654696

前言

腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性,也有在等待电话的时候的心情的忐忑。

背景

我是一名大三学生,大一在学校acm集训队,后来转向学习java,又去开发Android,在期间,学会怎么去解决一些编程遇到的问题以及灵活运用github。在大二寒假的时候,开始接触学习前端,如今已经一年了,一开始是做百度前端技术学院(http://ife.baidu.com/2016/task/all)的任务,学习了html和css,以及参考别人优秀的代码。

js是通过红宝石,js高级教程第三版开始入门学习的,这本书里面的基础知识很精髓,那时候我也很有耐心的去看完了,虽然说可能实践还是跟不上理论,因为后面做的项目基本都是用框架去做项目,而导致对于基础知识的实践比较少。

接下来,我们进入正题吧。

腾讯一面

首先,接到电话的时候,由于之前心情的忐忑,情绪还是有点兴奋的,以期待的口气向面试官问好,面试官也问问好之后就开始进入面试题了。

【你先简短的介绍一下自己】
在这里,我就简短的介绍了自己的学校专业,应聘的岗位,以及是怎么走向学习前端的道路,也就和我写的背景差不多。

【你是怎么学习前端的?】
开放性问题,我就回答了,一开始是在百度前端技术学院,后来看js高级教程第三版,接下来就是做项目,接触一些框架,然后,就开始学习框架,以及个人对于框架的一些看法。

这里面试官很好,也跟我讨论了一下学习的好不好,以及学习js基础的话,不单单要看红宝石(js高级教程第三版),也要看看js的犀牛书(js权威指南)比较好一点。

【有了解js的数据类型吗?说一说】
ES5的基本数据类型,Undefined,Null,Number,String,Boolean,引用类型,Object。ES6新增了数据类型Symbol,表示独一无二的值。

【有了解js的事件吗?】
在这里,我不清楚是js的事件流还是js的事件方法,经过再次询问之后,是叫我讲述一下js的事件流。然后我就着这个图回答了一遍。

一个完整的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到加载出页面】
这里发生了:

输入地址
浏览器查找域名的 IP 地址
这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…
浏览器向 web 服务器发送一个 HTTP 请求
服务器的永久重定向响应(从 http://example.comhttp://www.example.com)
浏览器跟踪重定向地址
服务器处理请求
服务器返回一个 HTTP 响应
浏览器显示 HTML
浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
浏览器发送异步请求
这里腾讯面试官还问了我对状态码的了解,并问了一个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的还不错,大家有兴趣也可以看看这篇文章(http://blog.csdn.net/stpeace/article/details/53512283)

【你是怎么解决跨域的?说说Cors解决的方法,和你用的jsonp的解决的原理】

我回复面试官,我是用jsonp解决跨域的,然后面试官叫我说明一下jsonp跨域的原理,等我说完之后,面试官又跟我说了一下其实Cors方法更好,大家如果想理解可以看看阮一峰的跨域资源共享CORS详解(http://www.ruanyifeng.com/blog/2016/04/cors.html)和而对于jsonp跨域的工作原理,网上有很多,我就不举例子了,我建议可以直接在github上面看看源代码(https://github.com/webmodules/jsonp)就可以理解。

【有了解作用域吗?怎么预防作用域污染】
其实网上有很多作用域的文章,参差不齐,个人觉得的话,作用域无非就是js当做对于function函数声明会提升到其他声明语句前执行,以及对于某个 {}里面的作用域如果找不到某个属性,就会在该 {}上下文当中查找属性,如果还找不到的话,进而类似。

作用域污染,无非就是闭包了吧,个人理解。

【说说闭包】
网上关于闭包的说明实在是太多,但是很多又讲的不明不白的,标题党太多,这里我建议还是直接看看js高级教程第三版里面的书本吧。

其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。

function
a(){

var
a;

// …

return

function
(){

// 这里可以引用a函数里面的作用域,也就是可以使用a

// 而且a函数作用域无法使用这里的值。
}
}
【了解前端的缓存吗?缓存分为几类?】
前端的缓存无非就Cookie,LocalStorge,SessionStorge这三个吧。

个人就简单的介绍一下这三个吧,更详细可以自己去百度百度一下。

Cookie,存储容量小,仅仅4kb左右,在网络请求的时候可以发送,不建议存储重要数据,因为会被网络诈骗就是把本地的cookie发到别人的服务器上,进而获取你的账户密码。

LocalStorge,SessionStorge都是本地缓存的主要用的,两者的用法都很简单,都有各自的Set和get方法。主要的区别就是LocalStorge是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。而SessionStorge关闭浏览器就清空数据。

【怎么才算一个好的前端开发者】
这里的话,其实我的回答大家可能不是很在乎哈哈,就不说了,大家根据自己的理解去回答就好了。

【你还有什么问题想问吗】
这个问题,其实我想到了,因为我看过鹅厂wo谈会,在那里其实我就知道可能会问这个问题,而我也问了我想知道的答案,就是面试官对于我之前的回答给一个评价。

我碰到的面试官很好,他给我的评价说了很久,不管怎么说有机会和这些大牛聊聊天真的是知识层面又上升了吧。面试官给我的总结就是,基础知识可以再多去学习,不用太着急学习框架,市面上的框架千变万化,只有基础知识比较好才能够学习的更好,而且需要多学习一下性能优化,网络,安全这方面,因为在大公司里面,其实重要的东西并不是你能够做的多好看,而是你的安全性那些做的好不好,一不小心信息泄露了,那就会导致很多无法想象的事情,(这里我特建议大家看看图解http协议吧,链接:https://pan.baidu.com/s/1CvttJuNetZvgVjrXG1ZFSA 密码:u35q)

然后,建议我就是基础知识学更多一些,把知识都规范体系化,这样以后碰到问题了就会一下子就知道是哪方面的问题,直接去解决。这里面试官给我从以下几个方面进行说明,我也真的是收获颇多。

js基础
计算机网络
性能优化
开发技巧
移动端知识
安全性问题

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!