weixin_62613321的博客

摘要 本文系统讲解JavaScript异步编程核心概念，包括事件循环、宏任务/微任务执行顺序、Promise执行机制和async/await原理。通过典型代码示例分析执行流程：1) Promise执行器函数同步执行，then回调进入微任务队列；2) setTimeout等宏任务最后执行；3) await会暂停函数执行，将后续代码包装为微任务。文章包含多个面试真题解析，如腾讯音乐二面题目，帮助读者掌握"script start→微任务→宏任务"的核心判断逻辑，解决异步代码顺序判断难题。

本文整理了JavaScript中this指针的几种典型场景及输出结果分析。主要内容包括：1)普通函数调用时this指向全局/undefined；2)对象方法调用时this指向调用者；3)赋值丢失this的情况；4)嵌套函数中的this指向问题；5)箭头函数this继承外层作用域的特点；6)call/apply/bind改变this指向的方法；7)new调用时this指向新对象。

本文整理了前端开发中三个常见的手写实现：防抖节流、深拷贝和函数柯里化。防抖通过延迟执行避免频繁触发；节流通过限制执行频率确保定期执行；深拷贝利用递归实现对象的完全复制；函数柯里化则将多参数函数转换为多次单参数调用的形式，通过闭包保存中间参数状态。这些核心技巧在前端性能优化和代码组织方面具有重要作用，理解其实现原理有助于提升开发能力。

本文介绍了三个常见的前端手写题目：1. 数组转树结构：通过创建映射表和结果数组，将扁平数组转换为树形结构；2. 数组扁平化：使用递归实现无限层级或指定层级的数组展开；3. 随机打乱数组：采用Fisher-Yates洗牌算法，从后向前随机交换元素位置。每个问题都提供了清晰的实现思路和完整代码示例，涵盖了数据处理和算法应用等前端开发常见场景。

本文对比了前端工程化中的关键技术：1) CommonJS与ES Module在模块加载机制上的核心区别 - 动态加载与静态分析、值拷贝与动态映射；2) Webpack中Loader与Plugin的职责差异 - Loader处理特定资源转换，Plugin扩展构建流程；3) Webpack与Vite的架构差异 - Webpack基于打包器模式，Vite利用浏览器原生ESM实现按需编译。三者共同体现了前端工程化从传统打包到现代开发体验的演进趋势，开发者需根据项目需求选择合适的工具链。

这篇文章主要整理了 JavaScript 中 Promise 相关的高频手写题，包括异步任务超时控制、红绿灯循环执行以及手写 Promise.all。文章先从 setTimeout 的基本用法入手，说明定时器在异步控制中的作用；随后通过手动封装 Promise 和 Promise.race 两种方式实现超时控制；再结合 async/await 实现红绿灯按顺序循环执行；最后分析 Promise.all 的行为特点，并手写实现其核心逻辑，帮助理解 Promise 的串行、并行、竞态和错误处理机制。

该系列文章整理了前端开发的核心知识点，分为JavaScript/TypeScript、CSS、Vue、工程化、浏览器和手写实现六大模块。内容涵盖基础概念（如interface与type区别、闭包）、常用方法（数组操作、DOM查询）、Vue核心（响应式原理、组件通信）、工程化工具（Git命令、性能优化）以及浏览器原理（跨域处理、URL加载过程）等高频面试考点。每篇文章针对特定技术点进行深入解析，适合前端开发者系统复习和面试准备。

本文整理了前端工程化中的Git常见命令和性能优化方法。Git部分介绍了常用命令如clone、pull、push等，重点讲解了rebase与merge的区别：rebase会重写提交历史形成线性结构，而merge会保留分支历史并创建合并提交。还解释了pull(fetch+merge)与fetch的区别，以及工作区、暂存区、本地和远程仓库的概念。性能优化方面从三个维度展开：1)传输优化(CDN、缓存、HTTP2)；2)体积优化(图片压缩、代码压缩、Gzip)；3)加载策略优化(懒加载、按需加载、预加载)。

本文总结了Vue组件通信方式、生命周期钩子和条件渲染的相关知识点。在组件通信方面，介绍了父子组件通过props/emit传值、跨层级组件使用provide/inject以及状态管理方案。生命周期部分详细解析了created和mounted的区别，指出created适合数据初始化而mounted适合DOM操作，并解释了created阶段不能操作DOM的原因。最后对比了v-if和v-show的差异，说明v-if有组件销毁重建的开销，而v-show只是切换显示状态。文章还探讨了visibility:hidden和

本文介绍了浏览器跨域问题及解决方案，并详细解析了从输入URL到页面渲染的完整流程。跨域是由于同源策略限制，可通过代理（Vite、Nginx、Node.js BFF层）或CORS（后端设置访问白名单）解决。URL访问流程包括：URL解析、DNS查询、建立TCP连接（HTTPS需TLS握手）、发送请求、接收响应、渲染页面（构建DOM/CSSOM、生成渲染树）及断开连接。文章还简要说明了DNS查询顺序和HTTPS特有的安全握手过程。

本文介绍了Vue3中Proxy的实现原理及其在响应式系统中的应用。Proxy作为JS的代理机制，通过拦截对象操作实现响应式，其核心是"get收集依赖，set触发更新"。文章对比了Proxy与Object.defineProperty的差异，指出Proxy的兼容性问题和可能丢失响应式的情况（如解构赋值）。同时解释了ref和reactive的区别：reactive直接代理对象，ref则通过包装基本类型为对象实现响应式，因此需要.value访问。这些知识点是Vue3响应式系统的核心实现原理。

JavaScript闭包让函数记住词法作用域，实现数据私有化。防抖在频繁操作后执行一次，节流固定间隔执行一次。Vue2通过Object.defineProperty劫持数据，结合Dep/Watcher更新；Vue3改用Proxy代理，更高效处理对象/数组变化。核心差异在于响应式实现机制优化。

本文整理了前端开发中关于JavaScript和Vue框架的四个核心知识点：1) JS与TS的核心区别在于TS增加了静态类型系统，更适合大型项目；2) Vue生命周期钩子中created和mounted的区别及适用场景，强调created适合数据初始化而mounted适合DOM操作；3) v-if和v-show的对比分析，指出v-if有创建/销毁开销而v-show切换开销更小；4) 获取页面div数量的多种DOM查询方法。

文章摘要 本文整理了CSS常见面试题，包含4个核心知识点：1）元素水平垂直居中的3种方法（定位、flex布局）；2）标准盒模型与IE盒模型的区别及box-sizing属性；3）BFC概念、创建方式及解决高度塌陷、margin重叠的实例；4）flex布局特点及特殊场景应用。重点讲解了CSS布局的核心机制和实用技巧，包括定位原理、盒模型计算、BFC特性等，适合前端开发者系统复习CSS基础。

本文围绕 Vue 中的虚拟 DOM、Diff 算法与 Patch 流程进行梳理。先从虚拟 DOM 的定义与优势入手，说明它为什么能帮助框架减少真实 DOM 操作；再进一步分析 Diff 的核心思想，包括同层比较、key 的作用以及启发式优化；最后结合 vnode、patch、patchVnode 与 updateChildren 的执行过程，串起 Vue 更新视图时的整体逻辑，帮助理解面试中常见的相关问题。

1.computed和watch的区别是什么?computed是怎么实现缓存的，底层实现原理是什么?2.了解过哪些布局，flex布局说一下,宽高不定的div如何定位在屏幕中间，宽高为0能用flex实现吗?3.cookie/localstorage/sessionstorage有什么区别?4.数组有哪些常用的方法?说说他们的用途?5.列表渲染时为什么要设置 key?他起什么作用?

本专栏系统整理 JavaScript 核心基础、关键原理与高频面试考点，以「问题驱动 + 原理拆解」的方式，对常见但容易混淆的知识点进行集中梳理。内容覆盖 数据类型、作用域与闭包、原型与 this、异步模型（Event Loop / Promise / async-await） 等核心模块，适合作为 日常查阅、阶段性复盘以及前端面试前的系统性回顾索引。