- 博客(35)
- 收藏
- 关注
RSS订阅原创 浏览器渲染原理及性能优化
资源加载→解析成 DOM/CSSOM→构建渲染树→布局计算→绘制像素→合成图层→屏幕展示。前端性能优化的本质，就是减少渲染流程中 “昂贵操作”（回流 / 重绘）的触发次数，让浏览器以最高效的方式完成渲染。
2025-12-09 19:24:35
957
原创 JavaScript Promise，包括构造函数、对象方法和类方法
状态不可逆：Promise 的pending状态一旦转为fulfilled或rejected，就无法再次改变；链式调用本质thencatchfinally均返回新 Promise，这是解决回调地狱的核心；类方法选型resolve（成功）、reject（失败）；all（全成则成）、any（一成就成）；allSettled（等待所有结果）；race（先结束者决定）；错误处理catch能捕获前面所有链式操作的错误，建议每个 Promise 链末尾都添加catch。
2025-12-02 15:07:25
1073
原创 Promise详解：从回调地狱到优雅异步
在实际开发中，我们经常需要处理异步操作链。使用传统回调函数会导致"回调地狱"（回调函数中嵌套回调函数），而 Promise 正是为了解决这个问题而诞生的。
2025-11-30 14:40:08
415
原创 JavaScript运行原理：从引擎到事件循环
代码加载：词法 / 语法分析生成 AST，预编译创建执行上下文；同步执行：调用栈按顺序执行同步代码，创建 / 销毁执行上下文；异步处理：异步操作交给 Web API，完成后回调放入对应队列；事件循环：调用栈为空时，先清空微任务队列，再执行宏任务，循环往复；内存管理：栈内存自动释放，堆内存靠 GC 回收，闭包通过引用保留外层作用域内存。
2025-11-28 13:51:58
1183
原创 执行上下文与作用域链
执行上下文分为全局、函数和 eval 三种类型调用栈按 LIFO 原则管理上下文创建阶段初始化 VO/AO、作用域链和 this执行阶段完成赋值和代码执行作用域链决定变量查找顺序，this 由调用方式决定注意和函数提升的差异。
2025-11-28 13:29:32
623
原创 Vue 作用域插槽
使用v-bind:属性名="数据"（简写:属性名="数据"-- 子组件 List.vue --><template>-- 暴露列表项、索引和激活状态 --></div></div>{ id: 1, name: 'Vue', desc: '前端框架' },{ id: 2, name: 'React', desc: 'UI库' },{ id: 3, name: 'Angular', desc: '全栈框架' }])</script>-- 子组件 Card.vue --><template>
2025-11-21 19:40:20
561
原创 Vue 中 emit 的使用
<!-- 子组件：支持 v-model:title -->\<input\>\</script>\<!-- 父组件 -->emit子组件声明事件 → 触发事件并传递数据 → 父组件监听事件并处理数据。Vue 3 中通过声明事件，支持参数验证，配合语法更简洁；Vue 2 中通过this.$emit实现，用法相对简单。合理使用emit可高效实现组件间协作，结合v-model还能简化双向绑定逻辑。
2025-11-18 12:49:23
1140
原创 前端存储方式
存储容量：单个 Cookie≤4KB，单域名限制 20-50 个生命周期：可通过Expires（绝对时间）或Max-Age（相对秒数）设置，未设置则随浏览器关闭失效传输特性：自动随同源 HTTP 请求发送至服务器，影响网络性能跨域控制：通过Domain（子域名共享）和Path（路径限制）配置。
2025-11-17 12:35:11
648
原创 TypeScript 基础语法
不能实例化，仅用于继承抽象方法必须在子类中实现// 抽象方法（无实现）makeSound(): void { // 必须实现抽象方法TypeScript 的核心是类型系统，通过静态类型检查提前规避错误。基础语法围绕 “类型定义” 展开，包括：基本类型、接口 / 类型别名、函数 / 类的类型约束、泛型等。掌握这些后，可进一步学习高级特性（如映射类型、条件类型等）。
2025-11-17 12:31:44
1734
原创 ElementPlus组件样式引入
在 Element Plus 中，ElMessageElLoading等属于功能性组件（非模板直接使用的 UI 组件），其样式引入需要遵循 Element Plus 的样式方案。适合全局引入 Element Plus 的项目，简单直接。
2025-11-15 11:42:44
390
原创 Vue3：Pinia入门
Pinia 作为 Vue 3 官方推荐的状态管理库，相比 Vuex 具有语法简洁、TypeScript 支持完善以及自动响应式处理等优势。本指南将详细介绍 Pinia 的核心使用方式，包括 Store 创建、状态管理、计算属性和方法调用。在 Vue 3 项目中通过以下命令安装 Pinia：在应用入口文件（如 ）中初始化并注册 Pinia：Store 是 Pinia 的核心单元，包含三个主要部分：Store 实例化状态管理GettersActions多个组件引用同一 Store 时自动
2025-11-15 11:42:35
278
原创 Axios入门
安装并导入 Axios使用简化方法或完整配置发送请求处理响应数据捕获并处理错误掌握这些基础知识后，可以进一步学习请求/响应拦截、全局配置等高级用法。
2025-11-14 20:31:43
652
原创 Node.js入门核心笔记
定义：基于 Chrome V8 引擎的（非编程语言 / 框架）核心特点：单线程（避免多线程资源竞争）非阻塞 I/O（异步处理文件、网络请求等）事件驱动（通过事件循环处理回调）应用场景：后端 API、服务器、命令行工具、桌面应用（Electron）
2025-11-13 10:58:09
362
原创 主题：Webpack5 高级优化
Webpack5 高级优化的核心是 “针对性优化”—— 不盲目堆砌配置，而是根据项目痛点（如包体积过大、构建速度慢、二次加载慢）选择方案：若包体积大：用代码分割（SplitChunks）、Tree-shaking、资源压缩、Module Federation；若构建速度慢：用持久化缓存（Filesystem Cache）、多进程（thread-loader）、ESBuild；若二次加载慢：用 contenthash 缓存、CDN 长期缓存、小图转 Base64。建议优化流程：先通过。
2025-11-13 10:54:34
1271
原创 Vue 基础配置新手总结
/ 1. 引入 defineStore（定义状态模块）// 2. 定义并导出状态模块（第一个参数是模块名，唯一；第二个参数是配置）// 状态（类似组件的 data）username: 'Vue 新手', // 初始值}),// 计算属性（类似组件的 computed，缓存结果）getters: {// 获取用户名的大写形式},// 方法（修改状态，类似组件的 methods，支持异步）actions: {// 登录方法（修改状态）},// 退出方法logout() {})
2025-11-12 17:16:10
856
1
原创 Webpack 基础配置详解
用 Entry 找起点 → 用 Loader 处理非 JS 资源 → 用 Plugin 增强功能 → 用 Output 定义输出 → 用 Mode 切换环境。新手无需一开始掌握所有高级功能，先实现 “能打包 JS、CSS、图片 + 自动生成 HTML + 开发热更新” 的基础配置，再逐步学习代码分割、懒加载、缓存优化等高级内容。
2025-11-12 17:15:53
860
原创 掌握OOP核心：封装、继承、多态全解析
模块 5：原型链 5.1 原型链结构 实例 → 子类原型 → 父类原型 → Object.prototype → null。5.2 查找规则 沿原型链自下而上查找，直到找到或到达 null。模块 6：异常处理 6.1 try-catch-finally。模块 3：原型对象（prototype）3.3 constructor 属性。3.1 原型对象的核心特性。
2025-11-11 14:55:53
900
原创 JS数组操作与DOM核心技巧
div data-id="1" data-name="商品"></div>// 读取// 修改splice()：数组增删核心方法，修改原数组，参数区分「删除（2 个参数）」和「添加（3 + 参数，删除个数为 0）」；DOM 基础：document 是核心对象，先获取 DOM 元素再操作，常用获取方法：querySelector（单个）、querySelectorAll（多个）；元素操作内容：innerText（纯文本）、innerHTML（解析标签）；
2025-11-10 21:45:00
447
原创 JS事件流核心：捕获、冒泡与事件委托
事件流三阶段阻止冒泡：stopPropagation()事件委托：性能优化方案常用事件：load/scroll/resize尺寸获取：offset系列属性。
2025-11-10 09:41:23
411
原创 掌握Date与DOM操作：前端必备技能
日期对象需 new Date() 实例化，支持默认 / 指定时间；getMonth() 0~11、getDay() 0~6，需注意转换；时间戳 3 种方式：date.getTime()、+new Date()、Date.now()（毫秒级）。DOM 节点插入创建：createElement；复制：cloneNode(true)（含子节点）；插入：appendChild（末尾）、insertBefore（指定节点前），需依赖父节点。DOM 节点删除。
2025-11-09 20:45:00
662
原创 BOM操作与本地存储实战指南
BOM（Browser Object Model）即「浏览器对象模型」，通过内置对象控制浏览器窗口、地址栏、历史记录等交互功能，其中 window 是核心全局对象。：浏览器全局对象，所有 BOM 属性和方法都是 window 的属性，调用时可省略 window 前缀。：window.location，管理浏览器地址栏信息，主要用于页面跳转、获取参数和刷新页面。：window.navigator，存储浏览器版本、设备类型等信息。：window.history，管理浏览器访问历史记录。示例：学生分数加5分。
2025-11-08 19:00:00
674
原创 掌握DOM交互：事件监听与this指向实战
事件监听三步骤：获取DOM → 绑定事件 → 编写逻辑事件类型分类：鼠标、键盘、焦点、输入事件对象e.typee.keythis指向函数调用：window方法调用：对象事件回调：DOM元素回调函数：作为参数传递，事件/定时器中常用匿名形式。
2025-11-07 22:00:00
575
原创 正则表达式：从入门到表单验证实战
const reg = /匹配规则// /是正则的定界符，中间为匹配规则也可通过new RegExp('规则')创建（适用于复杂场景）正则核心基本用法：/规则/.test(字符串)判断匹配；边界符^$实现精确匹配（表单验证必用）；量词{n,m}控制长度（如 6-16 位），范围[]限定字符类型（如[a-z]）；修饰符i忽略大小写，g全局替换。表单验证关键change事件：输入完失焦后触发验证，避免实时频繁验证；
2025-11-07 18:45:00
917
原创 JavaScript面向对象编程指南
JavaScript主要数据类型有6种：字符串、数值、布尔、undefined、null和对象。字符串、数值、布尔具有对象特征（属性和方法），因其底层由Object构造函数"包装"实现。JavaScript中函数本质是对象，可直接为其添加属性/方法，称为静态成员。通过构造函数创建的对象称为实例对象，其属性和方法称为实例成员。构造函数是专门用于创建对象的函数，当函数通过。用于创建普通对象的内置构造函数。用于创建字符串的内置构造函数。用于创建数组的内置构造函数。用于创建数值的内置构造函数。
2025-11-06 15:39:10
345
原创 JavaScript 事件知识总结
事件模型由事件对象、事件源和事件处理函数构成，通过HTML属性、DOM属性或addEventListener实现绑定。事件流分为捕获、目标和冒泡三个阶段，常用事件包括鼠标、键盘、表单及窗口事件。事件委托利用冒泡机制优化性能，而不同事件类型各有特点，如click、keydown、submit等，需注意触发条件和属性应用。合理使用事件模型能提升交互体验和代码效率。
2025-10-31 10:02:52
1151
原创 HTML搭建页面的思路(骨架优先策略)翻转盒子案例
《翻转卡片效果的前端骨架优先实现方案》摘要： 本文提出基于骨架优先策略的翻转卡片开发流程。首先搭建HTML基础结构，包括容器、卡片组件和正反面布局；其次构建CSS基础样式层，实现3D透视和布局框架；然后通过核心交互逻辑实现翻转动画效果；最后进行视觉细节优化。该方法通过分阶段开发，先建立功能骨架再完善细节，确保代码结构清晰、易于维护，同时兼顾开发效率和最终效果，适用于各类卡片式交互组件的快速开发。
2025-10-26 12:52:47
434
原创 现代网页布局总结
网页布局作为前端开发的核心技能，直接影响页面元素的组织方式、视觉呈现和用户体验。本文将系统讲解布局的核心原则、主流技术方案、选型策略及实战技巧，帮助开发者全面掌握布局要点。
2025-10-25 18:24:27
727
原创 小兔鲜项目实战总结
【摘要】本文总结了网页布局设计与CSS编写的关键要点：1）设计稿对开发至关重要；2）采用"整体-局部"自上而下的标准流布局方式；3）盒子布局以主轴两端对齐为主，特殊情况需嵌套处理；4）建议将公共样式单独提取为CSS文件以便复用；5）推荐多使用类选择器而非属性选择器；6）强调代码注释的重要性。文章还通过实例说明了如何拆分相关盒子进行布局，并给出了CSS选择器的优化建议。（149字）
2025-10-24 14:53:30
314
原创 HTML基础科技日报综合案例
本文摘要：网页布局分为header、main、footer三部分。header包含H1标题、P文段和无序列表超链接；main集成音频(autoplay/muted/poster)、图片、表格(border)和表单(单选/多选label)；footer设置邮箱和锚点链接。开发要点包括：结构划分、多媒体元素应用、表单交互优化，最后进行素材准备和代码调试。
2025-10-22 11:53:47
154
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人