字节抖音电商前端一面

在前端面试中，Webpack 一直是高频考点之一。而在所有模块化相关的问题中，“import 导入时 Webpack 在干什么” 这类问题经常被问到。乍看只是一个语法糖，但背后其实包含了 模块解析、依赖图构建、代码转换、打包优化 等一整套复杂流程。本文小圆将带你从源码构建视角，彻底弄清楚 import 背后 Webpack 的工作原理～～～一、整体流程概览当你在代码中写下这一行时： import { foo } from './b.js'; Webpack 的处理流程大致如下：解析阶段（Parsing）：扫描代码，提取所有 import 语句；模块定位（Resolving）：根据路径或模块名找...

项目 八股 手写 1h20min八股1. pnpm 与普通 npm 之间的区别。2. 是否听过“幻影依赖”手写嵌套数组异步累加的代码，是否有比基础思路（reduce 结合 Promise）效率更高的实现方法。答：分块累加现场实现追问询问嵌套数组分块并行累加的思路与哪种排序算法相似

项目 八股 手写 八股除加载时间外，还有哪些核心指标可用于评估页面性能如何评估卡顿问题用 JavaScript 计算 FPS核心原理是什么vw  单位含义是什么？与  px 、 %  有何区别元素水平垂直居中还有哪些实现方案问了一个问答 分析同步异步执行顺序 手写1画一个圆，直径固定页面宽度1/10 永远在页面正中间2实现输入框关键词联想功能（含联想、回填、空白处关闭列表）vue/react现场实现一个组件，通过 Axios 调用  auto_completion  接口输入联想组件有哪些可进一步优化的点前端核心的学习方式是怎样的

项目+八股+手写八股1. 什么是防抖和节流？两者的区别是什么？2. 防抖和节流的实现原理是什么？分别有哪些应用场景？手写防抖3. 为什么会有跨域？4. 一般跨域的手段都有哪些？分析结果题5. 已知 picture A（元素含图片URL，对应渲染S1、S2、S3）和 picture B（元素含图片URL+唯一key值，对应渲染S1、S2、S3），删除两者中对应S2的中间项后重新渲染，picture A 和 picture B 分别渲染出几张图片、是哪几张？原理是什么？（没答出来，后续面试官补充核心关联 Vue 2 数组 diff 逻辑）6. 原生 React 父子组件中，能促使组件重新渲染的因素有哪些7. 使用 React Hooks 时，用 useCallback、useMemo 避免重新渲染的整体原理是什么8. useMemo 跟 useCallback 一般应用于什么场景9. 大文件断点续传、断点上传的技术实现方案10. 手写实现 append 函数：将任意多的项添加到目标数组中，过滤空值（undefined、null）并返回新数组，需处理arr不是数组、arr为 undefined/null 的情况