创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。（注：即创建一个新数组，这个数组中的值，为排除了给定数组中的值。结果值的顺序是由第一个数组中的顺序确定。

参数：
array (Array): 要检查的数组。
[values] (...Array): 排除的值。

function difference(...agrs){
    const array =  agrs[0]
    if(!Array.isArray(agrs[0])) return []
    const excludeSet = new Set(agrs.slice(1).flat(Infinity))
    let result = []
    
    for(const value of array){
        if(!excludeSet.has(value)){
            result.push(value)
        }
    }

    return result
}

console.log(difference([3, 2, 1], [1,[[[[2]]]]]))

创建一个新数组，将array与任何数组 或 值连接在一起。

function concat(...args) {
  const array = args[0];
  const rest = args.slice(1);

  let result = Array.isArray(array) ? [...array] : [array];
  for (const value of rest) {
    if (Array.isArray(value)) {
      result.push(...value);
    } else {
      result.push(value);
    }
  }
  return result
}

var array = [1];
var other = concat([1,2,3],[4,5,[6]]);
console.log(other);

创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”

function compact(array){
    if(!array || typeof array !== 'object') return []
    let result = []
    for(let i = 0; i < array.length; i++){
        if(!(i in array)) continue;
        if(array[i]){
            result.push(array[i])
        }
    }
    return array
}

console.log(compact([0, 1, false, 2, '', 3]))

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

function chunk(array, size = 1){
    if(typeof array !== 'object' || typeof size !== 'number'){
        return []
    }
    if(!array || !array.length || size < 1) {
        return []
    }
    let result = [];
    let lastSlice = 0;
    for(let i = 0;i < array.length; i++){
        if(i % size === 0 && i !== 0){
            result.push(array.slice(lastSlice,i))
            lastSlice = i;
        }
    }
    if(lastSlice < array.length){
        result.push(array.slice(lastSlice,array.length))
    }

    return result;
}

chunk(['a', 'b', 'c', 'd'], 2);
    // => [['a', 'b'], ['c', 'd']]
    
chunk(['a', 'b', 'c', 'd'], 3);
    // => [['a', 'b', 'c'], ['d']]

s

CSS 相关

题目 1：容器宽度自适应与限制

题干： 设置一个容器，使其宽度占屏幕宽度的 80%，但最大宽度不超过 500px，以下哪个 CSS 写法是正确的？

选项：

• A. width: 80%;
• B. width: 80vw;
• C. width: 80%; max-width: 500px;
• D. width: calc(80% - 500px);

答案： C ✅

解析：

题目 2：CSS Grid 响应式列表布局

题干： 实现一个书籍列表布局，要求每行最多显示 4 本书，当屏幕宽度变窄时，列数自动减少为 2 本，以下哪个 CSS 写法最符合需求？

选项：

• A. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
• B. grid-template-columns: repeat(4, 1fr)
• C. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
• D. grid-template-columns: 1fr 1fr 1fr 1fr

答案： C ✅

解析：

题目 3：CSS 样式优先级

题干： 以下 HTML 元素最终显示的文字颜色是什么？

<div id="one" class="two" style="color:red">我是什么颜色</div>

选项：

• A. yellow
• B. green
• C. pink
• D. red

答案： 红色 ✅

解析： CSS 样式优先级从高到低：行内样式（style=""）> ID 选择器（#one）> 类选择器（.two）> 标签选择器（div）。行内样式 color:red 优先级最高，因此文字为红色。

题目 4：大屏数据可视化布局重构

题干： 重构大屏数据可视化页面，要求左侧导航可折叠、右侧图表区域保持 16:9 宽高比、多端自适应（PC / 平板 / 大屏），且解决折叠时图表抖动、高分屏下元素溢出的问题，以下哪种方案最优？

选项：

• A. 使用 Flexbox 嵌套布局，通过 calc() 动态计算尺寸，用 transition 实现折叠动画
• B. 组合使用 Grid 布局定义宏观结构，Flexbox 处理局部对齐，通过 CSS 自定义属性维护比例系统，应用容器查询和视窗单位进行响应式适配
• C. 采用 CSS Grid 定义布局模板，结合 aspect-ratio 属性控制图表区域，使用 CSS 容器查询处理多端适配
• D. 使用 JavaScript 监听 resize 事件动态计算尺寸，通过 transform 缩放整个画布，利用 will-change 优化动画性能

答案： B ✅

解析：

Vue 相关

题目 1：Vue watch 配置项

题干： 关于 Vue 中 watch 的 immediate 和 deep 属性，以下说法错误的是？

选项：

• A. immediate 属性表示在 watch 首次绑定数据时，是否执行 handler 方法
• B. immediate 值为 false 时，表示在 watch 声明时就立即执行 handler 方法
• C. immediate 值为 true 时，表示在数据发生变化时才执行 handler 方法
• D. deep 属性表示进行深度监听，目的是为了发现对象内部值的变化，复杂类型的数据时使用

答案： B、C ✅（错误选项）

解析：

题目 2：Vue 动态样式绑定（表单按钮）

题干： 表单验证场景中，当所有字段验证通过（formValid 为 true）时，提交按钮背景色为绿色，否则为灰色，以下哪个写法正确？

选项：

• A. v-bind:style="{ backgroundColor: formValid ? 'green' : 'gray' }"
• B. v-if="formValid" style="background-color: green"
• C. v-model="formValid" style="background-color: green"
• D. v-for="formValid" style="background-color: green"

答案： A ✅

解析：

题目 3：Vue 3 服务端渲染（SSR）性能优化

题干： 高流量促销活动场景下，Vue 3 SSR 页面出现服务器过载、首屏渲染延迟的问题，以下哪种优化策略最优？

选项：

• A. 流式渲染（renderToStream）+ Transfer-Encoding: chunked
• B. 异步组件加载 + 客户端 hydration 重试机制
• C. renderToString + 服务器端内存缓存
• D. 静态站点生成（SSG）+ 托管到 CDN

答案： C ✅

解析：

题目 4：Vue 高频事件优化（mousemove）

题干： Vue 组件中绑定高频 mousemove 事件导致 UI 卡顿，以下哪种方案能最小化性能开销并保证状态同步？

选项：

• A. 通过 provide/inject 定义事件总线，子组件触发自定义事件
• B. 在组件模板中使用 @mousemove.passive 修饰符绑定处理函数，结合防抖逻辑
• C. 为每个目标元素添加独立的 @mousemove 监听器，并在处理函数内调用 event.stopPropagation()
• D. 在 setup() 中使用 window.addEventListener 绑定事件，在 onUnmounted 中移除监听器，并利用 requestAnimationFrame 节流

答案： D ✅

解析：

TypeScript 相关

题目 1：TypeScript 类型推断规则

题干： 以下哪个不是 TypeScript 的类型推断规则？

选项：

• A. 如果初始化时没有类型和赋值，推断为 any 类型
• B. 如果初始化时有赋值但没有类型，推断为该值的类型
• C. 如果是在大多数分支中推断出的类型，就使用那个类型
• D. 如果初始化时有类型但没有赋值，推断为 unknown 类型

答案： C ✅（错误选项）

解析：

• A/B/D：均为 TypeScript 核心类型推断规则
• C：TypeScript 会根据所有分支计算联合类型，而非 "大多数分支" 的类型，因此该说法错误

JavaScript 基础与 DOM 操作

题目 1：fetch API 获取 JSON 数据

题干： 使用 fetch API 从 https://api.example.com/users 获取用户数据，并打印 JSON 格式的结果到控制台，以下哪个写法正确？

选项：

• A. fetch('https://api.example.com/users').then(data => console.log(data))
• B. fetch('https://api.example.com/users').then(response => response.json()).then(data => console.log(data))
• C. fetch('https://api.example.com/users').then(response => console.log(response))
• D. console.log(fetch('https://api.example.com/users'))

答案： B ✅

解析：

题目 2：为对象添加独立方法（音乐播放器）

题干： 音乐播放器项目中，每首歌曲对象共享原型方法 play，需为某一首歌曲单独添加 pause 方法（不影响其他歌曲），以下哪种方式正确？

选项：

• A. 修改原型链中的原型对象
• B. 直接为该歌曲对象添加 pause 方法
• C. 使用 Object.setPrototypeOf() 方法
• D. 使用 class 关键字并继承歌曲类

答案： B ✅

解析：

题目 3：高频 DOM 更新性能优化

题干： 实时监控系统中，每秒需更新 5000+ DOM 元素，导致频繁样式计算和布局抖动，以下哪种方案最优？

选项：

• A. 使用 document.createElement 逐个创建元素后直接追加到容器，通过 will-change: transform 强制提升图层
• B. 将容器设为 display: none 后通过 innerHTML 全量替换，操作完成再恢复显示
• C. 创建离屏 Canvas 进行数据绘制，通过位图快照替换 DOM 内容，同时维护隐藏的 DOM 副本
• D. 采用文档碎片（document.createDocumentFragment）批量构建节点，使用 requestPostAnimationFrame 控制插入时机

答案： D ✅

解析：

题目 4：新闻网站异步加载更多

题干： 开发新闻网站时，需实现 "点击加载更多" 功能，要求不刷新页面加载新内容，以下哪种方案最合适？

选项：

• A. 预加载所有新闻并设置为 display: none，点击按钮切换为 display: block
• B. 使用分页技术和静态页面，点击按钮导航到新页面
• C. 使用 JavaScript 和 Fetch API 监听按钮点击，异步请求下一批新闻并添加到当前列表
• D. 使用 <iframe> 加载新的新闻页面

答案： C ✅

解析：

性能优化相关

题目 1：高并发实时金融数据处理

题干： 金融监控系统需处理高并发实时数据流，保证数据实时性、渲染性能和代码可维护性，以下哪些方案正确？

选项：

• A. 使用 WebSocket 进行数据推送，结合 Redux 实现状态管理，并使用 memoization 技术优化渲染性能
• B. 使用 AJAX 定时轮询数据，结合 Vue 的响应式机制，确保每次数据更新都直接触发 UI 更新
• C. 使用 Service Worker 进行数据缓存，结合自定义事件进行数据更新，并在每次更新时重绘整个 UI
• D. 使用 GraphQL 订阅进行数据推送，结合高阶函数封装数据处理逻辑，同时利用虚拟 DOM 减少重绘次数

答案： A、D ✅

解析：

数据处理相关

题目 1：学生成绩统计

题干： 给定学生成绩数组，计算 classOne 为 true 的学生的语文 + 数学总分。

输入：

const studentList = [
  { id: 5, name: "Alex", chineseScore: 98, mathScore: 56, classOne: true },
  { id: 82, name: "Bob", chineseScore: 73, mathScore: 99, classOne: true },
  { id: 22, name: "Cindy", chineseScore: 20, mathScore: 59, classOne: false }
];

要求： 使用 JavaScript 内置方法实现。

答案：

// 筛选 + 累加
const totalScore = studentList
  .filter(student => student.classOne) // 筛选一班学生
  .reduce((sum, student) => sum + student.chineseScore + student.mathScore, 0); // 累加总分

console.log(totalScore); // 输出：326

解析：

• filter：过滤出 classOne: true 的学生
• reduce：遍历筛选结果，累加语文和数学成绩，初始值为 0

题目 2：购物车商品归类

题干： 给定购物车数组，将同名商品归类到同一数组中（以商品名称为键）。

输入：

const shoppingCart = [
  {name: 'Apple', price: 1.99, quantity: 3},
  {name: 'Apple', price: 1.99, quantity: 3},
  {name: 'Xiomi', price: 2.99, quantity: 2},
  {name: 'Samsung', price: 3.99, quantity: 1},
  {name: 'Tesla', price: 3.99, quantity: 1},
  {name: 'Tesla', price: 4.99, quantity: 4},
  {name: 'Nokia', price: 4.99, quantity: 4}
];

要求： 使用 reduce 实现归类。

答案：

const groupedCart = shoppingCart.reduce((result, item) => {
  // 若当前商品名称未在结果中，初始化空数组
  if (!result[item.name]) {
    result[item.name] = [];
  }
  // 将当前商品添加到对应数组
  result[item.name].push(item);
  return result;
}, {}); // 初始值为空对象

console.log(groupedCart);

输出：

{
  Apple: [ {name: 'Apple', price: 1.99, quantity: 3}, {name: 'Apple', price: 1.99, quantity: 3} ],
  Xiomi: [ {name: 'Xiomi', price: 2.99, quantity: 2} ],
  Samsung: [ {name: 'Samsung', price: 3.99, quantity: 1} ],
  Tesla: [ {name: 'Tesla', price: 3.99, quantity: 1}, {name: 'Tesla', price: 4.99, quantity: 4} ],
  Nokia: [ {name: 'Nokia', price: 4.99, quantity: 4} ]
}

解析： reduce 遍历数组，以商品名称为键构建对象，将同名商品收集到对应数组中，实现归类。

内存泄漏是指应用程序中的内存不再被使用但仍然被占用，导致内存消耗逐渐增加，最终可能导致应用程序性能下降或崩溃。内存泄漏通常是由于开发者编写的代码未正确释放不再需要的对象或数据而导致的。

内存泄漏的案例

1. 意外的全局变量

function someFunction() {
    // 这个变量会变成全局变量，并可能导致内存泄漏
    myobject = { /* ... */ };
}

问题：未使用 var、let 或 const 声明的变量会自动成为全局变量。

2. 闭包

闭包可能会无意中持有对不再需要的变量或对象的引用，从而阻止它们被垃圾回收。

function createClosure() {
    const data = [/* 大量数据 */];
    return function() {
        // 闭包仍然持有对 'data' 的引用，即使它不再需要
        console.log(data);
    };
}

const closureFunction = createClosure();
// 当 'closureFunction' 不再需要时，它仍然保留着 'data' 的引用，导致内存泄漏。

3. 事件监听器

忘记移除事件监听器可能会导致内存泄漏，因为与监听器相关联的对象将无法被垃圾回收。

function createListener() {
    const element = document.getElementById('myElement');

    element.addEventListener('click', () => {
        // 事件处理逻辑
    });
}

createListener();
// 即使 'myElement' 从 DOM 中移除，该元素及其事件监听器仍然在内存中。

4. 循环引用

对象之间的循环引用会阻止它们被垃圾回收。

function createCircularReferences() {
    const obj1 = {};
    const obj2 = {};

    obj1.ref = obj2;
    obj2.ref = obj1;
}

createCircularReferences();
// 由于循环引用，'obj1' 和 'obj2' 都将保留在内存中。

5. setTimeout / setInterval

使用 setTimeout 或 setInterval 时，如果没有正确清理，可能会导致内存泄漏，特别是当回调函数持有对大型对象的引用时。

function doSomethingRepeatedly() {
    const data = [/* 大量数据 */];

    setInterval(() => {
        // 闭包持有对 'data' 的引用，即使它不再需要
        console.log(data);
    }, 1000);
}

doSomethingRepeatedly();
// 'doSomethingRepeatedly' 不再使用时，定时器仍然在运行，导致内存泄漏。

如何避免内存泄漏

1. 使用严格模式 ('use strict') - 防止意外创建全局变量
2. 及时移除事件监听器
   • 使用 removeEventListener 或一次性监听器
3. 清理定时器
   • 在组件卸载时调用 clearInterval 或 clearTimeout
4. 避免循环引用
   • 使用 WeakMap 或 WeakSet 让垃圾回收器自动清理
5. 使用闭包时注意
   • 确保不再需要时释放闭包引用
6. 使用工具检测
   • Chrome DevTools Memory 面板、leak suspects 等

让函数在指定时间内，最多只能执行一次；如果频繁触发，也只会按固定频率执行。

/**
 * @param {Function} func - 需要节流的目标函数
 * @param {number} wait - 节流时间间隔（毫秒），默认300ms
 * @returns {Function} - 包装后的节流函数
 */
function throttle(func, wait = 300) {
  // 保存上一次执行函数的时间戳
  let lastExecuteTime = 0;

  // 返回包装后的节流函数
  return function (...args) {
    // 保存当前上下文（比如DOM事件中的this）
    const context = this;
    // 获取当前时间戳
    const now = Date.now();

    // 核心逻辑：只有当前时间 - 上一次执行时间 >= 节流间隔，才执行函数
    if (now - lastExecuteTime >= wait) {
      // 执行原函数，传递上下文和参数
      func.apply(context, args);
      // 更新上一次执行时间为当前时间
      lastExecuteTime = now;
    }
    // 未达到间隔：直接忽略，不做任何处理（无最后一次执行）
  };
}

import { useCallback, useRef } from 'react';

/**
 * React 节流 Hook
 * @param {Function} func - 需要节流的目标函数
 * @param {number} wait - 节流时间间隔（毫秒），默认300ms
 * @returns {[Function, Function]} - [包装后的节流函数, 重置节流的方法]
 */
function useThrottle(func, wait = 300) {
  // 用 useRef 保存上一次执行时间（跨渲染周期保存，避免重置）
  const lastExecuteTimeRef = useRef(0);
  // 用 useRef 保存最新的函数引用（解决闭包陷阱）
  const funcRef = useRef(func);

  // 每次渲染更新函数引用，保证拿到最新的func
  funcRef.current = func;

  // 用 useCallback 缓存节流函数，避免组件重渲染时重新创建
  const throttledFunc = useCallback((...args) => {
    // 保存当前上下文
    const context = this;
    // 获取当前时间戳
    const now = Date.now();

    // 核心节流逻辑：达到间隔才执行
    if (now - lastExecuteTimeRef.current >= wait) {
      // 执行最新的业务函数
      funcRef.current.apply(context, args);
      // 更新上一次执行时间
      lastExecuteTimeRef.current = now;
    }
  }, [wait]);

  // 重置节流状态（可选：比如需要手动重置执行时间）
  const resetThrottle = useCallback(() => {
    lastExecuteTimeRef.current = 0;
  }, []);

  // 返回节流函数和重置方法
  return [throttledFunc, resetThrottle];
}

export default useThrottle;

.

让一个函数在触发后，等待指定时间再执行；如果在等待期间函数再次被触发，则重新计时

标准实现

/**
 * 防抖函数
 * @param {Function} func - 需要防抖的目标函数
 * @param {number} wait - 等待时间（毫秒），默认300ms
 * @returns {Function} - 包装后的防抖函数
 */
function debounce(func, wait = 300) {
  // 保存定时器ID，用于清除计时
  let timeoutId = null;
  // 返回包装后的防抖函数
  return function (...args) {
    // 保存当前上下文（比如DOM事件中的this）
    const context = this;
    // 核心逻辑：每次触发时，先清除之前的定时器，重新计时
    if (timeoutId) clearTimeout(timeoutId);
    // 新建定时器，等待指定时间后执行目标函数
    timeoutId = setTimeout(() => {
      // 执行原函数，传递上下文和参数，避免this丢失、参数丢失
      func.apply(context, args);
      // 执行后清空定时器ID（非必需，但更规范）
      timeoutId = null;
    }, wait);
  };

react hook封装

import { useCallback, useRef } from 'react';

/**
 * React 防抖 Hook
 * @param {Function} func - 需要防抖的目标函数
 * @param {number} wait - 等待时间（毫秒），默认300ms
 * @returns {Function} - 包装后的防抖函数
 */
function useDebounce(func, wait = 300) {
  // 用 useRef 保存定时器ID（避免每次渲染重置）
  // 其次是我们在settimeout中用了这个变量，为了避免闭包陷阱，还是加上ref
  const timeoutIdRef = useRef(null);
  // 用 useRef 保存最新的函数引用（避免依赖变化导致防抖失效）
  // 其次是我们在settimeout和usecallback中用了这个变量，为了避免闭包陷阱，还是加上ref
  const funcRef = useRef(func);

  // 每次渲染更新函数引用，保证拿到最新的func
  funcRef.current = func;

  // 用 useCallback 缓存防抖函数，避免组件重渲染时重新创建
  const debouncedFunc = useCallback((...args) => {
    // 保存当前上下文（React 中通常是组件实例/事件对象）
    const context = this;

    // 清除之前的定时器，重新计时
    if (timeoutIdRef.current) {
      clearTimeout(timeoutIdRef.current);
    }

    // 新建定时器
    timeoutIdRef.current = setTimeout(() => {
      // 执行最新的函数引用
      funcRef.current.apply(context, args);
      // 执行后清空定时器ID
      timeoutIdRef.current = null;
    }, wait);
  }, [wait]);

  // 清理函数：组件卸载/防抖函数更新时，清除未执行的定时器
  const cancelDebounce = useCallback(() => {
    if (timeoutIdRef.current) {
      clearTimeout(timeoutIdRef.current);
      timeoutIdRef.current = null;
    }
  }, []);

  // 返回防抖函数和取消方法
  return [debouncedFunc, cancelDebounce];
}

export default useDebounce;

1. 自我介绍

2. 项目中遇到的难点和解决办法

3. react 中的 useEffect经典闭包场景

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // 点击按钮触发的函数
  const handleClick = () => {
    setCount(1); // 先把count设为1
    
    // 3秒后尝试修改count
    setTimeout(() => {
      console.log('定时器里的count值：', count); // 关键：输出的是多少？
      setCount(count + 1); // 期望count变成2，实际会变成多少？
    }, 3000);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleClick}>点击修改计数</button>
    </div>
  );
}

export default Counter;

问 counter点击之后有什么变化

4. 同步代码、微任务、宏任务的执行顺序

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

async1()

new Promise(resolve => {
  console.log('Promise1')
  resolve()
}).then(() => {
  console.log('Promise2')
})

console.log('script end')

回头看很简单，之前没做过这类题目，没做出来！

5. 项目中遇到性能优化问题没，是什么解决的，有什么常用方法？

6. react中的 usecallback、memo、useMemo

7. 为什么项目中使用 fetch sse流而不是 EventSource?

8. 在sse流的流式输出时候，你是如何解决输出抖动问题的？

9. ai-chat项目中有没有用到虚拟列表，它和普通列表相比，难点在哪？

10. 如何实现在流式中，视口自动下拉？

11. 如果在流式中，视口自动下拉，但是用户想上拉视口怎么解决？。此问题有完全总结答案https://lingwang.ink/posts/project/scrollup

12. 讲一下原型链和作用域链 （作用域链没说出来！）

13. 讲一下闭包

14. 手撕算法 lodash库中的flattenObject方法 （没解出来）

输入：
const obj = {
  a: {
    b: {
      c: {
        d: "value"
      },
      e: "e-value"
    },
    f: "f-value"
  },
  g: "g-value"
};

要求输出：
{
  "a.b.c.d": "value",
  "a.b.e": "e-value",
  "a.f": "f-value",
  "g": "g-value"
}


/**
 * 扁平化嵌套对象，将嵌套路径转换为点连接的键
 * @param {Object} target - 要扁平化的目标对象
 * @param {string} [prefix=''] - 递归时的路径前缀
 * @param {Object} [result={}] - 存储结果的对象
 * @returns {Object} 扁平化后的对象
 */
function flattenObject(target, prefix = '', result = {}) {
  // 遍历对象的每个键
  for (const key in target) {
    // 确保是对象自身的属性（排除原型链属性）
    if (target.hasOwnProperty(key)) {
      // 拼接当前路径：前缀 + 点（如果有前缀） + 当前键
      const currentKey = prefix ? `${prefix}.${key}` : key;
      const value = target[key];
      
      // 判断当前值是否是对象且不是 null（null 的 typeof 也是 object）
      if (typeof value === 'object' && value !== null) {
        // 递归处理嵌套对象
        flattenObject(value, currentKey, result);
      } else {
        // 非对象类型，直接存入结果
        result[currentKey] = value;
      }
    }
  }
  return result;
}

// 执行扁平化并打印结果
const flattenedObj = flattenObject(obj);
console.log(JSON.stringify(flattenedObj, null, 2));

15. 因为 算法没做出来，面试官换了个简单的防抖hook，因为太紧张，防抖写错了，严重拉低预期

总结

本次面试一共持续 1 小时 3 分钟，面试官给出建议：“项目经验比较丰富，但是基础薄弱”，预期挂。自我评估：最近忙于项目和ai-coding,代码写的变少了，导致算法题和简单的utils工具方法都无从下手，头重脚轻。

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://lingwang.ink/posts/project/scrollup

  // ========== 监听用户滚动 ==========
  /**
   * 监听用户滚动行为
   *
   * 当用户滚动到距离底部超过 100px 时，进入"脱敏模式"
   * 脱敏模式下，新消息不会自动滚动到底部
   * 这让用户可以安心查看历史消息而不被新消息顶走
   */
  useEffect(() => {
    const container = scrollContainerRef.current
    if (!container) return

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = container
      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
      setUserScrolledUp(distanceFromBottom > 100)
    }

    container.addEventListener('scroll', handleScroll, { passive: true })
    return () => container.removeEventListener('scroll', handleScroll)
  }, [])

看完了？说点什么呢