携程前端实习一面记录

2024年3月6日

在携程集团 - 校园招聘投了前端开发工程师（2025届实习）

要求：

丰富的编码实战经验，熟悉PHP/JAVA/Python后台语言，对前后端联合开发的技术原理(Ajax,JSON)有一定认识；
熟悉JS/HTML5/CSS3/NodeJS等前端开发技术；
了解过第三方JS库或框架，使用过模块化方式开发；
热爱计算机编程，喜欢研究新技术、新标准；
有激情、有创造力、有逻辑性。

2024年3月9日

完成其发来的能力测评。测评的内容分别为：阅读文本、根据数据图计算、找规律、心理测评。

2024年3月13日

完成其发来的笔试链接，牛客网平台、四道编程题、均要求低时间复杂度，可使用本地ide。算是做了两道半吧。

2024年3月15日

傍晚收到面试邀请，可以自己选时间，我选择在3月20号的下午。

2024年3月18日

找了几篇面经

2024年3月20日

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

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

流程

自我介绍
项目遇到过印象最深刻的一个bug是啥
有提前准备，本来打算讲记一次react报错排查 | EuDs’s Blog。但不由自主的就开始讲我打包Postkid时的问题。说报错指向的代码是编译好的代码，难以排查。我通过版本控制、一步步回退，最终定位到了bug。
React的hook
我讲得很浅显，我确实用过，但说不上来。想说一下useEffect可以模仿那三个生命周期方法，卡壳了
有自定义过hook吗
不好意思，没有
React的setState是异步还同步
早期的React我不太了解，不好意思
Promise相关
Promise你是习惯用asynch还是await
不好意思不了解，我习惯用.then
讲讲原型链
我说每个对象都有原型链，函数是特殊的对象，也有原型链。讲__proto__和.protype。还讲了new的原理，但自己觉得没讲明白
讲闭包
说是跟词法环境有关，然后讲了下自己的理解，为什么会有闭包，是因为JavaScript的三大结构stack、heap、queue。执行函数会把对应的函数压栈、被压进去的就包括对应的词法环境
var、let、const的区别
讲var是最早的，作用域是全局作用域和函数作用域，这样设计有缺陷，举了for循环的例子，说需要用IFFE来解决（这个名字我也忘了，大概讲了下意思，感觉会被当成乱讲）。然后说es6为了解决var的缺陷，就引入了let和const，它们是块作用域。然后又讲了下变量提升。（这里我少讲了声明和变化）
页面发送跨域请求是怎么处理的 先讲了同源的定义,然后讲跨域的解决方式：
- 代理: 跨域限制是限制浏览器对服务器的，因此使用个代理服务器就能避开这个问题
- CORS: 讲分成了三类请求，后两类需要options来预检。带了下预检的过程和max-age
- 提了嘴JSOP、websocket、sendMessage,说这些方法都可以，但不常用。为了防止被追问，强调了下自己只是有看过

看代码说输出

setTimeout(() => {
  console.log('timeout')
},0);

const p = new Promise((resovle) => {
  console.log('new Promise')
});

p.then((res) => {
  console.log('promise then')
});

我对结果不太确定，但知道这题是要考察任务队列。讲了宏队列和微队列，以及它们的执行顺序。

你自己写css写得多吗
少，我用tailwindcss比较多，强行扯了下它的优点（自己css确实了解得不多，得加强）
不定宽高要怎么设置垂直居中
用flex，justify-content和margin-items都设为center。被追问还有吗，不好意思不清楚
盒模型
讲了两种盒模型
key的作用
讲了React的diff算法,说主要三种diff算法：tree、component、element。而key就是和element diff算法有关。（感觉好像没答到点上）
xss攻击了解吗 先介绍三种xss攻击，存储型、反射型、dom注入型。然后说主要有两类防范措施。
- 阻止攻击者提交恶意代码
  1. 输入过滤：道高一尺魔高一丈，难
  2. 输入长度限制
- 防止浏览器执行恶意代码
  1. 改成纯前端渲染，把代码和数据分隔开。
  2. 举例了下说React防范xss攻击已经做得很好了，想说为什么好，但没说上来。
csrf了解吗 讲了下原理和过程。然后说防范措施。报菜名般报了几个。然后说自己的理解，csrf主要针对的是cookie，那最简单的措施就是不在cookie存敏感措施。又讲了下chrome在今年一月份宣布已经要开始禁止第三方cookie。再回到自己项目，说自己是将token存在了sessionStorage和localStorage
浏览器强缓存和协商缓存 先说可以按照存放位置来分成memory cache和disk cache。然后讲协商缓存是要在强缓存时效后才起作用的。然后讲相关的几个header: Expires和Cache-Control，后者是替代前者的，以及为什么； ETag , 还有Last-Modified，If-Modified-Since这对，我名字没想起来，但是讲了下具体作用。
浏览器的storage 说有sessionStorage和localStorage。特别讲了下一个新打开的页面会复制原页面的sessionStorage,但之后就是独立的了。讲localStorage，说它特别持久，举了个自己的例子：前几天打开一个本地端口的网页，发现一年前做项目时留的localStorage竟然还在。还提到indexedDB，说了下自己的想法，觉得数据库还是留在后端会好些。但也说自己看过indexedDB的用途，说是可以用来实现离线浏览。然后比较了这四个的大小

一道题，共享屏幕写

// 编写函数将数组A转成对象B的数据格式
// 数组A
[
    {name:'job',content:'one'},
    {name:'job',content:'two'},
    {name:'life',content:'eat'},
    {name:'job',content:'three'},
    {name:'life',content:'sleep'},
    {name:'life',content:'play'}
]
// 对象B
{
  job: ['one','two','three'],
  life: ['eat','sleep','play']
}

这里我先是开了个Javascript的playground，然后就不知道怎么写了，改用python。然后共享出问题了，费了好些周折。

了解TypeScript吗，觉得它有必要吗了解过，自己的第三个项目就是用的TypeScript，很折磨。都笑了。然后我扯了下JavaScript的历史，说设计之初没考虑到现在的使用人群这么广，为了弥补，人们用搞出了各种规范。TypeScript算是另起炉灶，是蛮有必要的。比如说看之前JavaScript的项目，有时候就要猜某个变量是啥类型，但TypeScript就好多了。
反问刚准备提问呢，电脑卡一下没电了，改用手机连上去，面试官还在等我。问了两个没啥营养的问题，说了通感谢词。

感受

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

总结

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

2024年3月6日¶

2024年3月9日¶

2024年3月13日¶

2024年3月15日¶

2024年3月18日¶

2024年3月20日¶

流程¶

感受¶

总结¶