webpack3.x ~ 4.x 优化笔记
一、基本配置1、创建一个公共的配置文件 webpack.base.jsconst path = require('path') const resolve = dir =
阅读更多
requestAnimationFrame 执行时机
📌 1. requestAnimationFrame 执行时机：✅ 执行在“渲染前”准确地说：它是在浏览器准备执行下一次渲染（repaint）之前执行的，也就是在 “渲染前的最后一个时刻”。
🔄 一帧的流程大概是：
上一帧结束 →
执行
2025-01-11
Eventloop，requestIdlecallback 和 requestAnimationFrame的理解
🔁 一、Event Loop（事件循环）🌟 概念核心：JS 是单线程的，但为了不阻塞主线程，它采用了 异步非阻塞的执行模型，即：Event Loop。
👇 工作流程简要版：
Call Stack（调用栈）：同步代码进来就执行，执行完出
2025-01-07
使用pnpm 的 monorepo架构多包管理
可以使用 pnpm 的 monorepo 架构来共享公共组件、方法和第三方依赖，且效果非常好！相比传统的 npm 和 yarn，pnpm 在 monorepo 场景下提供了更好的包管理性能和依赖去重，特别适合微前端架构。
一、方案概述pnp
2024-12-20
RBAC + 动态权限 + 用户分配权限
🧩 RBAC（基于角色）在这种场景下的问题：RBAC 模型结构简单（User → Role → Permission），但缺点是：
不支持用户直接拥有权限；
不好表达“上下级授权”、“项目内的权限委托”；
权限变化需要变更角色绑定，流程
2024-11-11
前端导出10万条数据（Web Worker）
一、场景导出 excel，原本是让后端处理好，前端调接口，然后导出的，就很快。但出于种种原因，现在要完全靠前端处理，想都不用想，前端处理绝对卡爆！但非得前端处理（说我是大佬，肯定有办法 😛）。
也就是，现在的需求是：前端在无后端协助下，导
2024-10-16
监控页面卡顿，判断用户的页面是否卡主
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewpo
2024-09-18
内存泄漏排查和分析技巧详解
分配给前端页面或应用程序的内存无法被 垃圾回收器 回收。这会导致内存使用量不断增加，最后可能导致应用程序崩溃或者变得超级缓慢
一、原因
js 对未声明变量的处理方式是在全局对象上创建该变量的引用使用 this 创建的变量（全局作用域下的 t
2024-08-10
图片批量上传
一、使用场景
1. 电商平台
商家批量上传商品图片，如不同角度的商品展示图、规格图等。
在编辑商品时上传多张图片方便商品展示，提升用户体验。
2. 社交媒体和内容平台
用户上传多张照片、视频或文件分享个人动态或相册。
在图片分享和
2024-07-30
如何防止录屏截图等恶意下载行为
比如视频网站：优酷，爱奇艺 ，课程网站播放课程视频的时候，用屏幕录制软件录制视频区域会显示一片漆黑 (如下图)
传统的方式： 针对视频和dom添加水印
更高级的玩法！
https://developer.mozilla.org/z
2024-07-09
包管理工具的发展以及 pnpm 依赖治理的最佳实践
目前在前端领域最流行的包管理工具包含了 npm、yarn、pnpm，其中 pnpm 的机制对 yarn 和 npm 堪称降维打击，它通过软硬链接依赖的方式实现了快速安装、去除幽灵依赖，当下各种类库、组件库的最佳实践方案也基本都是 pnpm
2024-06-21
如何限制一个账号只能在一处登录
要限制一个账号只能在一处登录，常见的解决方案是通过 令牌（Token）管理 和 会话管理（Session Management） 来实现。以下是一些步骤和方法：
1. 基于 Token 的单点登录 (SSO) 管理通过 Token（如
2024-06-01
前端如何实现自动检测更新
背景
用户在访问单页面网站时，如果生产环境已经发布了新的版本（有功能上的变化），由于单页面中路由特性或浏览器缓存的原因，并不会重新加载前端资源，此时用户浏览器并非加载是最新的代码，从而可能遇到一些bug。部署之后，如何提醒用户版本更新，并引
2024-05-12