- 博客(22)
- 收藏
- 关注
RSS订阅原创 面试复盘：为什么Vue2的data数据量大时内存开销大？
Vue2处理大量数据时内存开销大的核心原因是其响应式实现机制：通过递归遍历所有属性，为每个属性生成getter/setter和闭包存储依赖，导致层级越深闭包数量指数级增长。每个属性还需保存Dep实例，数组还需关联Observer实例。实测10,000条数据的列表比Vue3多占用30%内存。优化策略包括冻结静态数据、扁平化结构、动态加载和虚拟滚动等，可显著降低内存占用。理解这一机制对性能优化和向Vue3迁移有重要意义。
2025-07-24 22:21:48
468
原创 JavaScript 文件在页面渲染中的加载机制详解
"浏览器遇到普通 script 标签时会阻塞 HTML 解析，直到 JS 下载并执行完成。在实际开发中，可以通过将第三方脚本异步化 + 关键脚本 preload，使 LCP 时间减少了 "：“JS 文件加载会如何影响页面渲染？ps:理解这些机制可以帮助我们更精确地控制页面加载性能。当浏览器解析 HTML 遇到。是否 defer/async?/* 关键渲染路径代码 */遇到 script 标签。停止 HTML 解析。恢复 HTML 解析。
2025-07-24 22:03:06
574
原创 项目复盘核心要点
项目复盘核心要点总结：复盘价值包括个人成长（避免踩坑、提升技能）、团队价值（经验沉淀、流程优化）和管理价值（成果可视化、晋升依据）。关键步骤为：事前技术方案设计、工作量评估和风险管控；事后通过时间维度和质量维度分析偏差原因。复盘输出应包括项目概览、核心数据对比、成功点与改进点、具体行动项。前端专项复盘需关注技术方案验证、协作效率和自动化程度。系统化复盘能提升全局观和个人能力，建议使用结构化模板输出可执行的改进方案。
2025-07-22 23:41:21
803
原创 面试复盘：如何回答「千万级Tree组件」封装问题？
本文针对面试中遇到的「千万级Tree组件」封装问题进行了深度复盘。核心思路是将虚拟列表原理与树形结构结合，提出虚拟树(Virtual Tree)解决方案：通过数据结构扁平化、动态渲染可视区域和占位元素模拟滚动条等技术实现高效渲染。文章详细分析了展开折叠、动态高度、搜索性能等关键问题的解决策略，并列举了懒加载、GPU加速等优化方向。最后指出实际开发中应优先使用成熟组件库，同时强调理论理解比实际造轮子更重要，建议通过反提问技巧掌握面试主动权。
2025-07-22 23:05:10
598
原创 面试复盘：节流中第二次触发的事件？答错补课
摘要：面试中关于“节流函数是否丢弃第二次触发事件”的问题暴露了对节流实现策略的理解不足。关键发现： 策略差异：时间戳/基础定时器版会丢弃，而组合版（首尾执行）在滚动等场景会保留末次触发； 场景适配：滚动需兼顾首尾响应，组合版通过剩余时间定时器实现； 回答模板：应分场景说明策略差异，并主动追问业务需求。教训：技术实现需结合具体场景，避免机械记忆。
2025-07-10 01:02:56
905
原创 前端面试题：H5首屏优化
H5首屏优化四维策略 首屏优化需系统化实施： 1️⃣ 网络层：升级HTTP/2/3协议，配合CDN分发+Brotli压缩，减少传输耗时； 2️⃣ 资源层：代码分割/图片懒加载/字体优化，配合preload等优先级控制； 3️⃣ 数据层：强缓存+本地存储分层策略，数据预取与降级方案结合； 4️⃣ 渲染层：SSR/流式渲染+骨架屏，关键CSS内联与非关键资源异步加载。通过Lighthouse持续监测，综合提升FCP等核心指标。
2025-07-10 00:23:33
859
原创 JavaScript数组方法——梳理和考点
高频使用的方法pushpopmapfilterreduce需要明确：哪些数组方法会改变原数组，提问可能结合vue2的数组响应式操作方法链式调用：如性能敏感场景：大数据量时慎用spliceshift（索引更新开销大）
2025-07-09 20:43:23
755
原创 ECMAScript 2025（ES15）核心新特性全面解析
ES2025（ES15）核心新特性解析 ECMAScript 2025带来多项重要改进：原生JSON模块导入简化配置加载，延迟模块评估优化性能，模式匹配提升流程控制。不可变数据结构保障数据安全，智能管道操作符增强函数式编程体验。类型注解增强提供原生类型支持，高精度Decimal类型解决金融计算痛点。这些特性将显著改善JavaScript开发体验，但实际应用需考虑浏览器兼容性问题。从模块系统到类型安全，ES2025为现代Web开发提供了更强大、更安全的语言基础。
2025-07-06 15:40:48
983
原创 React 应用中的 CSS 键盘记录器攻击
摘要：CSS键盘记录器攻击利用React受控组件机制和CSS属性选择器窃取用户密码。当用户输入时，React同步更新输入框value属性，触发恶意CSS规则向攻击者服务器发送字符信息。尽管现代React应用仍存在风险，但可通过严格管控第三方资源（CSP/SRI）、优化密码组件实现（非受控模式）等策略防御。该攻击揭示了前端安全的隐蔽性，强调对第三方资源的警惕和敏感字段的特殊处理。（149字）
2025-07-04 21:39:37
1249
原创 深入解析BEM架构：架构级全局样式管理方案
摘要：BEM架构在前端开发中的高级应用 BEM（Block, Element, Modifier）是一种组件化CSS架构方案，有效解决样式冲突、命名污染等问题。文章深入解析BEM的核心原理与实现： 核心架构：通过块(Block)、元素(Element)、修饰符(Modifier)三级结构组织样式，支持SCSS混入函数实现自动化类名生成 高级扩展：包括状态管理器、响应式修饰符和变体生成器等进阶功能 组件实践：展示Vue组件与BEM的深度集成方案 优化策略：提出层级控制、样式复用和构建优化等企业级解决方案 适用
2025-07-01 01:10:32
1220
原创 XSS攻击详解：原理、分类与全方位防御策略
XSS攻击是Web安全常见漏洞，攻击者通过注入恶意脚本窃取用户数据或进行钓鱼攻击。主要分为反射型、存储型和DOM型三类，危害程度不同。防御策略包括输入过滤、输出转义、CSP策略、安全DOM操作和使用XSS过滤库等。特别强调避免通过URL明文传输敏感数据，应采用服务端会话存储或加密传输。XSS防御需建立对非受信数据的零信任体系，严格执行安全编码规范，结合现代开发框架的自动防护机制，才能有效预防攻击。
2025-06-28 00:12:21
832
原创 浏览器存储机制解析：Cookie vs localStorage vs sessionStorage
本文全面对比了浏览器三大存储机制：cookie、localStorage和sessionStorage。cookie主要用于服务器通信（4KB大小，随请求自动发送），支持设置过期时间；localStorage（约5MB）用于持久化存储，数据永久保存；sessionStorage（约5MB）为会话级临时存储，关闭标签页即失效。三者API易用性依次提升，作用域从同源共享到仅限当前标签页。选择建议：服务器通信用cookie，持久化数据用localStorage，敏感临时数据用sessionStorage。文末提供
2025-06-26 13:59:05
949
原创 前端大文件直传华为云OBS实践与问题解决
本文总结了前端直传华为云OBS方案实施中遇到的三大核心问题及解决方案。首先解决了跨域策略配置难题，通过精准配置CORS规则和Nginx代理；其次纠正了Content-MD5校验异常问题，提出从HEX到Base64的规范转换方法；最后处理了历史路径兼容问题。实施后，100MB文件上传时间缩短至3.2秒（提升300%），服务器CPU负载降低65%，失败率下降85%。方案充分发挥了直传架构优势，同时确保了安全性和扩展性，为后续实现分片上传等功能奠定基础。
2025-06-26 01:19:37
1118
原创 生产环境图片引入异常：require中响应式数据引发的__unref未定义错误
生产环境图片加载异常问题分析与解决：在Taro/Vue项目中，开发环境正常但生产打包后动态图片加载失败，报错__unref is not defined。原因是生产构建时require()中使用了响应式数据，导致优化出错。解决方案包括：1) 重组代码，将响应式判断移出require；2) 封装为计算属性；3) 优化工程配置。关键点在于确保require参数是静态路径，避免与响应式系统冲突。建议建立资源管理规范，预加载可能用到的图片资源。该问题揭示了Webpack静态分析机制与Vue生产优化的冲突，需特别注意
2025-06-25 18:14:38
1126
原创 Vue 项目背景图片路径失效分析与修复
文章摘要：Vue项目中index.vue文件的.main-bottom-bar背景图片无法加载，原因是构建工具对src/assets资源的路径处理机制不匹配。解决方案有三种：1)将图片移至public目录并使用绝对路径（推荐方案，稳定性最佳）；2)通过JavaScript动态导入；3)使用CSS变量。分析表明使用public目录具有跨环境一致、维护简单、性能优越等优势。最终通过路径策略调整解决了开发/生产环境图片加载问题，并总结了静态资源分类、路径解析规则等核心知识，强调项目初期就应制定规范的资源处理策略。
2025-06-23 01:03:35
607
原创 前端字符长度校验的陷阱：如何正确处理包含Emoji的混合文本
在最近的需求开发中，我遇到了一个看似简单却暗藏玄机的问题：实现输入框的字符长度校验，要求支持中英文、数字、标点符号和Emoji表情。而且当用户输入包含Emoji的文本内容时，前端校验结果与后端校验结果也是不一致，产品要求-前端校验失败需要给出提示。最后，在完成这个看似简单的需求点后，不仅扫了盲，还让我认识到：在前端开发中越是基础的功能，越可能隐藏着精深的知识。，理由是：通常使用的是现代浏览器；这类现代API，也体现了浏览器不断完善的过程，学不完，根本学不完～通过此问题的解决，我总结了。由于是后台管理系统，
2025-06-20 02:11:21
738
原创 大文件分片上传后文件损坏：大小不一致与解压失败的排查之旅
在分布式系统中，任何环节都可能成为"沉默的破坏者"。通过本次排查，我深刻认识到：对于文件传输这类关键操作，不能依赖单一的成功状态码或大小检查，必须建立端到端的校验机制。分片级MD5验证虽然增加约5%的性能开销，但换来的是100%的数据可靠性保证。
2025-06-19 14:13:48
1008
原创 如何优化或替换Vue点击外部指令v-click-outside——我的实践与思考
这个案例让我深刻体会到：在复杂前端场景中，合理利用社区资源与原生能力之间的平衡，需要结合具体业务需求、团队技术储备和长期维护成本进行综合决策。每一个小功能都能拓展很多知识点，路漫漫兮～事件监听器移除依赖开发人员手动维护，在动态组件场景出现2.3%的未清除监听器（通过Chrome Performance Monitor统计）在最近开发的H5项目中，我需要实现"点击元素外部触发回调"的交互逻辑（如点击下拉菜单外部自动关闭）。监听会干扰第三方组件的冒泡逻辑，产生15%的意外触发（根据Sentry错误日志统计）
2025-06-18 13:25:45
380
原创 手机号加密参数传输中加号`+`被编译为空格导致后端解析失败
也称为百分号编码（Percent-encoding），是一种编码机制，用于将非ASCII字符和一些特殊字符转换成可以在URL中安全传输的格式。：在Web开发中，前端负责生成和发送请求，后端负责接收和处理请求。为了确保数据的正确传输和解析，前后端需要协作进行编码和解码操作，并增加适当的错误处理逻辑以增强系统的健壮性。它会将传入的字符串中的非ASCII字符和一些特殊字符进行编码，以确保它们可以在URL中安全传输。在Web开发中，当手机号经过加密后作为URL参数传输时，加密后的字符串中的加号。
2025-06-18 13:25:07
229
原创 Taro Vue3项目中遇到的微信H5路由参数丢失问题
初始化路由参数，但微信的截断操作发生在页面加载初期，导致Taro获取的URL已被“污染”，无法感知原始参数。通过以上方案，最终在保证业务功能的前提下，解决了Taro Vue3在微信H5中的路由参数丢失问题。Taro的路由初始化早于微信的URL处理逻辑，且无自动回填机制，最终导致参数无法恢复。后的内容，目的是保证JS-SDK的签名URL与后台配置的授权域名严格一致。原理：弃用Hash路由，改用标准的History模式，彻底规避微信对。微信浏览器会强制标准化URL以保证JS-SDK签名校验的准确性，任何。
2025-06-18 13:22:52
325
原创 本地开发遇到的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
555
原创 解决 vue-quill 组件控制台报错：DOMNodeInserted 废弃问题的完整方案
本文针对vue-quill组件因使用废弃的DOMNodeInserted事件导致控制台报错的问题，提出了完整解决方案。通过分析发现问题的根源在于quilljs库1.3.7版本使用了该废弃API。作者推荐使用patch-package工具生成补丁文件，将DOMNodeInserted替换为MutationObserver，并通过配置postinstall钩子自动应用补丁。方案解决了本地和远程部署环境的同步问题，同时保持版本控制友好性。文章详细介绍了从安装依赖、生成补丁到部署验证的完整流程，并总结了使用patc
2025-06-18 13:15:37
506
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人