2022 信也科技23秋招前端一二三面面经（已offer）

2022 信也科技（23届秋招）消费场景前端一二三面面经

信也科技前端面经也太少了，就让我来补充一点吧（好像信也科技的前身是拍拍贷，这个公司出名一些，搜这个的面经会多些）

一面

日期：2022/11/7

自我介绍
如何去做的移动端的适配？
rem 是如何做的适配？如何设置的 font-size 大小？
有没有了解过其它的适配方案？（我说了阿里的 amfe-flexible 和 postcss-pxtorem 方案，以及设置 <meta name="viewport" content="_width=_device-width, initial-scale=1.0"> 的两种方式）
有没有了解过 vw 和 vh 的适配方式
介绍一下实习里面虚拟列表的实现
如何计算十万级数据加载的时间？（使用 Vue-devtool 这个插件自带的渲染时间计算）
这个时间还可以再优化吗？（我简历的效果是 2-3s，通常情况下 100-200ms 内还算可以接受，面试官觉得优化后的渲染时间还是过于长了）
为什么不选择分页或者前端分页代替虚拟列表来时目录树呢？
如何实现一个分页器？比如有 10 页，默认显示存在 3 页可点击，类似下面的效果

< 1, ..., 9, 10 >

项目里面有 Native 项目的经验，那有没有使用过 prompt 去实现 H5 和 Native 的交互？
介绍一下防抖和节流
介绍一下有哪些方式去实现跨域
你说的上面的跨域方法在部署方面哪个更好一点？（我回答的 Nginx）
为什么是 Nginx？只是因为可以不用麻烦后端吗？后端使用 CORS 其实也不麻烦，添加一个请求头也是非常快的
跨域上 Nginx 和 CORS 在安全角度上 Nginx 的优势（面试官明示了 Nginx 相对于 CORS 真正的优势其实是在于安全）
你说你实际部署过网站，那么对 nginx.conf 的代理配置中，下面的两种写法有什么不同？（我太菜了，这个都不懂，面试官后来介绍涉及到实际请求 URL 的重写问题，具体请参考这篇文章 - Nginx中proxy_pass末尾带斜杠/和不带的区别）

## 第一种写法
server {
  location A {
    proxy_pass B;
  }
}
## 第二种写法
server {
  location A {
    proxy_pass B/;
  }
}

说一下你了解的常见的前端性能优化
你有了解过哪些 loader/plugin，我只讲了几个，像这个八股我每次碰到都不知道讲什么好，查了一下好像也没有好的总结，不知道面试官想要根据这个考察什么呢？
介绍一下你了解的跨端交互的方式（我使用的是 JS 的 API，就是 JavascriptInterface）
介绍一下 Vue 的 diff 算法
diff 算法在增删改一个节点时，具体是怎么实现的？（这个问题仿佛一下子打中了我的七寸，我其实对 Vue 的 diff 算法的了解是一个半桶水 /(ㄒoㄒ)/~~）
介绍一下 Vue 的兄弟/父子/祖孙组件的通信方式
如何实现 vuex 的持久化存储，保证页面在刷新后也能够获取到 vuex 的数据
如果让你从新规划一个项目，你会如何去做呢？可以分为，项目开发层面，提交层面，部署层面（其实面试官想考察开发层面如何去做，比如网络请求的配置，axios 的请求响应拦截，项目文件目录的制定规范，我说了太多项目的规范部分）
看了一下你的掘金博客，里面有写一些 Web 安全，能介绍一下吗？（我简单讲了一下 CSRF/XSS，忘记讲 HTTPS 了， /(ㄒoㄒ)/~~）
常用的 CSS 父子盒子水平垂直居中的方案有哪些？
学校应该是教 Java 比较多，所以为什么会选择前端呢？
你对未来的发展是如何规划的？（别问，问就是走全栈）
反问
1. 您认为 to C 和 to B 的前端开发有什么区别吗？
2. 面试官看过我写的垃圾博客还是挺用心的，所以就问了下他，觉得对于程序员写博客能够有什么好处

总结一面，非常有经验的前端开发工程师，在开发和部署层面都非常有经验，能够给出相应的正向反馈，对于候选人不会的和回答错误的，会给出纠正和答案，非常的🐂，而且对于反问的问题回答的也很详细

二面

日期：2022/11/8

自我介绍、实习介绍和项目介绍
你觉得你的专业在培养什么的工程师？
专业应该接触 Java 和 C 语言比较多，为什么会选择前端呢？
什么时候开始接触的前端？
两端实习经历有没有什么难点？（深挖项目，面试官会根据你对难点的解决方案点评，并给出他作为一个前辈的经验角度来说比较标准的解决方案应该是怎样的，所以接下来的问题都是根据我的实习经历的难点给出，参考意义不大）
对于目录树的渲染优化为什么不去做分页？反而是选择了虚拟列表？
1. 虚拟列表快速滑动时，是否有白屏现象，如何解决？
2. 为什么后端不能分页？如果只能一次性拿到整个目录树，也可以在缓存，比如基于 Redis 缓存去做分页，技术也是可行的，是不是和后端的沟通存在问题？
3. 目录树的解决应该使用长列表分页而不是虚拟列表，因为它本质上是一个长列表问题，如果点击的时候多出来的子项，你要如何使用虚拟列表去解决呢？

在 created 中去对方法防抖的一个处理的一个讨论，类似如下代码

<template>
  <t-input @input="handleNumberChange" />
</template>
<script>
import debounce from "@/utils/util.js";

export default {
  created() {
    this.handleNumberChange = debounce(this.handleNumberChange);
  },
  methods: {
    handleNumberChange() {
      // ...
    }
  }
}
</script>