前言
腾讯一面, 相比阿里一面来说, 腾讯一面先给打电话预定时间, 这也给了我们这些面试者去准备的时间但是也正是因为这种确定性, 也有在等待电话的时候的心情的忐忑
背景
我是一名大三学生, 大一在学校 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, 引用类型, ES6 新增了数据类型 Symbol, 表示独一无二的值
有了解 js 的事件吗?
在这里, 我不清楚是 js 的事件流还是 js 的事件方法, 经过再次询问之后, 是叫我讲述一下 js 的事件流然后我就着这个图回答了一遍
640.webp (1).jpg
一个完整的 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 和 Key
除了上面这些属性外, 触摸事件还提供了下面这些属性:
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.com 到 http://www.example.com)
浏览器跟踪重定向地址
服务器处理请求
服务器返回一个 HTTP 响应
浏览器显示 HTML
浏览器发送请求获取嵌入在 HTML 中的资源(如图片音频视频 CSSJS 等等)
浏览器发送异步请求
这里腾讯面试官还问了我对状态码的了解, 并问了一个 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 基础
计算机网络
性能优化
开发技巧
移动端知识
安全性问题
总结
不管怎么说, 不管结果好坏, 跟腾讯大牛的聊天都是值得积累的过程, 不要想象的很紧张吧, 这也是自己能够收获知识的时候, 我是这样觉得的, 哈哈, 如果觉得写得还行, 帮忙点个赞吧
来源: http://www.qdfuns.com/article/49520/00390062df302caf84bd4e5177e91372.html