看过的面经记录（1）

1. 文章https://segmentfault.com/a/1190000013654696

腾讯一面 

你先简短的介绍一下自己

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

你是怎么学习前端的？

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

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

有了解js的数据类型吗？说一说

ES5的基本数据类型，Undefined，Null，Number，String，Boolean。引用类型，Object
。ES6新增了数据类型Symbol，表示独一无二的值。

有了解js的事件吗？

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

image

一个完整的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关闭浏览器就清空数据。

怎么才算一个好的前端开发者

这里的话，其实我的回答大家可能不是很在乎哈哈，就不说了，大家根据自己的理解去回答就好了。

你还有什么问题想问吗

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

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

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

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

 

二面估计会问:

你做过最满意的作品是什么, 怎么实现的, 如果重新做有什么改进的地方

用过jsonp? 说下jsonp的安全问题, 有没有什么好的解决方案

cors前端后端具体怎么实现

移动端视口包含哪些 如何适配各种dpr 屏幕的手机

用原生方法写个事件委托

关注过vue没有, 谈谈vue 原理

说下 http1.0 1.1 2.0 区别 keep-alive websocket等.

谈谈对this关键字的理解

如何设置缓存, json 转换成 字符串 有几种方法

首屏渲染性能如何优化

es6 严格模式新增了哪些东西

 

腾讯二面

自我介绍

二面的面试官和一面不是同一个面试官，所以在这个时候，我的基本介绍还是和一面一样，介绍自己的基本信息，以及怎么想到学习前端和怎么学习前端。不管怎么样，也都要耐心吧，毕竟即使做一个事情再多，但是你面对的人不同，还是要保持一样的认真，甚至更加认真。

说说TCP/IP连接过程

TCP/IP协议其实如果去理解了真的不难吧，大家可以看看我上一篇文章分享的图解HTTP，连接过程无非就是三次握手：

  1. 客户端发送一个SYN给服务器，表示想连接。
  2. 服务器发送SYN和ACK给客户端，表示接受到你的请求了，并且同意连接。
  3. 然后客户端发送ACK给服务器，表示收到并且连接。

这里我多说一下吧，如果大家理解不了的计算机网络当中的过程，建议大家可以把网络当做是快递公司，客户端当客户，服务器当做商家吧。这样TCP/IP连接的过程无非就是：

  1. 客户发信息说要和商家买东西
  2. 商家收到了并且给一个订单给客户填写
  3. 客户确定之后说我填写完了

然后，就是快递公司进行送快递的过程了

假如TCP/IP连接过程断了会怎么样？

其实这个过程就好比快递公司在送货的时候，快递不见了怎么办，那当然是客户说自己没有收到快递，然后商家又得继续补发（这里我们不考虑快递公司可以赔钱）。大概也是这样理解吧，毕竟TCP/IP协议是可靠的传输协议，万一断了，也是有自己的处理机制的，就是没有收到信息的一方会去检查，然后重新连接重新发送，这里建议大家可以去看看网络的处理机制更加深入了解。

TCP/IP断开的时候双方需要注意一些什么？

TCP/IP断开的时候，大家都知道，TCP/IP断开需要四次挥手：

  1. 客户端发送一个FIN报文给服务器，表示我将关闭客户端到服务器端这个方向的连接。
  2. 服务器收到报文后，发送一个ACK报文给客户端。
  3. 服务器发送一个FIN报文给客户端，表示自己也将关闭服务器端到客户端这个方向的连接。
  4. 客户端收到FIN后，发回一个ACK报文给服务器，FIN的序号加1。

但是注意，为什么挥手过程，第二步服务器发完信息之后，还要再发一次呢，那是因为，在第二步当中，服务器只是发送说接受到要断开了，但是服务器可能现在还有正在执行的任务，直到干完活了，再去说，现在没事了断开吧。然后客户端再接受信息，就开始断开。

那么大家也就可以理解了，如果在断开的时候，客户端已经不需要东西了，那么亦可将服务器第二步后继续传递数据可以关闭，当然，这也是个人的理解。大家可以把这个想象成客户说不要商家继续发货了的过程。

说说Vue的原理吧

其实Vue的原理的话，我也写过一篇文章，大家可以看看，具体双向绑定数怎么据实现的过程的话，我建议大家可以看看这个文章

Vue当中Dom的改变是怎么出发数据的改变的

如果你看了上面问题的第二篇文章，你就可以理解到是先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。

你觉得ES6当中觉得比较实用的技巧

其实这个的话，本人也写过一篇文章，写了在项目中可能经常要到的语法吧，当然，还有很多使用的，例如Promise对象等，大家可以再看看阮一峰前辈的ES6入门书

js实现异步的操作有哪些

我就简单说几个吧：

  • 利用setTimout实现异步
  • 使用Promise对象
  • 动态创建script标签
  • 利用script标签提供的async
  • 还有ES6里面async函数，使得异步操作变得更加方便
对于性能优化，你的指标是什么

其实本人虽然做了一些项目，但是用到的指标可能不多，主要也是两个：

  • 静态文件的大小
  • 加载静态资源需要的时间

但是真正的话，需要的不只是这些，需要的是

  • 最大限度地减少HTTP请求
  • 使用内容分发网络
  • headers添加一个Expires或Cache-Control头
  • 用gzip的压缩内容
  • 将样式表在顶部
  • js代码放在底部
  • 避免使用CSS表达式
  • JavaScript和CSS放在外部
  • 减少DNS查找
  • 缩小JavaScript和CSS
  • 避免重定向
  • 删除重复的脚本和样式
  • 减少DOM元素的数量

等等等等方法，这里我就不多做介绍，虽然这些方法很多我在项目中其实都用到了，但是都是因为一开始养成了良好的编程习惯了而导致以为这些都很正常，不过大家可以把这些知识更加的系统化吧，不然不归类的知识很容易就忘掉。

你在编写Vue的时候是怎么测试的

其实本人主要是用工具吧，Vue Devtools，当然，网上还有很多方法，本人在看vue2.0实践教程也教了不少的调试方法，但是的话，对于自己编写的程序，还是条理清晰的，所以就没用特别多的方法。

对于操作mysql的语句，你觉得有什么地方可以优化

这个主要是因为本人在简历也写了本人做的一个全栈的项目吧，mysql+nodejs+axios+vue全家桶+element-ui实现的一个学生信息管理系统。其实对于数据库mysql的优化，本人也是看过不少视频，但是过程中，印象比较深刻的就是：

  • 合理建立索引
  • 避免多次连接查询和嵌套查询
  • 避免数据类型不一致
  • 禁止不必要的ORDER BY排序
  • 批量INSERT插入可以合并插入
了解过慢查询吗

这个说实在的，了解过，只是毕竟是数据库的一个深入的优化的过程，基本的过程其实就是：

  1. 先运行看看是否真的很慢，注意设置SQL_NO_CACHE
  2. where条件单表查，锁定最小返回记录表。这句话的意思是把查询语句的where都应用到表中返回的记录数最小的表开始查起，单表每个字段分别查询，看哪个字段的区分度最高
  3. explain查看执行计划，是否与b预期一致（从锁定记录较少的表开始查询）
  4. order by limit 形式的sql语句让排序的表优先查
  5. 了解业务方使用场景
  6. 加索引时参照建索引的几大原则
  7. 观察结果，不符合预期继续从1分析
说一下git操作，git怎么进行多人协作

git操作的话，本人是从大一就使用github了，而且接触到的东西基本都是用git管理项目，因此比较熟悉一点，大家不熟悉建议可以看看廖雪峰前辈的git教程

说一下你学习的路线，怎么高效率的学习

其实这一点的话，我是深有体会啦，一面的面试官就教过我。那时候真的是获益匪浅吧，因为本人学习前端一年的过程当中，先把基础学好，后来又学习框架运用。在过程当中，接触到了很多新的知识，也不断地去关注前端前沿技术的发展，但是在过程当中，还是没有将知识体系化，而且整理出自己的一套解决问题的过程，我相信这也是很多人都会遇到的。不过还好，被腾讯官提了一下之后，本人也恍然大悟，将之前学习的基础知识再一次回顾和总结，因为当初理解的比较透彻回忆起来也比较快。

说说你在js高级教程第三版当中看到的一些实用的技巧

这个技巧其实很多的啦，我这里就不多说了吧，一本书里面，每个知识点都是一个小技巧。

说说快排

快排是比较简单的排序算法了，不懂的同学可以自行百度一下咯，各大排序算法的优势劣势原理都要了解一下的啦

还有什么问题想问的吗

这个问题其实，我还是和一面一样，毕竟，能够和腾讯大牛聊天真的是一个不错的机会，我就请教面试官对我的表现评价一下，毕竟，这样能够进步的机会也不算很多，要珍惜。

posted @ 2018-09-04 20:51  竹木狼马  阅读(173)  评论(0)    收藏  举报