- 博客(564)
- 收藏
- 关注
RSS订阅原创 前端转义的真相：JavaScript \ vs HTML 实体 <；
前端开发中，转义并非统一语法，而是由运行上下文决定规则。JavaScript 使用反斜杠 \ 在字符串和正则中表达特殊字符或避免语法冲突，如 \"、\\、\n，发生在代码编译或执行阶段，浏览器不会直接感知。HTML 则通过字符实体 <、>、& 等控制浏览器解析行为，决定内容是否被渲染为真实 DOM 结构，常用于代码展示、标签文本化以及防止 XSS 注入。二者目标不同：JS 解决代码字面量冲突，HTML 解决解析与安全输出问题。理解其差异，才能在处理富文本、Markdown 渲染或用户输入
2025-12-30 17:00:27
720
原创 空值合并运算符 ?? ，|| 的替代方案
空值合并运算符，?? 让默认值兜底逻辑更精准、安全、不误覆盖业务有效值，是现代 JavaScript 代码中不可或缺的语法能力。在前端开发中，推荐优先使用 ?? 处理空值合并，使代码更可靠、更易维护。
2025-12-29 16:05:49
552
原创 一、GitHub 的 WIP 功能简介
WIP 是 GitHub 上一个非常实用的功能，可以帮助开发者在提交未完成代码时，避免误操作，同时方便团队协作。推荐在日常开发中使用 Draft PR 来正式管理 WIP 状态。
2025-12-26 22:04:05
302
原创 解决 highlight.js 不支持语言的方法
在前端项目中，`highlight.js` 常用于代码高亮，但默认不支持一些冷门或自定义语言。解决方法主要有三种：第一，语言替代，即用已有语言代替不支持的语言，简单但高亮不精准；第二，使用 `registerLanguage` 注册语言别名或自定义语法规则，可保证高亮准确且易维护；第三，按需加载语言，既减少打包体积，又通过 fallback 或 `highlightAuto` 处理未注册语言。需要注意的是，`hljs.highlight` 本身不会自动 fallback，只有 `highlightAuto`
2025-12-26 21:55:59
838
原创 淘宝 npm 镜像与 CDN 加速链路解析：不只是 Registry，更是分层静态加速架构
淘宝 npm 镜像（现迁移为 npmmirror）是国内最常用的 npm 公共包加速服务，其体系由 Registry 解析层与 CDN 静态分发层协同组成。npm 客户端只访问 Registry 获取包元信息，而真正的 .tgz 包下载地址由镜像站下发，通常指向 CDN 子域名（如 cdn.npmmirror.com），从而实现节点分发加速。npm 本身不会主动选择 CDN，始终遵循 Registry 返回的 tarball 地址。本文深入解析淘宝镜像的工作原理、为什么需要引入 CDN 分层、完整安装链路，
2025-12-26 21:35:10
564
1
原创 SDK 中如何“消化异步”：从 await 暴露到上下文驱动的设计转变
在 SDK 设计中，是否将异步逻辑通过 await 直接暴露给调用方，往往决定了 SDK 的易用性与可扩展性。本文围绕“实例化上下文 + 状态机 + 延迟提交”的设计思路，探讨一种将异步复杂度完全内聚在 SDK 内部的实现方式。通过上下文对象承载状态、用状态机描述生命周期、以延迟提交解决异步结果不确定的问题，SDK 可以对外提供同步、声明式的使用体验，同时在内部安全地处理异步依赖与时序问题。该模式特别适用于埋点 SDK、流程型 SDK、跨页面生命周期管理等场景，有助于降低业务接入成本，避免 async/aw
2025-12-22 21:59:17
194
原创 从代码段下载谈起：Blob 与 HTTP 的本质区别，以及 axios 与 fetch 行为差异解析
在前端开发中，代码段下载功能通常依赖 Blob 实现，但由此也容易引发对 blob URL 行为的误解。本文从一个实际的代码下载场景出发，系统梳理了 Blob、blob URL 与 HTTP 资源之间的本质区别，解释了为什么 axios 无法请求 blob 地址，而 fetch 却可以访问。文章进一步澄清了 Network 面板中 blob 请求的“假网络”现象，指出 blob 本质上是浏览器内存资源而非服务器资源。通过对 axios 与 fetch 定位差异的分析，帮助开发者在文件下载、预览与上传等场景中
2025-12-22 19:59:42
1031
原创 企业前端 npm 私有镜像最佳实践：为什么集中式管理比纯私有更可靠
企业前端项目中，npm 私有镜像已成为依赖管理的基础设施之一。本文从实际工程出发，系统梳理了私有镜像的作用、常见使用方式及隐藏风险，重点指出：在缺少 lock 文件的情况下，将纯私有镜像作为唯一 registry，极易因公共依赖缺失而导致安装失败，尤其当私有包依赖公共包时问题更加明显。相比之下，带 upstream 的集中式私有镜像（如 Nexus Group、Verdaccio Proxy）可以统一托管私有包并自动代理公共 npm 仓库，实现缓存加速、降低配置复杂度并提升整体稳定性。文章结合企业落地经验，
2025-12-22 16:18:56
945
原创 基于 Vue3 动态组件的弹框流程管理：命令模式事件
在中大型前端项目中，弹框往往不仅用于显示信息，还承担着多步骤流程，例如创建、编辑、确认等操作。传统通过多个 `el-dialog` 或 `v-if` 控制的方式容易导致状态分散、流程混乱、扩展成本高。本文基于 Vue3，结合动态组件、配置驱动和轻量命令模式，设计了一套工程化弹框流程管理方案：通过统一的 `el-dialog` 容器承载所有弹框，使用 `dialogConfig` 描述弹框界面，`dialogFlow` 配置弹框流程（next/back），并引入 `dialogContext` 管理组件数据。
2025-12-19 21:46:31
344
原创 前端性能优化，使用 Performance 面板优化长任务
在浏览器主线程中，耗时超过 50ms 的操作会被标记为长任务，这类任务会阻塞渲染与交互，引发卡顿、掉帧、响应延迟等问题。利用 Chrome DevTools 的 Performance 面板，可以通过黄色标记快速识别长任务，并在调用栈中分析具体耗时来源，包括脚本执行、样式计算、布局、绘制以及第三方脚本等。长任务的典型来源包括大量同步 JavaScript、频繁 DOM 更新、强制同步布局、框架渲染负担过重等。优化策略主要包括任务分片执行、将密集计算转移到 Web Worker、减少无效或重复的 DOM
2025-12-09 22:32:56
566
原创 css 的回溯机制、CSS 层级过深的选择器会影响浏览器的性能
下面是 **200 字以内的总结版**：---CSS 层级过深的选择器会增加浏览器样式计算的负担，因为浏览器在匹配选择器时采用从右到左的模式。以 `.a .b .c .d span` 为例，浏览器会先找到所有 span，再逐层回溯其父级是否满足条件。层级越深、DOM 越大，这种回溯链条越长，样式计算阶段越耗时，进而影响渲染性能。此外，深层级选择器可维护性差，结构稍有修改就可能失效。为了避免性能与维护问题，应尽量减少选择器层级，优先使用类选择器、BEM 命名方式，以及组件化框架中的作用域样式。必要
2025-12-08 22:40:27
763
原创 前端项目 npm 镜像使用的顺序，和优先级顺序
package.json 文件中的 /URL/本地格式路径Git URLHTTP(s) URL / 压缩包 URLfile: 本地路径linkdirect source 不受 lockfile 和 .npmrc 影响，这些来源强绑定，不走 registry，也不走镜像，没有 fallbacklock 文件中 resolved 的镜像地址若 lockfile 记录了 tarball URL，则强制使用仅适用于 registry 包（不是 direct source）
2025-12-05 20:35:03
736
原创 file 协议与 http 协议的区别：为什么本地 HTML 无法加载相对路径 JS，以及正确的解决方式
本文介绍浏览器在 file 协议与 http 协议下的加载机制差异，解释为何直接用 file:/// 打开的 HTML 页面常无法加载相对路径脚本，例如 ./test.js。文章分析造成问题的根本原因是浏览器针对本地文件的安全限制。随后给出可行的解决方案：使用 npx serve 启动本地静
2025-11-27 22:08:02
1069
1
原创 backdrop-filter 失效的根源：will-change、合成层隔离与渲染顺序的影响
本文深入分析 backdrop-filter 在实际开发中失效的常见原因，重点解释为什么 will-change 会影响滤镜渲染，以及不同属性如 opacity 与 transform 在浏览器合成层中的行为差异。文章将介绍合成层隔离对背景取样的破坏机制，并通过图层提升与隔离的对比，解释 backdrop-filter 失效的本质。最后提供可行的规避策略与最佳实践，帮助开发者稳定使用 backdrop-filter。
2025-11-19 21:40:46
800
原创 React 中 useRef 和 useState 的使用场景区别
需要触发组件重新渲染的数据。依赖于 UI 更新的状态，例如：表单输入值、开关状态、计数器等。不依赖于 UI 渲染的状态。需要在多次渲染间保存数据，但不想每次都触发渲染。操作 DOM 或保存定时器、上一次的值、外部对象等。掌握useState和useRef的使用场景区别，是写高效 React 组件的关键。合理选择 Hook，不仅能减少不必要的渲染，还能让代码逻辑更清晰、更易维护。
2025-11-17 22:05:32
482
原创 React 中 useEffect 事件监听和移除的方法
在 React 中，我们经常需要在组件中注册事件监听，例如window的resizescroll，或者自定义的事件。为了避免内存泄漏和重复注册，React 推荐使用useEffect来管理事件监听器的注册和移除。本文将详细讲解这种方法。
2025-11-17 21:24:06
480
原创 深入理解html 加载、解析、渲染和 DOMContentLoaded、onload事件
本文深入解析了浏览器处理 HTML 的三个核心阶段——加载（Loading）、解析（Parsing）和渲染（Rendering），并详细对比了 `DOMContentLoaded` 与 `onload` 两个事件的触发时机及适用场景。文章指出，全局 Loading 移除应放在 `onload` 中以保证页面完整可见，而全局事件绑定可在 `DOMContentLoaded` 中执行以提升交互响应。通过理解加载、解析与渲染的顺序，前端开发者可更精准地优化性能与用户体验。
2025-11-13 11:45:47
740
原创 pagehide/beforeunload / unload / onUnmounted 执行顺序与navigator.sendBeacon使用陷阱详解
文章从前端页面退出场景切入，梳理 `beforeunload`、`unload`、Vue `onUnmounted` 触发时机与执行顺序，比较 SPA 与刷新/关闭页面的差异，分析 `window.onbeforeunload` 与 `addEventListener` 的区别与注意事项，讲解事件移除策略，并重点介绍现代浏览器推荐的 `pagehide` 使用方式，最后给出页面退出埋点最佳实践，总结各事件优缺点及使用场景。
2025-11-12 22:28:09
1060
原创 Iconfont 的本质原理和使用场景
Iconfont 的核心原理：将图标矢量化，打包成字体文件，每个图标对应一个 PUA 编码，通过 CSS 和字体渲染优点：文件小、易管理、支持 CSS 控制、缩放不失真缺点：调试不直观、动态修改和动画支持有限适用场景：小型项目、统一图标库、跨浏览器兼容要求高。
2025-11-04 22:01:38
440
原创 CSS 雪碧图和 SVG 雪碧图的原理和区别
在现代 Web 项目中，图标和小图像是不可或缺的 UI 元素。为了优化性能、减少 HTTP 请求，开发者曾经广泛使用 CSS 雪碧图（Sprite）。随着 SVG 技术的发展，SVG 雪碧图（Symbol Sprite） 逐渐成为主流方案。本文将从原理、渲染方式、优缺点以及适用场景几个角度，分析 CSS 雪碧图和 SVG 雪碧图的区别，帮助你在项目中做出合理选择。CSS 雪碧图将多个小图标合并到一张大图片中，通过 或 定位显示对应图标。目的：减少 HTTP 请求数量，提高加载性能示例：2.2 优点
2025-11-04 21:57:22
742
原创 避免 JS 报错阻塞 Vue 组件渲染：以 window.jsbridge 和 el-tooltip 为例
JS 报错会阻塞同作用域内的后续逻辑，包括 Vue 组件的渲染与事件绑定。防止报错的方法：使用可选链或判断对象存在；使用try-catch捕获异常；必要时延迟调用，避免同步阻塞。通过这些方法，可以保证el-tooltip等组件即使在第三方对象缺失或异常时，也能正常渲染和显示。
2025-10-31 22:42:42
336
原创 好用的 display: flow-root
不会改变内部子元素的布局方式，它依然是普通文档流的块级元素，只是触发了 BFC。内部的垂直外边距不会与外部元素重叠（阻止 margin collapsing）它不会改变默认块级布局、不会影响子元素的排列，也不会引入额外副作用。对布局本身没有副作用（不像 flex 会改变子元素排列方式），也会触发 BFC（块级格式化上下文），但子元素变成。浮动元素会被包含（父元素自动包裹浮动子元素）相当于给元素加了“独立的布局容器”，但。内部子元素依然在普通文档流中排列。内部布局与外部布局隔离。在现代开发中，是替代。
2025-10-31 21:38:56
374
原创 深入理解外边距重叠与 BFC —— 为什么粉色背景多出一块？
外边距重叠指的是：在普通文档流中，垂直方向上相邻的块级盒子的margin不叠加，而是取两者的最大值。它们之间的间距不是 80px，而是。BFC 是一个独立的布局环境。在这个环境中，内部元素的布局不会影响到外部元素。触发条件示例overflow不为visible推荐现代写法float不为noneposition为absolute或fixed只要.inner-box触发了 BFC，它内部子元素的外边距就不会与外部重叠。解决办法4：让子元素变为行内级元素.btn {
2025-10-31 21:36:15
832
原创 Vue 项目中全局样式的正确写法：不要把字体和主题写在 #app 上
Vue 项目中的全局样式不应依赖#app，而应当绑定在html或body上。这是因为部分组件（尤其是通过teleport实现的弹窗、浮层等）并不会在#app节点内渲染。良好的样式结构分层能让整个项目在视觉和逻辑上更加统一，避免组件层级带来的样式继承问题。
2025-10-31 21:00:59
423
原创 遇见诡异的问题/闪动/闪烁/抖动展示不全可以试试 transform: translateZ(0)； will-change: transform；
这是一种前端开发里常用的“小技巧”或“Hack”，用来解决一些 浏览器渲染异常或性能问题。我们可以更系统地解释一下这两行的作用和适用场景👇这一句会触发 GPU 加速渲染（硬件加速）。浏览器在绘制元素时，通常使用 CPU 合成图层（compositing layer），但加上 后，会让该元素：创建一个新的复合图层（compositing layer）；使用 GPU 来渲染这一层；有时能避免页面闪烁、抖动、卡顿、层级错乱等问题。✅ 常见用途：修复 Safari / Chrome 中元素闪烁、错位；解决
2025-10-31 20:50:06
291
原创 浏览器使用 ＜embed＞ 标签预览 PDF 的原理
浏览器通过<embed>标签识别 PDF 文件类型。内置 PDF 渲染器解析 PDF 内容。渲染器将 PDF 页面呈现在<embed>容器中，实现预览。用户可直接交互（滚动、缩放），而 DevTools 中<embed>只是容器。
2025-10-31 20:36:53
584
原创 在浏览器的开发者工具中使用 ctrl + p 搜索sources 页签中的某个文件
这个搜索功能非常方便，尤其当项目中有大量文件时，可以快速定位你需要查看的文件。在搜索框中，输入文件名或文件的部分路径，开发者工具会展示符合条件的文件列表。在搜索结果中，点击你需要的文件，即可查看文件内容。在浏览器的开发者工具中，通常可以通过以下步骤在。或右键点击页面并选择“检查”打开开发者工具。在开发者工具中，点击上方的。（Mac）来打开搜索框。（Windows）或。
2025-10-31 10:40:05
472
原创 深入理解 Vite 开发服务器的 Local 与 Network 地址
为什么不配置 host 就没有 Network 地址？因为默认 dev server 只监听 localhost，不绑定局域网 IP。解决方法在中配置，即可同时显示 Local 和 Network 地址，并支持局域网访问。
2025-10-29 22:08:16
508
原创 SPA 路由与服务器 fallback 策略详解
在静态资源服务器中，fallback（回退）策略指的是：当请求的文件不存在时，服务器不返回 404，而是「回退」去返回指定文件（通常是index.html这个策略最早是为了解决SPA（单页应用）的前端路由问题设计的。主题正确做法错误做法SPA 路由刷新开启 fallback（index.html）不开启静态资源（JS/CSS）返回 404fallback 到 index.html调试模式index.html 缓存no-cache强缓存错误捕获捕获阶段监听 error。
2025-10-28 17:19:14
1438
原创 从 serve -s 到 fallback：一次前端资源加载异常的排查记录
问题点关键原因解决或注意点动态组件 CSS 无法加载fallback 返回了 index.html使用正确的 404 配置serve -s 与 serve 区别-s 启用 SPA fallback用于路由，不用于资源验证index.html 被缓存浏览器缓存旧版本入口设置CSS 错误未捕获需要捕获阶段监听Promise 错误未捕获已 catch 的不会触发仅监听未处理的错误不同域名加载差异CDN 策略或预加载差异检查缓存、预取策略。
2025-10-28 16:50:57
1252
原创 webview 中 cursor:pointer无效是由于-webkit-app-region导致的
问题原因解决办法无效被覆盖改成no-drag点击事件没反应被 drag 区吞掉同上hover 样式失效drag 区不响应交互事件同上会让区域变成“窗口拖拽层”，不再响应任何鼠标交互；想恢复交互，就加。
2025-10-21 18:14:00
344
原创 前端错误监控实践：Sentry 在 Vite + Vue 项目中的配置与原理详解
/ 获取各个环境的配置return {plugins: [debug: true, // 开启打印 sentry 上传日志，调试用authToken: env.VITE_SENTRY_AUTH_TOKEN, //必须release: {name: 'my_release' // 自定义版本号 release},filesToDeleteAfterUpload: './dist/**/*.map' //打包上传map后，删除所有map文件})],build: {
2025-10-20 20:57:20
1168
原创 使用Flex布局实现多行多列，每个列宽度相同
每个元素宽度是，固定宽度不管最后一行有几个元素，它的宽度不会自动撑满剩余空间左侧空白不会影响元素自身宽度这种方式可以保持所有元素宽度一致，布局整齐。Flex布局多行多列核心：父容器+ 子元素固定宽度flex-basis。不整除情况：最后一行元素宽度依然固定，布局整齐，不需要自动伸长。优点：简单、无需额外计算，兼容多行多列布局需求。
2025-10-17 19:00:09
335
原创 性能优化之前端与服务端中的 Gzip 压缩全解析
场景是否需要前端打包.gz是否需要服务端配置是否会重复压缩说明前端生成.gz+ OSS 映射建议不需要否CDN 直接返回.gz文件无.gz文件 + OSS 自动压缩否需要否动态压缩返回离线项目否否否不推荐使用 gzip减小传输体积、提升加载性能。实际生产中，只需确保：浏览器请求中有；响应头中有；即表示压缩已经生效。
2025-10-16 19:58:54
1394
原创 HTTP 413 状态码详解与前端处理，请求体过大
413 表示请求体过大，通常用于上传或大数据请求状态码由服务器或框架返回，浏览器不会自动报错自己写服务端可以手动修改状态码，但要注意框架或代理限制上传文件默认没有上限，实际上限取决于服务器配置、内存和网络状况前端处理限制大小分片上传压缩处理捕获 413 并给出友好提示合理结合前端与后端的控制，可以有效避免 413 错误，同时提升用户体验。
2025-10-15 21:45:41
1020
原创 前端开发者必备的高效习惯：从初级到中级
从初级到中级前端开发者，核心目标是提升效率和代码质量。初级阶段重在规范和理解，保证代码可用；中级阶段重在复用、性能、团队协作和可维护性。结合实际开发操作细化的习惯，如文件头部功能描述、合并前检查改动、变量命名、自测、修改 bug 注释和工作留痕，能够让你的开发流程更加高效稳健。养成良好的开发习惯，不仅可以加快开发速度，还能让代码更易维护，为未来成长打下坚实基础。
2025-10-15 21:31:12
703
原创 一次被“动画关闭”启发的思考：Animate.css 与 prefers-reduced-motion 的无障碍设计
* 用更轻柔的淡入代替复杂动画 */.fade-in {console.log('用户希望减少动画效果');// 可以在这里调整动画逻辑项目含义媒体查询功能检测用户是否希望减少动画Animate.css 行为自动禁用动画效果建议做法尊重用户设置，可提供轻量替代无障碍意义减少眩晕、恶心等身体不适，提高使用体验前端开发者常常追求炫酷动效、丝滑交互，但真正成熟的开发者，会考虑到——“不是每个人都适合看动画。当你的代码既能打动人，又能照顾人，这就是设计的最高境界。
2025-10-15 21:08:42
767
原创 前端开发中 SCSS 变量与 CSS 变量的区别与实践选择，—— 两种变量别混为一谈
SCSS 变量是编译期的计算逻辑，不需要、也不能放在:root中。CSS 变量是运行期的样式变量，必须定义在:root或具体元素内。二者一个属于“开发阶段”，一个属于“浏览器阶段”，搞清楚它们的“时空位置”，就不会再混淆。
2025-10-14 21:59:23
581
原创 性能优化-Vue3 + Vite：图片上传/优化到 OSS 并统一使用vite 的 .env 全局配置，js 和 css 共用变量
全局 OSS 地址管理：通过.env文件统一管理多环境 OSS 地址。JS/TS 访问方便：通过配置文件或获取路径。SCSS 同步变量：通过注入，方便样式中直接引用。环境切换无痛：开发/生产环境自动切换，无需手动修改路径。
2025-10-14 19:17:54
814
原创 前端图片加载失败、 img 出现裂图的原因全解析
裂图”（broken image）是指浏览器尝试加载<img>标签的图片资源失败时的表现形式。常见表现：图片区域显示为灰底、叉号、占位符；控制台出现或警告；Network 面板中图片请求状态码为 404 / 403 / blocked。混合内容机制是现代浏览器为保证 HTTPS 安全性而做出的妥协与平衡。对于前端开发者而言，理解它的升级与阻止逻辑，是解决“裂图”的关键。类别原因浏览器行为解决方案资源不存在404裂图修正路径防盗链403裂图调整 Referer 或代理。
2025-10-13 21:06:14
2421
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人