网站导航
> 技术文档 > 【前端：面经篇】_前端面经

【前端：面经篇】_前端面经

网友: 技术文档 2025-07-30 17:00:18

写在前面：苦于本人学习知识点后容易忘记，因此就拿csdn来当做笔记本，记录一下每日的进展，也是督促自己学习，培养一个好的习惯。

如果有错误的地方也请各位大佬指出，大家一起共同进步，想一起探讨学习的可以和博主一起学习呀。

2025.06.04 淘天集团校招

一面技术面：

这也是博主第一次面试，也没想到上来就是大厂，心里非常没底，感觉很害怕。本来八点面试，当时紧张的都主动去加面试官的钉钉号了o(╥﹏╥)o，然后面试开始时，面试官干净利落，没有半点废话直接进入正题，拷打项目和实习经历，最后问了一点的八股，主要问的问题会写在下面。本身博主前端是自学的，很菜，当然是禁不住拷打，最后都快哭了。（碎碎念，博主很菜别骂我，不想看可以直接看下面的问题）

首先是实习经历相关的：

1.闸机是怎么捕获图像，然后传递给后端，传递的格式是什么？

因为博主最初的实习是大二的时候，当时还没有学习很多东西，很多都是靠前辈们直接灌输的，说让我怎么做怎么做，当时也听不懂，现在的回旋镖也落在了自己的身上。也没办法再找前辈们问相关的东西，但是经历摆在这里，只能靠deepseek大人救我了。

捕获图像通过闸机上的摄像头在红外传感器检测有人靠近时触发捕获图像，同时在闸机面板上增加一个视频元素来用于显示摄像头获取的画面，添加一个隐藏的canvas用于捕获帧。用封装的axios.post通过后端的接口来进行传递，传递的格式是base64编码，可以用multipart/form-data或者直接放在JSON字段中（数据量大时性能差）

当使用multipart/form-datas上传时：将Base64作为表单字段的值上传。

当使用JSON上传时：

{

        \"image\":\"XXXXXXXXX...=\"

}

2.Formdata和JSON都是怎么传递内容？格式是什么？
特性 FormData JSON 传递内容 文本字段、文件（二进制数据） 字符串、数字、布尔值、null、对象、数组（纯文本形式） JavaScript处理 使用FormData API（append,get等方法） 使用JSON.stringify()和JSON.parse() 用途 模拟HTML表单提交，特别是包含文件上传时 结构化数据交换（API请求/响应） 格式 multipart/form-data 纯文本（需要Base64编码）
3.图片过大怎么处理？
  1. 设置canvas尺寸，等于要裁剪的人脸区域尺寸，分块处理，每次只处理图片的一部分，然后将各部分的DataUrl合并，然后根据API传递给后端。
  2. 降低图片质量值const capturedImageData = canvas.toDataURL(\'image/jpeg\', 0.92);//后面这个0.92就是图片质量
  3. 缩放图片，调整图片宽高大小

（无论怎么处理图片，最后都要用axios.post传递给后端）

4.怎么处理跨域问题？

我们采用的是在vite中proxy代理服务器，将本地的localhost:5173发出的要访问服务器的/api请求重定向到服务器的具体网址

proxy: { // 将 /api 开头的请求代理到 target \'/api\': { target: \'http://localhost:8080\', // 你的后端服务器地址 changeOrigin: true, //修改请求头中的host字段 rewrite: (path) => path.replace(/^\\/api/, \'\'), //重写路径的算法 }, },
5.端口不同怎么去配置？

实际上的原理还是跨域，同4

6.前端通过接口访问后端服务器的原理？拦截是什么？怎么拦截？

HTTP请求/响应的过程：浏览器先是发送请求，然后通过后端服务器处理请求，然后返回响应，最后浏览器处理响应。

拦截是在请求和响应的过程对数据进行自定义处理，前者是请求，判断请求是否正确，否则拒绝，后者是响应，根据返回的状态码来返回错误提示。

  • 请求拦截：在请求发送到服务器之前
  • 响应拦截：在接收到响应之后，数据传递给业务代码之前

项目采用的是axios拦截，myAxios.interceptors.request.use()和myAxios.interceptors.response.use()，

7.Url中#的作用，跟传参区别？

#是锚点，#section1 会指示浏览器滚动到页面中带有 id=\"section1\" 的元素位置。更改锚点的内容不会导致页面重新加载。主要用于前端页面的导航和操作，带有#的URL不会传递给后端，仅用于前端页面的定位

8.服务器怎么区别网页端请求和API请求，来返回不同的内容？

网页请求的URL中不含有/api，API请求中有/api，accept请求头内容也不一样，网页请求是text/html，API请求是application/json，content-type内容也不一样，网页是application/x-www-form-urlencoded，API是application/json

9.绘制一个竖着的三角形，让他实现平移，有哪些方法？

首先是绘制一个三角形，设置height和width都为0，设置border宽度，然后仅留下最右侧的边框，就得到一个竖着的三角形，接着就是平移，因为面试官没有强调是要动画还是静态移动，所以我回答的是@keyframe和animation，0%{}...100%{}关键帧。然后老师提出了几个静态的，直接用position，translate，然后又问了不设置x能不能实现平移（没想起来），最后面试官说是用absolute直接改变left，right等，别的方法这里就不再说了，各位看官大佬应该也知道

10.translate和position在浏览器渲染上有什么区别？

translate不会改变元素在文档流中的位置，也不会影响其他元素的布局，position通过改变元素的position属性来定位元素，改变元素的位置可能会导致文档流的改变，影响其他元素的布局，从而触发重排和重绘

11.用过什么组件，element-ui如果我只想用其中的几个包，怎么做，还是需要把包全部导入吗？

安装必要依赖npm install element-ui --save   #安装按需加载插件npm install babel-plugin-component -D 然后配置babel.config.js在其中添加要使用的组件名字，然后在代码中按需导入

12.Try-catch是怎么捕获异常？在调用子链的时候有一个数据项缺失怎么办？
try { // 可能抛出异常的代码 const result = riskyOperation();} catch (error) { // 异常捕获处理 console.error(\"捕获到异常:\", error);} finally { // 无论是否异常都会执行 console.log(\"清理操作\");}

使用可选链+默认值合并：const value=obj?.A?.data?.value?.name??defaultValue

然后就是一些项目中的东西，这里就不再细说，短短几句也说不清楚

总结：深挖实习经历和项目，八股也是围绕着你做的内容去考，对于这些大厂还是不要想着有侥幸心理，背背八股就行。（当然可能是博主基础太差了，感觉好多知识都没掌握）

第一次写博客，有不足之处还望大佬们讨论指出，还望大家多多担待，后续也会继续更新，喜欢博主可以关注一下，(#^.^#)

网络标签：

相关问题