喜欢敲代码

Vue2 模板解析过程分为四个阶段：1）HTML 解析器将模板字符串转换为 AST 抽象语法树；2）优化器标记静态节点以提升性能；3）代码生成器将 AST 转换为可执行的渲染函数；4）最终生成虚拟 DOM。整个过程通过正则匹配和状态机实现，关键优化包括静态节点提升和预编译。与 Vue3 相比，Vue2 的解析器基于正则表达式，优化程度较低。

Vue2处理大量数据时内存开销大的核心原因是其响应式实现机制：通过递归遍历所有属性，为每个属性生成getter/setter和闭包存储依赖，导致层级越深闭包数量指数级增长。每个属性还需保存Dep实例，数组还需关联Observer实例。实测10,000条数据的列表比Vue3多占用30%内存。优化策略包括冻结静态数据、扁平化结构、动态加载和虚拟滚动等，可显著降低内存占用。理解这一机制对性能优化和向Vue3迁移有重要意义。

"浏览器遇到普通 script 标签时会阻塞 HTML 解析，直到 JS 下载并执行完成。在实际开发中，可以通过将第三方脚本异步化 + 关键脚本 preload，使 LCP 时间减少了 "：“JS 文件加载会如何影响页面渲染？ps:理解这些机制可以帮助我们更精确地控制页面加载性能。当浏览器解析 HTML 遇到。是否 defer/async?/* 关键渲染路径代码 */遇到 script 标签。停止 HTML 解析。恢复 HTML 解析。

本文针对面试中遇到的「千万级Tree组件」封装问题进行了深度复盘。核心思路是将虚拟列表原理与树形结构结合，提出虚拟树(Virtual Tree)解决方案：通过数据结构扁平化、动态渲染可视区域和占位元素模拟滚动条等技术实现高效渲染。文章详细分析了展开折叠、动态高度、搜索性能等关键问题的解决策略，并列举了懒加载、GPU加速等优化方向。最后指出实际开发中应优先使用成熟组件库，同时强调理论理解比实际造轮子更重要，建议通过反提问技巧掌握面试主动权。

摘要：面试中关于“节流函数是否丢弃第二次触发事件”的问题暴露了对节流实现策略的理解不足。关键发现： 策略差异：时间戳/基础定时器版会丢弃，而组合版（首尾执行）在滚动等场景会保留末次触发； 场景适配：滚动需兼顾首尾响应，组合版通过剩余时间定时器实现； 回答模板：应分场景说明策略差异，并主动追问业务需求。教训：技术实现需结合具体场景，避免机械记忆。

H5首屏优化四维策略 首屏优化需系统化实施： 1️⃣ 网络层：升级HTTP/2/3协议，配合CDN分发+Brotli压缩，减少传输耗时； 2️⃣ 资源层：代码分割/图片懒加载/字体优化，配合preload等优先级控制； 3️⃣ 数据层：强缓存+本地存储分层策略，数据预取与降级方案结合； 4️⃣ 渲染层：SSR/流式渲染+骨架屏，关键CSS内联与非关键资源异步加载。通过Lighthouse持续监测，综合提升FCP等核心指标。

高频使用的方法pushpopmapfilterreduce需要明确：哪些数组方法会改变原数组，提问可能结合vue2的数组响应式操作方法链式调用：如性能敏感场景：大数据量时慎用spliceshift（索引更新开销大）