携程前端25实习 一面凉经

到预约的面试亭的时候已经离开始不到10分钟了,却发现门打不开，于是在楼之间的空地面的，意外地还蛮安静。

10分的时候面试官已经在等了，看到我进来就说开始吧。（约的是15分开始）

流程

1. 自我介绍
2. 项目遇到过印象最深刻的一个bug是啥有提前准备，本来打算讲记一次react报错排查 | EuDs's Blog。但不由自主的就开始讲我打包Postkid时的问题。说报错指向的代码是编译好的代码，难以排查。我通过版本控制、一步步回退，最终定位到了bug。
3. React的hook我讲得很浅显，我确实用过，但说不上来。想说一下useEffect可以模仿那三个生命周期方法，卡壳了
4. 有自定义过hook吗不好意思，没有
5. React的setState是异步还同步早期的React我不太了解，不好意思
6. Promise相关
7. Promise你是习惯用asynch还是await不好意思不了解，我习惯用.then
8. 讲讲原型链我说每个对象都有原型链，函数是特殊的对象，也有原型链。讲__proto__和.protype。还讲了new的原理，但自己觉得没讲明白
9. 讲闭包说是跟词法环境有关，然后讲了下自己的理解，为什么会有闭包，是因为JavaScript的三大结构stack、heap、queue。执行函数会把对应的函数压栈、被压进去的就包括对应的词法环境
10. var、let、const的区别讲var是最早的，作用域是全局作用域和函数作用域，这样设计有缺陷，举了for循环的例子，说需要用IFFE来解决（这个名字我也忘了，大概讲了下意思，感觉会被当成乱讲）。然后说es6为了解决var的缺陷，就引入了let和const，它们是块作用域。然后又讲了下变量提升。（这里我少讲了声明和变化）
11. 页面发送跨域请求是怎么处理的先讲了同源的定义,然后讲跨域的解决方式：代理: 跨域限制是限制浏览器对服务器的，因此使用个代理服务器就能避开这个问题CORS: 讲分成了三类请求，后两类需要options来预检。带了下预检的过程和max-age提了嘴JSOP、websocket、sendMessage,说这些方法都可以，但不常用。为了防止被追问，强调了下自己只是有看过
12. 看代码说输出我对结果不太确定，但知道这题是要考察任务队列。讲了宏队列和微队列，以及它们的执行顺序。
13. 你自己写css写得多吗少，我用tailwindcss比较多，强行扯了下它的优点（自己css确实了解得不多，得加强）
14. 不定宽高要怎么设置垂直居中用flex，justify-content和margin-items都设为center。 被追问还有吗，不好意思不清楚
15. 盒模型讲了两种盒模型
16. key的作用讲了React的diff算法,说主要三种diff算法：tree、component、element。而key就是和element diff算法有关。（感觉好像没答到点上）
17. xss攻击了解吗先介绍三种xss攻击，存储型、反射型、dom注入型。然后说主要有两类防范措施。阻止攻击者提交恶意代码 输入过滤： 道高一尺魔高一丈，难输入长度限制防止浏览器执行恶意代码 改成纯前端渲染，把代码和数据分隔开。举例了下说React防范xss攻击已经做得很好了，想说为什么好，但没说上来。
18. csrf了解吗讲了下原理和过程。然后说防范措施。报菜名般报了几个。然后说自己的理解，csrf主要针对的是cookie，那最简单的措施就是不在cookie存敏感措施。又讲了下chrome在今年一月份宣布已经要开始禁止第三方cookie。再回到自己项目，说自己是将token存在了sessionStorage和localStorage
19. 浏览器强缓存和协商缓存先说可以按照存放位置来分成memory cache和disk cache。然后讲协商缓存是要在强缓存时效后才起作用的。然后讲相关的几个header: Expires和Cache-Control，后者是替代前者的，以及为什么； ETag , 还有Last-Modified，If-Modified-Since这对，我名字没想起来，但是讲了下具体作用。
20. 浏览器的storage说有sessionStorage和localStorage。特别讲了下一个新打开的页面会复制原页面的sessionStorage,但之后就是独立的了。讲localStorage，说它特别持久，举了个自己的例子：前几天打开一个本地端口的网页，发现一年前做项目时留的localStorage竟然还在。还提到indexedDB，说了下自己的想法，觉得数据库还是留在后端会好些。但也说自己看过indexedDB的用途，说是可以用来实现离线浏览。然后比较了这四个的大小
21. 一道题，共享屏幕写这里我先是开了个Javascript的playground，然后就不知道怎么写了，改用python。然后共享出问题了，费了好些周折。
22. 了解TypeScript吗，觉得它有必要吗了解过，自己的第三个项目就是用的TypeScript，很折磨。都笑了。然后我扯了下JavaScript的历史，说设计之初没考虑到现在的使用人群这么广，为了弥补，人们用搞出了各种规范。TypeScript算是另起炉灶，是蛮有必要的。比如说看之前JavaScript的项目，有时候就要猜某个变量是啥类型，但TypeScript就好多了。
23. 反问刚准备提问呢，电脑卡一下没电了，改用手机连上去，面试官还在等我。问了两个没啥营养的问题，说了通感谢词。

感受

1. 这是自己今年的第一次面试，蛮珍惜的，但出了不少乱子。不过面试官人挺好的，很有耐心，让我对携程好感度++
2. 自己一上来蛮紧张的，后面反而变得嗨起来了，提到一个问题就想把自己所有相关不相关的储备都讲出去，导致可能会显得在乱扯。
3. 面试的时候没特地记录，上面内容是隔了好久才写的，没想到还能记这么清楚。
4. 几乎是纯八股，我想往自己项目上拐。面试官不接啊。
5. 不少知识都有看过，甚至也整理过。但讲的时候还是有问题。今后要试着自己讲几遍。
6. 牛客网上的面经真的有用，很感谢下面几位发的面经。自己今后也会投桃报李,也算是积积阳德。 携程前端面经_牛客网携程前端面经_牛客网携程 一面 时间1小时_牛客网携程一面3.19_牛客网

总结

第二天看就进人才池了，面试体验很好，下次还投携程。