- 博客(551)
- 收藏
- 关注
RSS订阅原创 backdrop-filter 失效的根源：will-change、合成层隔离与渲染顺序的影响
本文深入分析 backdrop-filter 在实际开发中失效的常见原因，重点解释为什么 will-change 会影响滤镜渲染，以及不同属性如 opacity 与 transform 在浏览器合成层中的行为差异。文章将介绍合成层隔离对背景取样的破坏机制，并通过图层提升与隔离的对比，解释 backdrop-filter 失效的本质。最后提供可行的规避策略与最佳实践，帮助开发者稳定使用 backdrop-filter。
2025-11-19 21:40:46
704
原创 React 中 useRef 和 useState 的使用场景区别
需要触发组件重新渲染的数据。依赖于 UI 更新的状态，例如：表单输入值、开关状态、计数器等。不依赖于 UI 渲染的状态。需要在多次渲染间保存数据，但不想每次都触发渲染。操作 DOM 或保存定时器、上一次的值、外部对象等。掌握useState和useRef的使用场景区别，是写高效 React 组件的关键。合理选择 Hook，不仅能减少不必要的渲染，还能让代码逻辑更清晰、更易维护。
2025-11-17 22:05:32
443
原创 React 中 useEffect 事件监听和移除的方法
在 React 中，我们经常需要在组件中注册事件监听，例如window的resizescroll，或者自定义的事件。为了避免内存泄漏和重复注册，React 推荐使用useEffect来管理事件监听器的注册和移除。本文将详细讲解这种方法。
2025-11-17 21:24:06
419
原创 深入理解html 加载、解析、渲染和 DOMContentLoaded、onload事件
本文深入解析了浏览器处理 HTML 的三个核心阶段——加载（Loading）、解析（Parsing）和渲染（Rendering），并详细对比了 `DOMContentLoaded` 与 `onload` 两个事件的触发时机及适用场景。文章指出，全局 Loading 移除应放在 `onload` 中以保证页面完整可见，而全局事件绑定可在 `DOMContentLoaded` 中执行以提升交互响应。通过理解加载、解析与渲染的顺序，前端开发者可更精准地优化性能与用户体验。
2025-11-13 11:45:47
682
原创 pagehide/beforeunload / unload / onUnmounted 执行顺序与navigator.sendBeacon使用陷阱详解
文章从前端页面退出场景切入，梳理 `beforeunload`、`unload`、Vue `onUnmounted` 触发时机与执行顺序，比较 SPA 与刷新/关闭页面的差异，分析 `window.onbeforeunload` 与 `addEventListener` 的区别与注意事项，讲解事件移除策略，并重点介绍现代浏览器推荐的 `pagehide` 使用方式，最后给出页面退出埋点最佳实践，总结各事件优缺点及使用场景。
2025-11-12 22:28:09
1000
原创 Iconfont 的本质原理和使用场景
Iconfont 的核心原理：将图标矢量化，打包成字体文件，每个图标对应一个 PUA 编码，通过 CSS 和字体渲染优点：文件小、易管理、支持 CSS 控制、缩放不失真缺点：调试不直观、动态修改和动画支持有限适用场景：小型项目、统一图标库、跨浏览器兼容要求高。
2025-11-04 22:01:38
395
原创 CSS 雪碧图和 SVG 雪碧图的原理和区别
在现代 Web 项目中，图标和小图像是不可或缺的 UI 元素。为了优化性能、减少 HTTP 请求，开发者曾经广泛使用 CSS 雪碧图（Sprite）。随着 SVG 技术的发展，SVG 雪碧图（Symbol Sprite） 逐渐成为主流方案。本文将从原理、渲染方式、优缺点以及适用场景几个角度，分析 CSS 雪碧图和 SVG 雪碧图的区别，帮助你在项目中做出合理选择。CSS 雪碧图将多个小图标合并到一张大图片中，通过 或 定位显示对应图标。目的：减少 HTTP 请求数量，提高加载性能示例：2.2 优点
2025-11-04 21:57:22
693
原创 避免 JS 报错阻塞 Vue 组件渲染：以 window.jsbridge 和 el-tooltip 为例
JS 报错会阻塞同作用域内的后续逻辑，包括 Vue 组件的渲染与事件绑定。防止报错的方法：使用可选链或判断对象存在；使用try-catch捕获异常；必要时延迟调用，避免同步阻塞。通过这些方法，可以保证el-tooltip等组件即使在第三方对象缺失或异常时，也能正常渲染和显示。
2025-10-31 22:42:42
312
原创 好用的 display: flow-root
不会改变内部子元素的布局方式，它依然是普通文档流的块级元素，只是触发了 BFC。内部的垂直外边距不会与外部元素重叠（阻止 margin collapsing）它不会改变默认块级布局、不会影响子元素的排列，也不会引入额外副作用。对布局本身没有副作用（不像 flex 会改变子元素排列方式），也会触发 BFC（块级格式化上下文），但子元素变成。浮动元素会被包含（父元素自动包裹浮动子元素）相当于给元素加了“独立的布局容器”，但。内部子元素依然在普通文档流中排列。内部布局与外部布局隔离。在现代开发中，是替代。
2025-10-31 21:38:56
348
原创 深入理解外边距重叠与 BFC —— 为什么粉色背景多出一块？
外边距重叠指的是：在普通文档流中，垂直方向上相邻的块级盒子的margin不叠加，而是取两者的最大值。它们之间的间距不是 80px，而是。BFC 是一个独立的布局环境。在这个环境中，内部元素的布局不会影响到外部元素。触发条件示例overflow不为visible推荐现代写法float不为noneposition为absolute或fixed只要.inner-box触发了 BFC，它内部子元素的外边距就不会与外部重叠。解决办法4：让子元素变为行内级元素.btn {
2025-10-31 21:36:15
814
原创 Vue 项目中全局样式的正确写法：不要把字体和主题写在 #app 上
Vue 项目中的全局样式不应依赖#app，而应当绑定在html或body上。这是因为部分组件（尤其是通过teleport实现的弹窗、浮层等）并不会在#app节点内渲染。良好的样式结构分层能让整个项目在视觉和逻辑上更加统一，避免组件层级带来的样式继承问题。
2025-10-31 21:00:59
405
原创 遇见诡异的问题/闪动/闪烁/抖动展示不全可以试试 transform: translateZ(0)； will-change: transform；
这是一种前端开发里常用的“小技巧”或“Hack”，用来解决一些 浏览器渲染异常或性能问题。我们可以更系统地解释一下这两行的作用和适用场景👇这一句会触发 GPU 加速渲染（硬件加速）。浏览器在绘制元素时，通常使用 CPU 合成图层（compositing layer），但加上 后，会让该元素：创建一个新的复合图层（compositing layer）；使用 GPU 来渲染这一层；有时能避免页面闪烁、抖动、卡顿、层级错乱等问题。✅ 常见用途：修复 Safari / Chrome 中元素闪烁、错位；解决
2025-10-31 20:50:06
253
原创 浏览器使用 ＜embed＞ 标签预览 PDF 的原理
浏览器通过<embed>标签识别 PDF 文件类型。内置 PDF 渲染器解析 PDF 内容。渲染器将 PDF 页面呈现在<embed>容器中，实现预览。用户可直接交互（滚动、缩放），而 DevTools 中<embed>只是容器。
2025-10-31 20:36:53
496
原创 在浏览器的开发者工具中使用 ctrl + p 搜索sources 页签中的某个文件
这个搜索功能非常方便，尤其当项目中有大量文件时，可以快速定位你需要查看的文件。在搜索框中，输入文件名或文件的部分路径，开发者工具会展示符合条件的文件列表。在搜索结果中，点击你需要的文件，即可查看文件内容。在浏览器的开发者工具中，通常可以通过以下步骤在。或右键点击页面并选择“检查”打开开发者工具。在开发者工具中，点击上方的。（Mac）来打开搜索框。（Windows）或。
2025-10-31 10:40:05
430
原创 深入理解 Vite 开发服务器的 Local 与 Network 地址
为什么不配置 host 就没有 Network 地址？因为默认 dev server 只监听 localhost，不绑定局域网 IP。解决方法在中配置，即可同时显示 Local 和 Network 地址，并支持局域网访问。
2025-10-29 22:08:16
442
原创 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
1349
原创 从 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
1237
原创 webview 中 cursor:pointer无效是由于-webkit-app-region导致的
问题原因解决办法无效被覆盖改成no-drag点击事件没反应被 drag 区吞掉同上hover 样式失效drag 区不响应交互事件同上会让区域变成“窗口拖拽层”，不再响应任何鼠标交互；想恢复交互，就加。
2025-10-21 18:14:00
306
原创 前端错误监控实践：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
1012
原创 使用Flex布局实现多行多列，每个列宽度相同
每个元素宽度是，固定宽度不管最后一行有几个元素，它的宽度不会自动撑满剩余空间左侧空白不会影响元素自身宽度这种方式可以保持所有元素宽度一致，布局整齐。Flex布局多行多列核心：父容器+ 子元素固定宽度flex-basis。不整除情况：最后一行元素宽度依然固定，布局整齐，不需要自动伸长。优点：简单、无需额外计算，兼容多行多列布局需求。
2025-10-17 19:00:09
282
原创 性能优化之前端与服务端中的 Gzip 压缩全解析
场景是否需要前端打包.gz是否需要服务端配置是否会重复压缩说明前端生成.gz+ OSS 映射建议不需要否CDN 直接返回.gz文件无.gz文件 + OSS 自动压缩否需要否动态压缩返回离线项目否否否不推荐使用 gzip减小传输体积、提升加载性能。实际生产中，只需确保：浏览器请求中有；响应头中有；即表示压缩已经生效。
2025-10-16 19:58:54
1326
原创 HTTP 413 状态码详解与前端处理，请求体过大
413 表示请求体过大，通常用于上传或大数据请求状态码由服务器或框架返回，浏览器不会自动报错自己写服务端可以手动修改状态码，但要注意框架或代理限制上传文件默认没有上限，实际上限取决于服务器配置、内存和网络状况前端处理限制大小分片上传压缩处理捕获 413 并给出友好提示合理结合前端与后端的控制，可以有效避免 413 错误，同时提升用户体验。
2025-10-15 21:45:41
725
原创 前端开发者必备的高效习惯：从初级到中级
从初级到中级前端开发者，核心目标是提升效率和代码质量。初级阶段重在规范和理解，保证代码可用；中级阶段重在复用、性能、团队协作和可维护性。结合实际开发操作细化的习惯，如文件头部功能描述、合并前检查改动、变量命名、自测、修改 bug 注释和工作留痕，能够让你的开发流程更加高效稳健。养成良好的开发习惯，不仅可以加快开发速度，还能让代码更易维护，为未来成长打下坚实基础。
2025-10-15 21:31:12
687
原创 一次被“动画关闭”启发的思考：Animate.css 与 prefers-reduced-motion 的无障碍设计
* 用更轻柔的淡入代替复杂动画 */.fade-in {console.log('用户希望减少动画效果');// 可以在这里调整动画逻辑项目含义媒体查询功能检测用户是否希望减少动画Animate.css 行为自动禁用动画效果建议做法尊重用户设置，可提供轻量替代无障碍意义减少眩晕、恶心等身体不适，提高使用体验前端开发者常常追求炫酷动效、丝滑交互，但真正成熟的开发者，会考虑到——“不是每个人都适合看动画。当你的代码既能打动人，又能照顾人，这就是设计的最高境界。
2025-10-15 21:08:42
697
原创 前端开发中 SCSS 变量与 CSS 变量的区别与实践选择，—— 两种变量别混为一谈
SCSS 变量是编译期的计算逻辑，不需要、也不能放在:root中。CSS 变量是运行期的样式变量，必须定义在:root或具体元素内。二者一个属于“开发阶段”，一个属于“浏览器阶段”，搞清楚它们的“时空位置”，就不会再混淆。
2025-10-14 21:59:23
549
原创 性能优化-Vue3 + Vite：图片上传/优化到 OSS 并统一使用vite 的 .env 全局配置，js 和 css 共用变量
全局 OSS 地址管理：通过.env文件统一管理多环境 OSS 地址。JS/TS 访问方便：通过配置文件或获取路径。SCSS 同步变量：通过注入，方便样式中直接引用。环境切换无痛：开发/生产环境自动切换，无需手动修改路径。
2025-10-14 19:17:54
780
原创 前端图片加载失败、 img 出现裂图的原因全解析
裂图”（broken image）是指浏览器尝试加载<img>标签的图片资源失败时的表现形式。常见表现：图片区域显示为灰底、叉号、占位符；控制台出现或警告；Network 面板中图片请求状态码为 404 / 403 / blocked。混合内容机制是现代浏览器为保证 HTTPS 安全性而做出的妥协与平衡。对于前端开发者而言，理解它的升级与阻止逻辑，是解决“裂图”的关键。类别原因浏览器行为解决方案资源不存在404裂图修正路径防盗链403裂图调整 Referer 或代理。
2025-10-13 21:06:14
1877
原创 OSS 文件点击直接下载而非预览的原因与解决方案
→ 浏览器强制下载；某些标签（<img><video><audio>）可绕过下载机制；不同文件类型的浏览器行为各异；按文件用途配置响应头；修改服务端配置是唯一稳定且通用的解决方案。
2025-10-11 16:28:53
1160
原创 开发者工具小技巧：用 Network 面板的「Initiator」看清是谁触发了你的请求
Initiator 表示：当前请求是由谁发起的。每一个网络请求（JS、CSS、图片、XHR、fetch、import 等）在浏览器里都有一个触发来源。Initiator就是帮助我们追踪这个来源的“发起者”。
2025-10-11 15:46:48
818
原创 前端开发如何优雅地 Mock 数据（适用于微服务架构）
项目规模推荐方案优点个人 / 小型项目使用useMock字段 + Apifox 在线管理改动少、灵活、高效中型团队项目独立 Mock 目录 + 请求层控制 + 局部 Mock支持多人协作，易维护大型团队 / 企业架构YApi / Apifox + CI/CD 自动同步 + 统一 Mock 服务接口契约统一、Mock 可视化、自动化程度高如果你是一位刚入行的前端开发者，Mock 数据其实是提升你开发独立性和调试效率的关键技能。在没有权限改动架构、没有统一 Mock 平台的情况下，
2025-10-11 15:23:42
641
原创 为什么 background-size: 100% 100% 对 PNG 有效，但对 SVG 无效？
对比项PNGSVG（默认）是否固定像素✅ 是❌ 否（可矢量缩放）是否允许拉伸✅ 任意拉伸❌ 默认保持比例能否被完全覆盖✅ 能❌ 需修改属性解决方案无需改动删除或加SVG 背景无法铺满的本质，是它自带宽高与保持比例的限制。删除widthheight，或设置才能让真正生效。
2025-10-10 11:16:51
773
原创 npm uninstall 执行的操作、有时不会删除 node_modules 下对应的文件夹
在调试 node_modules 中的 vite包 之后，我想还原我改的东西，重新安装一下这个包，执行 npm uninstall vite 之后，发现我增加的日志还在，这是因为我使用 npm uninstall 之后并没有删除 node_modules 里面的文件夹 vite 文件夹。
2025-10-09 20:58:32
337
原创 浏览器/用户代理默认样式、any-link 伪类选择器
在开发者工具中，选中一个元素，在 styles 标签往下滑动，发现如图所示的样式 “user agent stylesheet” 代表着浏览器默认的样式，每个浏览器的默认样式是不同的，所以我们在开发之前一般会。
2025-10-09 20:56:16
341
原创 永远不要使用 clientY - offsetY 做计算——前端拖拽与定位的亚像素陷阱
永远不要直接用来计算拖拽或定位使用获取元素初始位置拖拽阶段统一使用全局坐标减去初始偏移量对于高频拖拽或浮动按钮，推荐使用保留亚像素精度，避免四舍五入引起的跳动只是一个“入门级简化思路”，一旦涉及生产拖拽组件、fixed 元素或亚像素精度，必然会出坑。统一坐标系 + transform 渲染才是前端高手的稳妥方案。
2025-10-09 20:55:48
427
原创 亚像素级别，使用 transform 代替 margin / top 进行样式精调试
现代浏览器在渲染布局时，很多计算结果并不是整数，而是带有小数的像素值（比如13.333px27.5px虽然显示器最终只能显示到物理像素点，但浏览器会使用抗锯齿、亚像素混合、字体子像素渲染等手段，使视觉效果尽量接近真实的“分数像素”。margintop等会参与布局计算，容易被四舍五入；而transform（比如translate）属于复合层（composite layer）渲染阶段，不会触发布局重排，可以保留更多的亚像素精度。
2025-10-09 18:34:18
1213
原创 Vite开发模式为何默认开启 sourceMap
作为一个开发者，我们可以通过开启配置文件的 sourceMap 来调试网页，比如可以参考这篇文章快速定位 css 文件。但是 sourceMap 除了可以定位css 文件，还可以定位 js 等文件。那么问题来了，在一个 ite + vue + ts 的项目中，即便我们不在 vite.config.js 中开启 sourceMap，我们在开发的时候，也能在开发者工具看道诸如 vue、ts、scss 等源码。这是为什么呢？
2025-10-09 12:47:40
878
原创 前端开发，终于知道 sourcemap 怎么用了，sourcMap 在 css 中的应用
但是如果我们在开发环境开启一下sourceMap，就大不相同了，在 Styles 里面会展示行号和对应的组件名称，并且点击会跳转到 Sources 标签页下面具体的 vue 文件，只需要在 vite.config.ts 中配置即可。但是注意，只配置开发环境的，生产环境一般防止别人破解源码都不会配置，安全起见。在一堆 style 标签中，你根本就无法快速定位，是哪个组件打包而成的，这个时候你点击某个样式，也是会定位到某个 style 标签，你只能根据 style 标签内的内容来判断是哪个组件。
2025-10-09 11:28:05
332
原创 我们为什么要封装 localStorage
取的时候需要 JSON.parse 同时为了避免报错，还需要用 try / catch 包装一下。因为使用原生的 localStore.getItem 和 setItem 的值都是字符串。所以我们在开发项目中总是需要一个封装了 localStore 的工具类 / 函数。我们存一个对象的时候需要 JSON.stringify 处理一下；可以自己写，也可以使用 store 这个包。
2025-10-03 00:06:37
225
原创 JS工具函数与代码优化实战
js 中拼接参数，需要特殊处理因为原来的 url 可能已经有参数，可能没有，所以需要判断是否有 【?】所以最好是封装一个工具函数。
2025-10-03 00:06:12
450
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人