前端开发
前端如何计算“白屏时间”
🚀 前端如何计算“白屏时间”：从原理到实战全解析 在前端性能优化中，白屏时间（White Screen Time） 是一个非常关键的指标。它直接决定了用户打开页面后能多快看到第一个内容，是衡量网页“快不快”的核心体验因素之一。本文将从原理、计算方法、代码示例到实战优化，全面讲透“白屏时间”的计算与监控。 --- 🧠...
Knight
无效日期
分类: 前端开发
共 39 篇文章
前端开发
path.join()
前端打包里（比如 webpack、Next.js）尤其容易出坑。我们来通俗地讲一下为什么要用 或 。 --- 🎯 一句话总结： ❌ 是“字符串拼接” ✅ / 是“系统路径拼接”，能自动处理斜杠、平台差异、相对路径等问题。 --- 🧠 一、核心区别 | 对比项 | | / | | :----- | :--------...
Knight
无效日期
前端开发
pnpm 安装开发依赖（devDependencies）的正确姿势
一文搞懂：pnpm 安装开发依赖（devDependencies）的正确姿势 在前端项目中， 和 的区分是保障项目轻量化与运行稳定的关键，而 pnpm 作为高效的包管理器，在安装开发依赖时有着清晰的命令逻辑。本文将结合两者的核心差异，详细讲解 pnpm 安装开发依赖的具体命令、使用场景及注意事项，帮你避免依赖配置错误。...
Knight
无效日期
前端开发
<script> 的 defer 和 async 的区别
非常好的问题 👍 这是前端性能优化和脚本加载机制里非常关键的点。 我们来彻底讲清楚—— 的 和 的区别、执行顺序、应用场景👇 --- 🧩 一、基础：浏览器加载 时发生了什么？ 默认情况下，浏览器在加载 HTML 时遇到 会： 暂停 HTML 解析 开始下载脚本 下载完成后立即执行 执行完后再继续解析 HTML 所...
Knight
无效日期
前端开发
nextjs错误样式
tsx "use client" import { useEffect } from "react" import { CloseCircleIcon ,Button} from "@imoo/ui-client" import Link from "next/link" export default function...
Knight
无效日期
前端开发
React Diff（Reconciliation）深度解读 — 详尽博文（含原理、代码、陷阱、调优与实战
React Diff（Reconciliation）深度解读 — 详尽博文（含原理、代码、陷阱、调优与实战） 作者注：本文适合进阶前端工程师或框架爱好者。把理论 + 可运行示例 + 调试方法都写清楚，读完你应该能把常见的性能问题定位并修复。 --- 导读（一句话总结） React 的 Diff 不只是“比较两个虚拟 D...
Knight
无效日期
前端开发
React 19 useActionState
是 React 19 全新推出的一个 Hook，和 、 一样，属于 React 新的 异步 UI 与数据交互增强体系。 --- 🚀 React 19 新特性详解： —— 更优雅的异步表单与状态管理 一、 是什么？ 在传统 React 中，我们在处理表单提交或异步操作（比如登录、注册、评论提交）时，需要手动管理： 提交...
Knight
无效日期
前端开发
React 18 useTransition
是 React 18 引入、在 React 19 中继续强化的一个 并发特性 Hook。 它主要用于 在用户交互触发的更新中，区分紧急（urgent）更新与非紧急（transition）更新，从而优化渲染性能、避免界面卡顿。 下面我会从原理、语法、使用场景、实例代码、React 19 的增强几个方面，写成你可以直接放博...
Knight
无效日期