小红书前端

小红书前端实习面经，低代码平台、自定义组件渲染与 RAF/RIC

自我介绍与项目相关

简单介绍个人经历及亮点项目（需说明负责模块、亮点/挑战及解决方案）
低代码服务的业务场景是什么？现有组件有哪些、数量及分类
低代码平台的用户群体的具体情况，是否为企业运营直接操作？平台包含哪些核心能力
自定义组件的渲染流程（需详细阐述，侧重对方案的理解）
低代码平台的组件是动态加载还是整体打包？
你对低代码方向的看法是什么？
目前做的低代码项目中，最大的痛点是什么？现有方案如何应对该痛点？

技术基础题

请解释esm和cjs的区别
requestAnimationFrame和requestIdleCallback的执行时机，谁先执行？requestIdleCallback是绘制前还是绘制后执行？ raf 是在渲染之前执行，ric 空闲时间执行做非紧急任务

raf 先执行，ric 是绘制后执行

React Fiber遍历DOM结构的顺序是什么？
请说明em、rem、vw、vh、rpx的含义

em 相对于父元素
rem 相对于根元素 html
vw 相对于视口宽度
vh 相对于视口高度
rpx 相对于设备宽度

useMemo和useCallback的区别

useMemo 缓存的是函数值
useCallback 缓存的是函数的引用都是为了避免子组件重新渲染

手写实现new方法
自适应布局场景题：
- 场景1：父容器下3个子组件，与父组件等高，均分父组件宽度，如何实现？
- 场景2：非均分场景，子组件宽度取决于自身内容长度，如何实现？

编程题

Promise相关异步代码输出题（代码如下）：


const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('resolve3');
    console.log('timer1');
  }, 0)
  resolve('resolve1');
  resolve('resolve2');
}).then(res => {
  console.log('then',res);
  setTimeout(() => {
    console.log('timer2',p1);
  }, 1000)
  return 1
}).finally(res => {
  console.log('finally', res);
})

then resolve1

finally undefined

timer1

timer2 promise fulfilled

字符串全排列：输入一个字符串，打印出该字符串中字符的所有排列，结果数组无重复元素（示例：输入"abc"，输出["abc","acb","bac","bca","cab","cba"]）

求职相关与反问

最近是否有其他面试？正在面哪些公司？
反问：部门预计招收多少人？

二面（未通过）

自我介绍与项目深度挖掘

简单自我介绍
团队主要业务是什么？为什么要做低代码项目？
低代码业务的具体场景有哪些？
你在低代码项目中主要负责的模块是什么？请详细介绍XX模块
低代码平台的技术设计方案（需结合代码层面阐述，而非产品流程）
低代码平台如何渲染组件？是否使用H5原生拖拽？
为什么选择H5原生拖拽而非开源工具库？原生H5拖拽的优势的局限性是什么？
对H5原生拖拽能力是否做过封装？如何封装（避免直接操作原生DOM的方案）？
如何评价低代码项目的优劣？有哪些评估指标？
目前低代码平台处于什么水平？能缩短多少开发周期？
低代码平台支持搭建多少页面？是否均支持在线运行？
自定义webpack插件是为了解决什么问题？

技术细节题

H5原生拖拽的执行顺序是什么？过程中会触发哪些事件（按顺序说明）？
drag事件拿到的对象是什么类型？

编程题

数组乘积操作：给定一个数组，返回一个新数组，新数组中每个元素是原数组中除自身以外所有元素的乘积（已做出来）

求职相关与反问

考虑新机会的原因是什么？
反问环节（无具体记录）

面试总结

核心考察方向：低代码项目的技术设计、实际落地细节（尤其是组件渲染、拖拽功能实现），Vue技术栈相关应用，前端基础知识点及算法能力
失利关键点：对低代码项目的技术设计阐述不足，H5原生拖拽的执行顺序、触发事件等核心细节未答出，项目相关问题的深度和细节挖掘未达标
准备建议：重点梳理低代码项目的技术架构、核心模块实现方案，深入理解所用技术（如H5拖拽）的底层原理和细节，强化项目相关的技术细节表达能力

On this page