前言时间过得真快，20年的金9银10仿佛就在昨天，21年的金3银4紧随其后。还没准备好面试的同学，不要慌张。今天说的是淘系前端面试，一共5面+HR面，会问什么问题？我该怎么回答？看完这篇文章，将为我们的面试锦上添花！一方面，这边主要问的是基础部分，我会带一些题目的提示TCP三向握手/四向挥手/等待2MSL的意思/连接但客户端失败TCP慢启动/拥塞控制，快速重传/fastrecoveryTCPUDPQUIC（QUIC是Http3的底层协议）Http2相对于Http1.1新增了哪些内容，主要是通道复用等浏览器渲染过程，注意只是渲染过程，这是主要的从解析DOM树到显示在屏幕上的过程是标记化/树构建/收集样式表/布局渲染树/绘制列表/光栅化/绘制瓦片/...这些过程，建议阅读浏览器的工作原理：新浏览器的幕后揭秘强缓存和协商缓存，主要讲E-Tag和Last-Modified以及对应的标识，强缓存方案和协商缓存方案场景，比如哪个index.html应该b用过吗？CSS水平居中和垂直居中移动端1px，老问题。Git操作主要是revert和reset。我们工作室使用GitFlow，并且区分Master和Dev分支。小哥说了一个GitFlow无法处理的场景，就是一个feature还没有合并到Master中，但是后面的feature已经测试并合并到trunk中了，这个时候怎么处理呢？React：新旧生命周期的问题，为什么要丢弃旧版本（约束开发者和Fiber架构可能会打断它），新版本是什么？Features(getDerivedStateFromProps(nextProps,prevState)，这个方法是静态方法，也就是说不能在里面获取this，入参是prevState，保证了state和props之间更多的隔离)。getDerivedStateFromErrors和componentDidCatch之间的协作非常有趣。React：PureComponent，浅比较，把shallowEuqal的源码放在shouldComponentUpdate:consthasOwn=Object.prototype.hasOwn属性；函数是（x，y）{如果（x===y）{返回x！==0||y!==0||1/x===1/y;}else{返回x！==x&&y!==y;}}导出默认函数shallowEqual(objA,objB){if(is(objA,objB))returntrue;if(typeofobjA!==“object”||objA===null||typeofobjB!==“object”||objB===null){returnfalse;}常量键A=对象。键（objA）；常量键B=对象。键（objB）；如果(keysA.length!==keysB.length)返回false；对于(leti=0;i组件，借助getDerivedStateFromError和componentDidCatch来捕捉错误。https加密机制GitRebase和GitMergeFlutter以及Serverless底层的ReactNative，这个可以聊聊FaaS和BaaS，以及Serverless对前端的意义。三边形和四边形问题的角度和提出的问题差不多，所以放在一起。介绍项目时，通常会问面试官他更感兴趣的是商业类项目还是设施类项目。设施类型将引入@Penumbra/cli。不要在这里和那里谈论它。按照技术栈->业务场景->亮点->难点->提炼总结->自我提升的步骤，会更加条理清晰。亮点/难点最好通过STAR规则引入。@Penumbra/cli上面已经介绍过了，不再赘述。主要是体现了新建项目目录的繁琐->成员之间目录结构要统一的意识。GraphQL，主要介绍这些：GraphQL的含义，与RESTFul的区别对后端Apollo生态的影响，这里我想做一个大胆的猜测，未来的BFF层一定有这三个东西：Apollo-Server&TypeGraphQL&Apollo-Rest-Datasource，至于有兴趣的同学可以去看看。Apollo不仅提供服务端支持，还提供客户端支持，即Apollo-Client。同时使用Server和Client构建应用，真正做到1+1>2的效果因为两者就像一个。升职阻力，其实只要是一支比较年轻的球队，是没有阻力的。主要原因是可能会有一定的学习/开发/维护成本~哭“学不会了”可能在前端界是真的Webpack性能调优从打包速度/打包大小/三个方面入手交互友好性。这里推荐一些我觉得比较有用/有趣的插件：friendly-errors-webpack-plugin，主要针对抛出错误的接口进行了优化。很多clis都在使用.speed-measure-webpack-plugin来衡量每个链接的打包时间，也可以找出哪个loader/plugin耗时最长。terser-webpack-plugin，压缩JSwebpack-bundle-analyzer，分析打包后的产品webpack-visualizer-plugin，也分析打包后的产品，但是更直观的是webpack-parallel-uglify-plugin，并行压缩，好像是重复webpackbarwithterserfunction，高度受到推崇的！打包的时候会有进度条（这个是VuePress用的）preload-webpack-plugin。至于预加载，如果从配置开始，主要是为了减少查找文件的时间，减少构建代码的大小。前者可以在resolve字段配置extension，在loader配置exclude，后者主要是Tree-Shaking（注意CSS也可以针对tree-shaking进行优化），codesplitting（动态加载和Lodash/等大模块）Antd）、Source-Map模式、压缩代码等React函数类型组件ReactHooks：useStateuseEffect，不传dep，传入[]，标准组件的生命周期。使用LayoutEffectuseRef，并使用ImperativeHandle和forwardRefuseRef，让功能组件也可以享受访问DOM元素或者自定义组件，父组件获取子组件引用然后调用子组件方法，比如focus等ForwardRef，可以得到父组件的ref实例作为子组件的参数（与props同级），然后将这个ref绑定到自己的内部节点上，就可以实现ref的透传！使用白茅草veHandle，经常和forwardRef一起使用，可以控制暴露给父组件的属性和方法。第一个参数是forwardRef包裹后得到的父组件ref实例。useMemo和useCallbackHooks的思想，比如Vue3的新API，社区React生态都在拥抱Hooks的思想，比如上面提到的React-Redux的useSelector和useDispatch，React-Use和Umi-Hooks等Node的Cluster模块，主从模式，底层Libuv.CI/CD，主要以GA为代表的一键埋点方案，以MixAlpha/Sensing数据为代表的可视化埋点等测试，Jest/Enzyme/Puppeteer写单元/集成/E2E测试。扑。五面五面面试官可能比较忙，所以整个面试过程大概20分钟左右。专注于你自己的经历。如果你是独行侠，也可以说说你对社区的贡献等等，不要只说你喜欢独处。我一个人工作。HR那边常见的问题：大学成绩，兴趣爱好，有没有女朋友，你们两个的职业规划，个人职业规划，成就感，团队合作经历？是一帆风顺还是坎坷（？）为什么学前端还有别的offer？为什么要来阿里？当然是因为阿里是前端的宝地。这些问题比较主观，就不说了，以免误导。我个人的想法主要分为三点：多终端解决方案。随着5G的发展，物联网设备逐渐成熟。到时候，前端程序员需要适应的屏幕可能会更多？我觉得未来可能会有真正的多端解决方案，就是更全面的Rax或者Taro，真正做到一次编写，到处运行。当然，理想是好的。在登上七彩祥云之前，还是专心学好各个终端吧~入侵对于后端来说，Serverless无疑是前端的下一个风口。它给了我们移动到后端的能力，让我们可以“与自己联合调试”，而不用担心我们写的服务被流量炸毁。后端同学那你就可以解放了，去做一些更有意义的事情。（真的不是抢菜。）智能化，虽然现在赋能的概念到处都是，但我还是觉得前端的一个终极目标就是为其他岗位赋能，让运营者可以通过自己，让产品爸爸选择嵌入哪些控件/事件/指示灯，这样他就不想从零开始学前端了后端可以直接拖拽匹配一个界面，前端的同学可以直接设计图纸生成UI代码（梦想还是有的）。虽然业界已经有了一些解决方案，但或多或??少还是有的，这也是我最感兴趣的方向之一，只能说面试真的是一个玄学的东西。如果你能遇到一个各方面都和你相当合拍的面试官，那么整个面试过程真的会轻松愉快。.春招即将结束，希望大家都能拿到满意的offer！
