yi_shi__的博客

本文深入解析JS调用栈机制，从基础概念到实际应用。调用栈是JS执行函数的核心数据结构，采用"先进后出"原则管理执行上下文。文章通过餐厅取餐台的生动类比，结合代码示例演示调用栈的压栈/弹栈过程，并详细讲解执行上下文的三大组成部分：变量环境、词法环境和this绑定。还介绍了使用Chrome DevTools调试调用栈的实用技巧，以及解决栈溢出问题的三种方法（终止条件、迭代替代、尾递归优化）。最后解答了调用栈与JS单线程的关系，帮助读者全面掌握这一重要概念，提升代码调试和面试表现能力。

本文介绍了Promise和async/await的简易实现与实战应用。通过手写MyPromise类实现异步链式调用，并模拟用户信息加载流程展示其优势。async/await基于Generator函数和自动执行器，使异步代码更接近同步风格，提升可读性。核心原理在于：Promise通过状态管理和链式调用解决回调地狱，而async/await则利用Generator的暂停/恢复特性实现异步流程控制。这两种方式都是现代JavaScript处理异步操作的重要工具，理解其底层原理有助于开发者更高效地编写异步代码。

本文系统解析CSS高级知识点，涵盖Flexbox弹性布局、Grid网格布局及响应式适配等核心技术。详细讲解flex-grow/shrink/basis计算逻辑和嵌套布局应用，通过实战案例演示如何实现复杂二维布局。同时介绍Grid布局的网格线定位和fr单位比例分配，提供可直接复用的代码示例，帮助开发者掌握CSS布局原理并应用于实际项目。

本文介绍了一个基于Canvas和TailwindCSS的前端图片加水印工具，具有以下特点： 技术栈：使用HTML5 Canvas实现核心绘图功能，TailwindCSS构建响应式UI，原生JavaScript处理交互逻辑 核心功能： 支持点击/拖拽上传图片 高度自定义水印（文字、位置、透明度、颜色、旋转角度） 实时预览对比原图和水印图 本地下载处理后的PNG图片 优势： 纯前端实现，保护隐私无需上传服务器 轻量高效，兼容性好 提供完整可直接运行的源码 文章包含详细的技术选型说明、功能展示和完整的HTML代码

本文介绍了一个基于前端技术的离线笔记工具实现方案，采用localStorage+IndexedDB双存储架构。localStorage负责快速存取当前笔记数据（约5MB容量），而IndexedDB则用于存储历史版本（无明确容量限制），既保证了性能又实现了版本回溯功能。工具支持笔记的创建、编辑、删除和版本管理，核心代码展示了存储初始化、CRUD操作以及双存储协同机制，如自动备份旧版本到IndexedDB、内容变更检测等。该方案适合需要离线使用且注重数据安全的场景，代码简洁可直接复用。

本文探讨了前端工程化中语义化标签和自定义属性的最佳实践。语义化标签不仅提升代码可读性，更是工程化的基础，通过分层明确的结构契约（如<header>/<main>/<footer>）、ARIA属性和模块化标记（data-module）实现可维护性和可访问性。在组件化开发中，语义化标签形成统一的结构规范（如商品卡片使用<article>），而自定义属性（data-*）则通过规范的命名体系（如data-goods-id）实现DOM与逻辑层的高效通信。文章提供了电商首

前端架构学习路线总结 本文系统梳理了前端架构师成长路径，分为四个阶段： 基础巩固（1-3个月） 深入HTML5/CSS3/JS核心原理 掌握React/Vue框架设计思想 理解浏览器渲染机制与性能优化 工程化落地（4-6个月） 掌握Webpack/Vite构建工具 实现组件化开发与规范化流程 性能监控与优化方案实践 架构设计 微前端/SSR等架构模式 技术选型与系统设计能力 综合能力 跨端方案与全栈视野 每个阶段均包含具体知识点、学习目标和实践验证，形成可执行的前端进阶体系。