- 博客(35)
- 收藏
- 关注
RSS订阅原创 iOS 18 Safari 首屏“底部圆角黑条”延迟突现的定位与优化
iOS 18 Safari首屏出现底部圆角黑条延迟显示问题，主要由多图像/模糊/圆角叠层场景下的合成层延迟创建导致。通过为问题元素添加transform-gpu will-change-transform强制独立合成层，可有效解决问题。其他优化方案包括：添加淡入过渡、调整z-index、预加载关键图片或改用CSS伪元素。该问题揭示了浏览器合成层机制、will-change使用技巧及backdrop-blur性能特点等前端优化知识点。最小有效解决方案是简单添加合成层提示属性。
2025-11-27 21:29:23
308
原创 面试常问到的JS数组去重方法
本文总结了5种JavaScript数组去重方法：1）使用Set（ES6推荐，简洁高效）；2）for循环+对象标记（兼容ES5）；3）filter+indexOf（经典解法但性能较差）；4）Map（适合复杂类型）；5）对象属性去重（针对对象数组）。针对不同场景给出了选择策略，并指出核心考点包括数据结构特性、时间复杂度和兼容性差异。面试中Set和for+对象标记方法最常被考察。
2025-09-23 01:35:57
460
原创 Vue 组件类型全面总结
类型适用场景关键注意事项Vue2 vs Vue3 差异全局组件基础 UI 组件（按钮、图标）避免过度注册，控制打包体积；推荐使用插件机制替代全局属性Vue2 用，Vue3 用局部组件业务模块内复用（如订单组件）作用域隔离，自动注册Vue3 支持更简洁的自动注册语法动态组件选项卡、步骤条、条件渲染结合keep-alive优化性能，max支持动态绑定一致，Vue3 优化了缓存逻辑泛型组件通用组件（表格、列表）依赖 TypeScript，需显式声明泛型约束Vue3 支持泛型语法递归组件。
2025-09-23 01:28:59
724
原创 前端面试：无感刷新Token的深度解析与异常处理
本文解析了前端面试中无感刷新Token的实现方案及并发请求异常处理。核心在于双Token机制：通过短时效Access Token和长时效Refresh Token配合实现无感刷新，采用Axios拦截器处理请求和响应。当Refresh Token失败时，需通过请求队列管理器统一处理并发请求异常，避免多个错误提示。关键点包括：1)使用单例模式管理刷新状态；2)401请求加入队列等待刷新；3)刷新失败时统一清理Token并跳转登录页；4)仅显示一次友好错误提示。该方案有效解决了并发请求导致的重复刷新和多重提示问题
2025-09-22 15:54:37
817
原创 解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
摘要： 在高DPI屏幕开发Vue Canvas签名组件时，出现绘制区域缩小和坐标偏移问题。经排查发现Vue的响应式属性绑定与原生Canvas操作冲突：模板中的:width/:height绑定与onMounted中的JS尺寸设置相互覆盖，导致DPR适配失效。解决方案是移除模板绑定，完全由JS控制Canvas尺寸：1)获取设备DPR；2)设置Canvas物理尺寸为显示尺寸×DPR；3)固定CSS显示尺寸；4)缩放绘图上下文。关键教训：需要明确划分Vue响应式与原生DOM操作的边界，对Canvas等需要精细控制的
2025-09-05 23:05:38
861
原创 前后端联调中 Long 类型 ID 精度丢失问题
摘要：前后端联调时，Long类型ID因JS数值精度限制（仅支持53位整数）导致精度丢失，表现为"假删除"现象。解决方案：1）后端序列化Long为String（推荐）；2）前端使用json-bigint解析；3）DTO层隔离数据库类型。核心矛盾在于JS的Number类型与Java的long类型范围差异，最佳实践是后端统一返回字符串ID，从源头规避问题。
2025-08-20 15:50:36
1958
原创 Git push被拒绝？超大文件推送解决实践
Git推送失败常见于超大文件问题，本文解析了如何定位和清理仓库中的大文件。通过git verify-pack和git rev-list命令可精准找出触发配额限制的文件（如108MB的视频文件）。解决方法包括使用git filter-branch、BFG工具或git filter-repo重写历史，彻底删除大文件记录，清理后需强制推送。为预防问题，建议使用Git LFS管理大文件，配置.gitignore排除不必要文件，并定期检查仓库体积。这些措施可有效避免推送失败，保持仓库健康。
2025-08-17 00:59:48
1430
原创 高效图像优化实践：AVIF格式迁移与性能提升
摘要 本文探讨了AVIF图像格式在性能优化中的应用实践。通过分析URL参数动态转换和HTTP内容协商两种技术方案，最终选择云服务集成的URL参数方案，实现不重新传图即可返回AVIF格式。文章详细介绍了兼容性保障措施，包括HTML5 picture标签兜底、JS动态检测和移动端特殊处理等方案，同时分享了CDN缓存、质量参数调优等性能优化技巧。最后提出构建时预生成AVIF和CMS自动多格式生成等长期优化策略，为前端性能优化提供了可落地的技术方案。
2025-08-15 14:30:08
1207
原创 Vue 3 父子组件通信核心机制详解：defineProps、defineEmits 与 defineExpose 完全指南
摘要： Vue 3 的组合式 API 通过 defineProps、defineEmits 和 defineExpose 实现组件通信，支持原生 TypeScript 类型安全。defineProps 接收父组件传值，JS 和 TS 环境下分别通过对象声明和泛型定义；defineEmits 定义子组件事件，支持参数类型校验；defineExpose 显式暴露子组件方法/属性，父组件通过 Ref 调用。相比 Vue 2，Vue 3 的类型推断更完善，代码组织更清晰。注意：复杂类型默认值需用函数返回，事件命名建
2025-08-14 01:13:03
1713
原创 前端老项目依赖安全漏洞解决
本文探讨老前端项目依赖安全漏洞的解决方案。针对npm项目，分析三种修复方案：npm audit fix存在升级风险；覆盖依赖修复（推荐）通过overrides精准控制版本；低版本npm可使用npm-force-resolutions。实施步骤包括漏洞扫描、选择方案、配置覆盖和测试验证。建议优先使用overrides最小化侵入性，结合自动化工具和锁文件策略长期管理依赖。方案保持老项目稳定性，精准修复子依赖漏洞，避免全局替换风险。
2025-08-08 18:30:31
1232
原创 Nuxt.js 国际化配置完整教程（含版本兼容与问题解决）
本文介绍了在Nuxt.js项目中配置国际化的完整流程。针对Nuxt 2.x版本，需使用@nuxtjs/i18n@7.x模块，通过5个核心步骤实现：安装兼容版本、创建语言文件、配置nuxt.config.js、开发语言切换组件、集成到页面。重点包括版本兼容性处理（Nuxt 2需7.x版本）、语言文件结构设计、路由自动切换功能实现，以及$i18n实例的使用方法。文章还提供了常见问题解决方案，如版本冲突、依赖错误和语言文件加载问题，帮助开发者快速搭建多语言支持。
2025-08-07 16:34:15
1461
原创 前端方案设计：实现接口缓存
本文介绍了前端实现接口缓存的方案设计，针对电商业务中商品详情页高频访问和分页数据重复加载的痛点。通过分析HTTP缓存的局限性，提出基于内存的前端缓存方案，采用LRU淘汰机制管理缓存数据，支持参数差异化处理和时效性控制。方案包含缓存键设计、存储结构优化和请求封装实现，同时解决了数据实时性、内存泄漏等关键问题。该方案相比服务端缓存具有用户级个性化、网络优化等优势，但需注意数据滞后和内存管理等问题，通过Stale-While-Revalidate策略和随机化过期时间等技术手段进行优化。
2025-07-31 12:47:37
1645
原创 面试题：Vue2 中 template 的解析过程详解
Vue2 模板解析过程分为四个阶段：1）HTML 解析器将模板字符串转换为 AST 抽象语法树；2）优化器标记静态节点以提升性能；3）代码生成器将 AST 转换为可执行的渲染函数；4）最终生成虚拟 DOM。整个过程通过正则匹配和状态机实现，关键优化包括静态节点提升和预编译。与 Vue3 相比，Vue2 的解析器基于正则表达式，优化程度较低。
2025-07-27 16:32:21
898
原创 面试复盘：为什么Vue2的data数据量大时内存开销大？
Vue2处理大量数据时内存开销大的核心原因是其响应式实现机制：通过递归遍历所有属性，为每个属性生成getter/setter和闭包存储依赖，导致层级越深闭包数量指数级增长。每个属性还需保存Dep实例，数组还需关联Observer实例。实测10,000条数据的列表比Vue3多占用30%内存。优化策略包括冻结静态数据、扁平化结构、动态加载和虚拟滚动等，可显著降低内存占用。理解这一机制对性能优化和向Vue3迁移有重要意义。
2025-07-24 22:21:48
864
原创 JavaScript 文件在页面渲染中的加载机制详解
"浏览器遇到普通 script 标签时会阻塞 HTML 解析，直到 JS 下载并执行完成。在实际开发中，可以通过将第三方脚本异步化 + 关键脚本 preload，使 LCP 时间减少了 "：“JS 文件加载会如何影响页面渲染？ps:理解这些机制可以帮助我们更精确地控制页面加载性能。当浏览器解析 HTML 遇到。是否 defer/async?/* 关键渲染路径代码 */遇到 script 标签。停止 HTML 解析。恢复 HTML 解析。
2025-07-24 22:03:06
1080
原创 项目复盘核心要点
项目复盘核心要点总结：复盘价值包括个人成长（避免踩坑、提升技能）、团队价值（经验沉淀、流程优化）和管理价值（成果可视化、晋升依据）。关键步骤为：事前技术方案设计、工作量评估和风险管控；事后通过时间维度和质量维度分析偏差原因。复盘输出应包括项目概览、核心数据对比、成功点与改进点、具体行动项。前端专项复盘需关注技术方案验证、协作效率和自动化程度。系统化复盘能提升全局观和个人能力，建议使用结构化模板输出可执行的改进方案。
2025-07-22 23:41:21
1009
原创 面试复盘：如何回答「千万级Tree组件」封装问题？
本文针对面试中遇到的「千万级Tree组件」封装问题进行了深度复盘。核心思路是将虚拟列表原理与树形结构结合，提出虚拟树(Virtual Tree)解决方案：通过数据结构扁平化、动态渲染可视区域和占位元素模拟滚动条等技术实现高效渲染。文章详细分析了展开折叠、动态高度、搜索性能等关键问题的解决策略，并列举了懒加载、GPU加速等优化方向。最后指出实际开发中应优先使用成熟组件库，同时强调理论理解比实际造轮子更重要，建议通过反提问技巧掌握面试主动权。
2025-07-22 23:05:10
654
原创 面试复盘：节流中第二次触发的事件？答错补课
摘要：面试中关于“节流函数是否丢弃第二次触发事件”的问题暴露了对节流实现策略的理解不足。关键发现： 策略差异：时间戳/基础定时器版会丢弃，而组合版（首尾执行）在滚动等场景会保留末次触发； 场景适配：滚动需兼顾首尾响应，组合版通过剩余时间定时器实现； 回答模板：应分场景说明策略差异，并主动追问业务需求。教训：技术实现需结合具体场景，避免机械记忆。
2025-07-10 01:02:56
999
原创 前端面试题：H5首屏优化
H5首屏优化四维策略 首屏优化需系统化实施： 1️⃣ 网络层：升级HTTP/2/3协议，配合CDN分发+Brotli压缩，减少传输耗时； 2️⃣ 资源层：代码分割/图片懒加载/字体优化，配合preload等优先级控制； 3️⃣ 数据层：强缓存+本地存储分层策略，数据预取与降级方案结合； 4️⃣ 渲染层：SSR/流式渲染+骨架屏，关键CSS内联与非关键资源异步加载。通过Lighthouse持续监测，综合提升FCP等核心指标。
2025-07-10 00:23:33
1044
原创 JavaScript数组方法——梳理和考点
高频使用的方法pushpopmapfilterreduce需要明确：哪些数组方法会改变原数组，提问可能结合vue2的数组响应式操作方法链式调用：如性能敏感场景：大数据量时慎用spliceshift（索引更新开销大）
2025-07-09 20:43:23
818
原创 ECMAScript 2025（ES15）核心新特性全面解析
ES2025（ES15）核心新特性解析 ECMAScript 2025带来多项重要改进：原生JSON模块导入简化配置加载，延迟模块评估优化性能，模式匹配提升流程控制。不可变数据结构保障数据安全，智能管道操作符增强函数式编程体验。类型注解增强提供原生类型支持，高精度Decimal类型解决金融计算痛点。这些特性将显著改善JavaScript开发体验，但实际应用需考虑浏览器兼容性问题。从模块系统到类型安全，ES2025为现代Web开发提供了更强大、更安全的语言基础。
2025-07-06 15:40:48
1396
原创 React 应用中的 CSS 键盘记录器攻击
摘要：CSS键盘记录器攻击利用React受控组件机制和CSS属性选择器窃取用户密码。当用户输入时，React同步更新输入框value属性，触发恶意CSS规则向攻击者服务器发送字符信息。尽管现代React应用仍存在风险，但可通过严格管控第三方资源（CSP/SRI）、优化密码组件实现（非受控模式）等策略防御。该攻击揭示了前端安全的隐蔽性，强调对第三方资源的警惕和敏感字段的特殊处理。（149字）
2025-07-04 21:39:37
1358
原创 深入解析BEM架构：架构级全局样式管理方案
摘要：BEM架构在前端开发中的高级应用 BEM（Block, Element, Modifier）是一种组件化CSS架构方案，有效解决样式冲突、命名污染等问题。文章深入解析BEM的核心原理与实现： 核心架构：通过块(Block)、元素(Element)、修饰符(Modifier)三级结构组织样式，支持SCSS混入函数实现自动化类名生成 高级扩展：包括状态管理器、响应式修饰符和变体生成器等进阶功能 组件实践：展示Vue组件与BEM的深度集成方案 优化策略：提出层级控制、样式复用和构建优化等企业级解决方案 适用
2025-07-01 01:10:32
1445
原创 XSS攻击详解：原理、分类与全方位防御策略
XSS攻击是Web安全常见漏洞，攻击者通过注入恶意脚本窃取用户数据或进行钓鱼攻击。主要分为反射型、存储型和DOM型三类，危害程度不同。防御策略包括输入过滤、输出转义、CSP策略、安全DOM操作和使用XSS过滤库等。特别强调避免通过URL明文传输敏感数据，应采用服务端会话存储或加密传输。XSS防御需建立对非受信数据的零信任体系，严格执行安全编码规范，结合现代开发框架的自动防护机制，才能有效预防攻击。
2025-06-28 00:12:21
947
原创 浏览器存储机制解析：Cookie vs localStorage vs sessionStorage
本文全面对比了浏览器三大存储机制：cookie、localStorage和sessionStorage。cookie主要用于服务器通信（4KB大小，随请求自动发送），支持设置过期时间；localStorage（约5MB）用于持久化存储，数据永久保存；sessionStorage（约5MB）为会话级临时存储，关闭标签页即失效。三者API易用性依次提升，作用域从同源共享到仅限当前标签页。选择建议：服务器通信用cookie，持久化数据用localStorage，敏感临时数据用sessionStorage。文末提供
2025-06-26 13:59:05
1108
原创 前端大文件直传华为云OBS实践与问题解决
本文总结了前端直传华为云OBS方案实施中遇到的三大核心问题及解决方案。首先解决了跨域策略配置难题，通过精准配置CORS规则和Nginx代理；其次纠正了Content-MD5校验异常问题，提出从HEX到Base64的规范转换方法；最后处理了历史路径兼容问题。实施后，100MB文件上传时间缩短至3.2秒（提升300%），服务器CPU负载降低65%，失败率下降85%。方案充分发挥了直传架构优势，同时确保了安全性和扩展性，为后续实现分片上传等功能奠定基础。
2025-06-26 01:19:37
1803
原创 生产环境图片引入异常：require中响应式数据引发的__unref未定义错误
生产环境图片加载异常问题分析与解决：在Taro/Vue项目中，开发环境正常但生产打包后动态图片加载失败，报错__unref is not defined。原因是生产构建时require()中使用了响应式数据，导致优化出错。解决方案包括：1) 重组代码，将响应式判断移出require；2) 封装为计算属性；3) 优化工程配置。关键点在于确保require参数是静态路径，避免与响应式系统冲突。建议建立资源管理规范，预加载可能用到的图片资源。该问题揭示了Webpack静态分析机制与Vue生产优化的冲突，需特别注意
2025-06-25 18:14:38
1188
原创 Vue 项目背景图片路径失效分析与修复
文章摘要：Vue项目中index.vue文件的.main-bottom-bar背景图片无法加载，原因是构建工具对src/assets资源的路径处理机制不匹配。解决方案有三种：1)将图片移至public目录并使用绝对路径（推荐方案，稳定性最佳）；2)通过JavaScript动态导入；3)使用CSS变量。分析表明使用public目录具有跨环境一致、维护简单、性能优越等优势。最终通过路径策略调整解决了开发/生产环境图片加载问题，并总结了静态资源分类、路径解析规则等核心知识，强调项目初期就应制定规范的资源处理策略。
2025-06-23 01:03:35
736
原创 前端字符长度校验的陷阱：如何正确处理包含Emoji的混合文本
在最近的需求开发中，我遇到了一个看似简单却暗藏玄机的问题：实现输入框的字符长度校验，要求支持中英文、数字、标点符号和Emoji表情。而且当用户输入包含Emoji的文本内容时，前端校验结果与后端校验结果也是不一致，产品要求-前端校验失败需要给出提示。最后，在完成这个看似简单的需求点后，不仅扫了盲，还让我认识到：在前端开发中越是基础的功能，越可能隐藏着精深的知识。，理由是：通常使用的是现代浏览器；这类现代API，也体现了浏览器不断完善的过程，学不完，根本学不完～通过此问题的解决，我总结了。由于是后台管理系统，
2025-06-20 02:11:21
821
原创 大文件分片上传后文件损坏：大小不一致与解压失败的排查之旅
在分布式系统中，任何环节都可能成为"沉默的破坏者"。通过本次排查，我深刻认识到：对于文件传输这类关键操作，不能依赖单一的成功状态码或大小检查，必须建立端到端的校验机制。分片级MD5验证虽然增加约5%的性能开销，但换来的是100%的数据可靠性保证。
2025-06-19 14:13:48
1179
原创 如何优化或替换Vue点击外部指令v-click-outside——我的实践与思考
这个案例让我深刻体会到：在复杂前端场景中，合理利用社区资源与原生能力之间的平衡，需要结合具体业务需求、团队技术储备和长期维护成本进行综合决策。每一个小功能都能拓展很多知识点，路漫漫兮～事件监听器移除依赖开发人员手动维护，在动态组件场景出现2.3%的未清除监听器（通过Chrome Performance Monitor统计）在最近开发的H5项目中，我需要实现"点击元素外部触发回调"的交互逻辑（如点击下拉菜单外部自动关闭）。监听会干扰第三方组件的冒泡逻辑，产生15%的意外触发（根据Sentry错误日志统计）
2025-06-18 13:25:45
504
原创 手机号加密参数传输中加号`+`被编译为空格导致后端解析失败
也称为百分号编码（Percent-encoding），是一种编码机制，用于将非ASCII字符和一些特殊字符转换成可以在URL中安全传输的格式。：在Web开发中，前端负责生成和发送请求，后端负责接收和处理请求。为了确保数据的正确传输和解析，前后端需要协作进行编码和解码操作，并增加适当的错误处理逻辑以增强系统的健壮性。它会将传入的字符串中的非ASCII字符和一些特殊字符进行编码，以确保它们可以在URL中安全传输。在Web开发中，当手机号经过加密后作为URL参数传输时，加密后的字符串中的加号。
2025-06-18 13:25:07
303
原创 Taro Vue3项目中遇到的微信H5路由参数丢失问题
初始化路由参数，但微信的截断操作发生在页面加载初期，导致Taro获取的URL已被“污染”，无法感知原始参数。通过以上方案，最终在保证业务功能的前提下，解决了Taro Vue3在微信H5中的路由参数丢失问题。Taro的路由初始化早于微信的URL处理逻辑，且无自动回填机制，最终导致参数无法恢复。后的内容，目的是保证JS-SDK的签名URL与后台配置的授权域名严格一致。原理：弃用Hash路由，改用标准的History模式，彻底规避微信对。微信浏览器会强制标准化URL以保证JS-SDK签名校验的准确性，任何。
2025-06-18 13:22:52
470
原创 本地开发遇到的CSP策略陷阱：为什么IP访问空白而localhost正常？
• 172.16.80.102作为普通IP地址，不被视为安全上下文（Secure Context）变量自动切换CSP策略，确保开发体验与生产安全性的平衡。• localhost在浏览器安全模型中属于可信源（Trusted Origin）等工具生成HTTPS代理地址，避免直接暴露HTTP服务。在最近的本地开发过程中，我遇到了一个奇怪的现象：当使用。思考：可以在构建工具中预设环境检测逻辑，通过。通过IP地址访问服务时页面完全空白，而使用。• 非安全源：IP地址、普通HTTP域名。HTTP响应头CSP。
2025-06-18 13:19:54
642
原创 解决 vue-quill 组件控制台报错：DOMNodeInserted 废弃问题的完整方案
本文针对vue-quill组件因使用废弃的DOMNodeInserted事件导致控制台报错的问题，提出了完整解决方案。通过分析发现问题的根源在于quilljs库1.3.7版本使用了该废弃API。作者推荐使用patch-package工具生成补丁文件，将DOMNodeInserted替换为MutationObserver，并通过配置postinstall钩子自动应用补丁。方案解决了本地和远程部署环境的同步问题，同时保持版本控制友好性。文章详细介绍了从安装依赖、生成补丁到部署验证的完整流程，并总结了使用patc
2025-06-18 13:15:37
701
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人