首页 文章 精选 留言 我的

文章列表

共 219880 篇
从一次页面卡顿排查说起:理解浏览器的主线程与长任务

从一次页面卡顿排查说起:理解浏览器的主线程与长任务

上周同事反馈一个后台管理页面在点击「导出报表」后,整个界面会冻结两三秒,按钮点不动,下拉框也打不开。这个页面本身并不复杂,只是从接口拉几千条数据然后渲染到表格里,但卡顿程度完全不像几千行 DOM 该有的表现。打开 Performance 面板录制后发现,主线程上出现了一个接近 2 秒的 Long Task,期间没有任何渲染机会,用户的任何交互都被阻塞。这类问...

React 闭包陷阱:为什么你的定时器里拿不到最新的 state?

React 闭包陷阱:为什么你的定时器里拿不到最新的 state?

在 React 函数组件里,如果你在 useEffect 中启动了一个 setInterval,并且在回调里读取某个 state,十有八九会发现回调里拿到的永远是初始值。这不是 bug,而是 JavaScript 闭包和 React 渲染机制共同作用的结果。函数组件每次渲染都会创建全新的作用域,每个作用域里的 state 和 props 都是那一次渲染时的快...

用 IntersectionObserver 替代滚动事件:解决页面卡顿与图片懒加载的实战方案

用 IntersectionObserver 替代滚动事件:解决页面卡顿与图片懒加载的实战方案

页面滚动时监听 scroll 事件做懒加载、动画触发或吸顶效果,是很多项目里的常规做法。但滚动事件触发频率极高,如果在回调里直接读取 getBoundingClientRect() 或修改 DOM,很容易造成掉帧,尤其在低端安卓机上滑动会明显发涩。早期常见优化是加节流,但节流时间设长了效果滞后,设短了依旧频繁计算。IntersectionObserver 提...

JavaScript 中 Array.prototype.sort 的稳定性与比较函数陷阱

JavaScript 中 Array.prototype.sort 的稳定性与比较函数陷阱

最近在重构一个数据表格组件时,遇到一个看似简单却折腾了半天的 bug:明明按状态和时间排序,结果分页后部分行顺序乱跳。排查后发现根源是 Array.prototype.sort 的默认行为与比较函数返回值处理。在 V8 引擎中,数组长度小于等于 10 时使用插入排序,大于 10 时使用快速排序,而快速排序在旧版 V8 中是不稳定的。虽然 ES2019 已经要...

用 IntersectionObserver 替代滚动监听:更准、更省、更简单

用 IntersectionObserver 替代滚动监听:更准、更省、更简单

页面里做懒加载、无限滚动、元素曝光埋点、吸顶导航切换时,很多项目第一反应还是给 window 挂一个 scroll 事件监听,在回调里用 getBoundingClientRect() 或者 offsetTop 判断元素是否进入视口。这个做法能跑,但代价不小:滚动事件触发频率极高,哪怕加了节流,每次回调仍然可能触发同步布局计算,导致样式重算和绘制排队;如果判...

JavaScript 中 AbortController 的中断请求与事件监听清理实战

JavaScript 中 AbortController 的中断请求与事件监听清理实战

最近在排查一个后台管理系统里偶发的内存泄漏问题时,发现几个页面在快速切换菜单后,仍然有未完成的 fetch 请求在持续占用资源,甚至触发了 setState 警告。这类场景其实很常见:用户点击某个按钮发起数据请求,还没等响应回来就跳走了,或者连续触发了多个相同请求,旧请求返回后覆盖了新数据。以前我们习惯用 axios 的 CancelToken 或者自己维护...

热铆参数的采集与工艺追溯怎么落地

热铆参数的采集与工艺追溯怎么落地

在 CCS 集成母排的自动化产线上,热铆不是"压一下"就完事的工序。要把良率稳住,热铆过程的参数必须能被采集、被追溯——否则同一批产品换个班次,焊点一致性就无从谈起。这篇从工程视角聊清楚,参数该采什么、怎么追。 热铆参数到底该采哪几个?核心是"时间—温度—压力"三件套。单点脉冲热铆在典型配置下约 10 秒,这个时间轴是窗口的基准;温度由脉冲曲线给到贴合所需;...

Agent学习笔记之智能体如何点咖啡

Agent学习笔记之智能体如何点咖啡

“帮我点一杯冰美式。”对很多人来说,这只是一句随口的话。但对越来越常见的 AI 智能体而言,从这句话到咖啡真正被下单,背后其实走完了一整套“想—做—再想”的循环。今天这篇不讲玄乎的概念,只拆三件事:智能体到底是什么、它怎么一步步把事办成、以及为什么“让它会想”不难,难的是一整套工程。

Micro-One-API v0.34.x 发布:RBAC 权限体系落地与 IAM 生产交接

Micro-One-API v0.34.x 发布:RBAC 权限体系落地与 IAM 生产交接

如果说 v0.30.x ~ v0.33.x 的主题是「生产级可靠性收口」,那么 v0.34.x 解决的是更根本的问题:谁能在这个系统里做什么。v0.34.0 交付了完整的 RBAC 授权模型、角色与分配管理、服务专属身份和资源执行边界,并完成了从 legacy 数字角色到 IAM 的离线迁移与生产停写交接;随后的 v0.34.1 ~ v0.34.4 五轮 P...

AI 编程工具、方法论与工作流

AI 编程工具、方法论与工作流

文章封面 简介:用七层地图给工具定位,用 SDD、Harness、Loop Engine 管住想、做和循环,再把它们组织成自己的端到端工作流 工具七层架构 简介:工具多不可怕,没有地图才可怕,任何工具都能在七层里找到位置 AI 编程工具七层架构 下三层:每天接触,噪音最大 模型层:AI 编程的原料,Claude 代码口碑最好 「用 Claude」说的是模型,...

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册