校招｜三七互娱前端春招一二面（校招）

三七互娱前端春招包含一面、二面和HR面，面试围绕自我介绍、项目经历、前端技术知识、问题解决思路以及个人情况等方面展开。

• 一面（30min）

  开场：先进行自我介绍，然后进入项目交流环节，重点探讨项目中的重难点。

  技术问题

  vue keep - alive相关：询问是否了解vue keep - alive，若两个组件被keep - alive缓存，切换时不会执行create钩子函数。因为keep - alive的作用就是缓存组件实例，避免重复创建和销毁，切换时主要执行activated和deactivated钩子函数，可通过这两个钩子函数监听组件是否处于激活或失活状态。

  垂直居中方案：有多种实现方式，例如使用flex布局，设置父元素display: flex; justify - content: center; align - items: center;；使用绝对定位和transform，父元素设置position: relative;，子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);等。

  跨域：跨域是由于浏览器的同源策略导致的，即协议、域名、端口号任一不同就会产生跨域问题。常见解决方式有JSONP（只支持GET请求，利用script标签不受同源策略限制）、CORS（服务器设置响应头，如Access - Control - Allow - Origin等）、代理服务器（如开发环境配置webpack的proxy，生产环境使用nginx反向代理）等。

  项目指令相关：提及项目中使用的复制到剪切板的库clipboard，还询问指令里的钩子函数及区别。

  权限判断：前端处理权限分为路由和接口两个方面。路由方面，在vue - route中的钩子函数beforeEach中判断用户是否有权限访问该路由；接口方面，通过axios响应拦截器处理，若接口返回无权限信息，则进行相应提示或跳转。

  反问环节：可询问关于团队技术栈、项目发展方向等问题。

• 二面

  开场：面试官先自我介绍，然后求职者进行自我介绍并聊项目，此次项目交流感觉不太理想，未清晰表达。

  技术问题

  XSS：XSS即跨站脚本攻击，攻击者通过在网页中注入恶意脚本，当用户浏览该网页时，恶意脚本会在用户浏览器中执行，从而窃取用户信息、篡改网页内容等。防范措施有对用户输入进行过滤和转义、使用CSP（内容安全策略）限制脚本加载来源等。

  get和post区别：get请求一般用于获取数据，数据会附加在URL后面，长度有限制，安全性较低；post请求一般用于提交数据，数据放在请求体中，长度无限制，安全性相对较高。

  页面性能优化：可从减少HTTP请求（合并文件、使用雪碧图等）、优化图片（选择合适格式、压缩图片等）、使用CDN加速、代码优化（减少DOM操作、避免内存泄漏等）、合理使用缓存等方面进行优化。

  状态码：304状态码表示资源未修改，当浏览器发送请求时，服务器发现资源未变化，返回304，浏览器可直接使用本地缓存资源，减少数据传输。其他常见状态码如200表示成功，404表示资源未找到，500表示服务器内部错误等。

  前端错误上报方式：可通过window.onerror捕获全局错误，使用try - catch捕获同步代码错误，对于异步代码可使用Promise的catch或async/await的try - catch捕获错误，然后将错误信息发送到服务器进行记录和分析。

  Vue生命周期函数：包括beforeCreate（实例初始化之后，数据观测和事件配置之前）、created（实例创建完成，数据观测、属性和方法的运算、事件回调配置完成，但未挂载到DOM）、beforeMount（在挂载开始之前被调用，相关的render函数首次被调用）、mounted（实例挂载到DOM上）、beforeUpdate（数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前）、updated（由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用）、beforeDestroy（实例销毁之前调用，可进行一些清理工作）、destroyed（实例销毁后调用）等。生命周期函数用于在特定阶段执行相应操作，如初始化数据、发送请求、清理定时器等。

  css选择器以及优先级：css选择器有元素选择器（如p）、类选择器（如.class）、ID选择器（如#id）、后代选择器（如div p）、子元素选择器（如div > p）等。优先级为：!important > 内联样式 > ID选择器 > 类选择器、属性选择器、伪类 > 元素选择器、伪元素。

  css属性继承：可继承的属性如font - size、color、font - family等字体相关属性；不可继承的属性如width、height、margin、padding、border等盒模型相关属性。

  个人问题：询问最开心和最遗憾的一件事儿，可借此展示个人经历和性格特点。

  反问环节：可询问关于培训机制、职业发展空间等问题。

• HR面：主要围绕个人情况、职业规划、薪资期望等方面交流，此次面试者感觉被刷。