全部文章
共 1306 篇文章
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块，运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s，LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪？」——于是你把懒加载重新翻出来折腾了一轮。 解决方案：三条技术路线，你全踩了一遍 1\. 最偷懒：原生 一行代码就能跑，浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖，IE 全军覆没。 必须写死 ，否则 CLS 会抖成 PPT。 适用场景...
面试中被问到过的前端八股
1、React的事件和普通事件有什么不同 ✅ 1. 事件绑定方式不同 React 中使用的是 驼峰命名 ，并且直接传入函数引用： 原生 DOM 则是小写并用字符串或函数赋值： 或者在 JS 中绑定： ✅ 2. React 使用的是合成事件（SyntheticEvent） React 实现了一套自己的事件系统： SyntheticEvent 合成事件 。 它对原生事件进行了封装，兼容性更强。 所有事件都会被委托到最外层（ ），提升性能（事...
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中，你是否遇到过这样的困扰： 大数据处理时页面卡死 ：处理几万条数据时，页面直接卡成PPT，用户点击毫无反应 复杂计算阻塞UI ：图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 ：大文件操作时，其他功能完全无法使用 实时数据处理性能差 ：WebSocket接收大量数据时，页面渲染严重滞后 今天分享6个Web Worker的核心技巧，让你的应用告别卡顿，用户体验丝滑如德芙！ 💡 核心技巧...
手把手教你实现一个EventEmitter
你是不是也遇到过这种情况：代码里各种事件监听和触发，回调函数套了一层又一层，最后自己都理不清哪个事件先触发、哪个后触发了？ 别担心，今天我就带你从零开始实现一个自己的事件触发器（EventEmitter），让你彻底掌握事件驱动的精髓，代码清晰度直接提升200%！ 为什么要懂EventEmitter？ 先说说为什么我们要关心这个。Node.js的核心就是事件驱动，比如文件读写、网络请求，都是通过事件来处理的。不会EventEmitter，...
让你彻底明白什么是闭包
今天我们来聊一个听起来很高大上，但实际上你可能天天在用（只是不知道它名字）的概念—— 闭包 。 一、一个你肯定写过的闭包 先别管定义，来看这段代码，你是不是再熟悉不过了？ 恭喜你！这就是一个经典的闭包！是不是很简单？ 二、为什么会有闭包？—— 背包的故事 想象一下，JavaScript 中的函数就像一个小机器人，当它被创建时，会背着一个神奇的 背包 。 这个背包里装着什么呢？装着它 出生时 所在环境的所有变量！ 当我们调用 时，返回的那...
前端上传切片优化以及实现
前端上传切片优化以及实现 ，主要涉及到大文件分片上传（chunk upload）、并发控制、断点续传、秒传、重试机制等。 🔹 场景与痛点 大文件上传 （ 100MB）：直接上传会超时或失败。 网络不稳定 ：中断后需重传。 上传速度慢 ：需要并发分片上传。 服务端压力大 ：需要合理控制并发与分片大小。 🔹 基础实现流程 1. 文件切片 使用 方法将文件分割为固定大小的分片（比如 2MB/5MB）。 2. 计算文件唯一标识（hash）...
👨面试官：后端一次性给你一千万条数据，你该如何优化渲染
问题背景 在去年的一场面试中，面试官向我提了一个问题： 面试官：后端一次性给你一千万条数据，渲染到页面上发生卡顿，你该怎么优化？ 我：我会问候后端（bushi） 实际上我的回答是：如果没办法改变后端的情况下，我会避免给这种大数据量赋予响应式，然后手动 分页渲染 。 面试官：不对哈，用 来优化。 我：？？？ 这段时间突然想起这个问题，决定试一下实际遇到这种情况到底该怎么优化。 测试环境搭建 前端实现（Vue3） 后端实现（NestJS）...
一键 i18n 国际化库
作为一名 前端开发 ，给项目做多语言早已是家常便饭。 可每次面对成百上千条文案，“ + ”仍然是让人头秃的体力活。 🎯i18n auto extractor 用 包一层，剩下的交给机器人 安装即可跑， 开箱即用 、 、原生项目全部通吃 内置谷歌翻译，支持 语言 极小包体，运行时动态切换语言 使用 3 步走 构建后会自动生成： 🎯auto i18n translation plugins 连 都不用写，源码中文自动翻译 完全零侵入，...
📦 npm、yarn、pnpm、bun 是什么
🎯 什么是包管理器？ 在 JavaScript 和 Node.js 生态中，一个项目往往依赖很多第三方库，比如 Vue、React、Lodash 等。\ \ 包管理器（Package Manager）\ \ 的作用，就是： 安装/卸载这些依赖库； 管理依赖的版本； 构建依赖树； 提供运行脚本（如 npm run dev）等功能。 最早是 npm，后来有了性能更好的 yarn，又有了极致节省空间的 pnpm，最近还杀出了一个全能选手 —...