- 博客(45)
- 收藏
- 关注
RSS订阅原创 前端性能优化复习
本文系统梳理前端性能优化体系，围绕五大核心展开：1）指标监测：聚焦LCP、INP、CLS三大核心指标及辅助指标；2）网络优化：通过资源压缩、缓存策略、协议升级提升加载效率；3）渲染优化：减少回流重绘，优化CSS与布局稳定性；4）运行时优化：包括JS执行优化、防抖节流、内存管理及框架专属策略；5）工程化优化：涵盖代码拆分、依赖管理和构建分析。文章提出"加载快、渲染顺、交互稳、体积小、可监控"的优化逻辑，强调通过监控实现持续迭代。最后总结面试高频考点，形成从理论到实践的完整优化闭环。
2026-05-31 22:06:28
413
原创 内存泄露与垃圾回收
文章摘要： 本文系统讲解了垃圾回收（GC）机制与内存泄漏问题。首先介绍了GC的核心原理，包括可达性分析算法和三种主流回收算法（标记-清除、复制、标记-整理）。然后重点分析了内存泄漏的本质——无用对象因引用未断开而无法被GC回收，最终导致内存溢出（OOM）。文章详细列举了6种常见内存泄漏场景：全局变量滥用、定时器未清除、事件监听未移除、闭包滥用、DOM游离引用以及缓存无限累积，并为每种情况提供了具体解决方案。最后推荐使用Chrome开发者工具的内存分析功能进行泄漏排查。全文通过代码示例和原理分析，帮助开发者深
2026-05-24 21:26:11
377
原创 js高级复习
本文系统梳理了JavaScript核心知识点，包括：1）原型与原型链机制，详解构造函数、原型对象及继承原理；2）作用域、闭包及其应用场景；3）this指向规则及修改方法；4）6种继承方式及ES6 class实现；5）事件循环与异步编程演进；6）深浅拷贝实现；7）防抖节流原理；8）垃圾回收机制；9）ES6+新特性；10）数组高阶函数；11）跨域解决方案；12）回流与重绘区别。内容涵盖JS底层原理、常用设计模式及性能优化要点，适合面试复习及知识体系构建。
2026-05-18 11:35:07
504
原创 js的复习（一）
这篇文章系统介绍了JavaScript的核心知识，主要包括以下内容： JavaScript基础概念：作为前端三大核心技术之一，用于实现网页交互功能。 基本语法：包括三种引入方式、变量与常量的声明规则、7种基本数据类型及其转换方法。 运算符与流程控制：详细说明算术、赋值、比较、逻辑等运算符，以及if条件、switch和循环语句的使用。 核心数据结构：数组的操作方法和对象的基本使用，包括创建、访问和常用方法。 函数编程：涵盖函数声明、参数传递、作用域以及ES6箭头函数特性。 常用内置对象：如字符串处理方法、Ma
2026-05-11 11:33:21
355
原创 HTML和CSS的复习2
本文总结了HTML和CSS的核心知识点。HTML部分重点包括：空标签的使用、HTML5新增特性（语义化标签、表单增强、本地存储等）、三种存储方式的区别（localStorage、sessionStorage、cookie）、meta标签的多种用途、表单相关补充知识以及iframe的优缺点。CSS部分涵盖了常用单位（px、%、rem、vw/vh等）、伪类与伪元素的区别与应用、文本溢出处理（单行/多行省略）、以及CSS精灵图的实现原理。文章还特别强调了语义化标签的重要性，指出其可提升代码可读性、SEO优化和无障
2026-05-03 11:23:46
529
原创 html和css的复习（1）
HTML与CSS核心知识点复习摘要： HTML部分： HTML是超文本标记语言，负责网页结构和内容语义化，提升可读性、SEO和无障碍访问 语义化标签如header/nav/main等应正确使用 元素类型：块级(div)、行内(span)、行内块(img)的特性差异 表单提交需name属性，GET/POST方法区别显著 浏览器解析流程：DOM树→CSSOM树→渲染树 CSS部分： 选择器优先级计算规则(!important最高) 盒模型分标准(content-box)和怪异(border-box)两种 浮动问
2026-04-26 11:55:01
480
原创 Web Worker 多线程核心机制
Web Worker 多线程机制解析 Web Worker 是浏览器提供的多线程解决方案，允许创建独立于主线程的后台线程处理耗时计算任务。核心特点包括： 线程隔离：Worker线程与主线程完全独立，互不阻塞 通信机制：通过postMessage/onmessage进行消息传递 使用限制：无法操作DOM，遵守同源策略 适用于大数据处理、复杂运算等CPU密集型任务，能有效避免页面卡顿。开发时需注意： 合理使用线程资源，及时销毁Worker 避免高频数据传输 区分适用场景（适合后台计算，不适合简单操作） 正确使用
2026-04-19 10:27:28
335
原创 SSE的连接指南
SSE（Server-Sent Events）是一种基于HTTP的服务器推送技术，适用于服务端向客户端单向推送实时数据。文章介绍了SSE的核心概念、与WebSocket的区别对比、前端实现代码示例以及高级用法。关键技术点包括数据格式处理、流式数据读取、文本解码和错误处理等。SSE具有轻量级、原生支持、自动重连等优势，适合实时通知、日志流等场景。通过EventSource API，开发者可以快速实现服务器推送功能，同时支持自定义事件类型和断线重连机制。
2026-03-30 10:00:00
385
原创 React入门
组件从创建，更新，卸载的完整周期中，React 会在特定阶段触发预设的钩子函数。可在钩子中执行初始化、数据请求、清理等操作函数式组件：普通 JS 函数，返回 JSX，首字母大写类组件：继承，必须实现render()方法返回 JSX。
2026-03-23 10:45:00
394
原创 大文件上传：秒传、断点续传、分片上传
大文件上传面临网络波动、服务器压力、重复存储等问题，秒传、分片上传和断点续传是三大核心技术。秒传通过文件哈希值校验避免重复传输；分片上传将大文件拆分为小块并行传输，降低单次压力；断点续传记录上传进度，中断后可从断点继续。三者常组合使用，如计算文件哈希后先秒传校验，再分片上传并实时记录进度，实现高效稳定的大文件传输。
2025-12-22 15:10:40
811
原创 浏览器工作原理
摘要 现代浏览器采用多进程架构，包括浏览器进程、渲染进程、GPU进程等，各司其职确保稳定性和性能。从输入URL到页面展示的核心流程包含7个步骤：URL解析与请求发起、服务器响应处理、资源接收与缓存、DOM树构建、CSSOM树生成、渲染树合并、以及最终的布局绘制与合成。其中DOM和CSSOM的解析可能相互阻塞，JS执行会暂停HTML解析。浏览器通过分层绘制和GPU加速优化渲染性能。开发者应注意避免频繁触发重排（回流）和重绘，可通过批量DOM操作、使用transform等优化手段提升页面性能。
2025-12-15 10:57:15
779
原创 ECharts数据可视化使用
ECharts是一款由百度开源的前端数据可视化工具，通过简单配置即可生成专业图表。其核心概念包括容器、实例、配置项、系列和坐标系。文章提供了基础柱状图和饼图的具体实现代码，并总结了常见问题解决方案：容器宽高设置、数据刷新、内存管理和自适应处理。最后归纳了ECharts使用五步骤（安装→容器→实例→配置→渲染）和不同场景的图表选择建议（折线图展示趋势、柱状图对比分类、饼图呈现占比等）。配置项结构主要包含标题、坐标轴、数据系列等核心模块。
2025-12-08 10:00:00
416
原创 动态规划解决问题
本文介绍了动态规划的基本概念和解题方法。动态规划通过将复杂问题拆解为子问题，并存储子问题解来推导最优解。关键要素包括：状态（用数组表示子问题）、状态转移方程（描述子问题间关系）和边界条件（初始化最小子问题解）。以求解两字符串最大公共子串为例，详细说明了如何定义状态、建立状态转移方程（字符匹配时延续子串，不匹配时重置），并通过二维表格记录中间结果。最后给出了Java实现代码，展示如何通过动态规划找到最长公共子串。掌握动态规划需要大量练习积累经验。
2025-12-01 11:41:50
512
原创 Pinia 快速入门
Pinia是Vue的状态管理库，重构了Vuex的核心逻辑，移除了mutation和嵌套modules等繁琐设计。其核心特点包括简化API、独立命名空间、自动类型推断、轻量级体积和兼容Vue2/Vue3。Pinia通过defineStore定义Store，包含state、getters和actions三部分，支持选项式和组合式两种写法。使用时需安装并挂载Pinia实例，通过useStore函数获取Store。可通过storeToRefs解构响应式状态，提供直接修改、$patch和actions三种状态修改方式
2025-11-24 14:57:02
719
原创 OpenAI 简单的集成教程
下面是关于 openai文件的完整集成教程，包含了前端实现和与后端的交互说明这个文件实现了一个简单的 OpenAI API 集成前端界面，用户可以通过该界面发送问题并获取 AI 模型的回复这周仅仅简单学习和了解了OpenAI 简单的集成教程的使用，详细的openai应用以及遇到的问题，看后面在项目中如何使用。
2025-11-17 10:00:00
1012
原创 TypeScript 核心知识点
TypeScript核心知识点总结 TypeScript提供了更严格的类型系统，包括特殊类型如unknown（安全未知）和any（不安全未知）。两种类型的关键区别在于类型检查机制：unknown要求类型确认后才能使用，而any不进行类型检查。 对象类型方面，小写object严格限定非原始类型，而大写Object包含所有继承Object原型的类型。索引签名允许动态添加字符串键属性。 类型声明方式多样，包括接口、类型别名、元组和枚举。类定义可通过参数属性简化写法，抽象类用于定义父类结构。接口用于定义对象和函数结
2025-11-02 11:24:50
769
原创 Vue3的使用
Vue3相比Vue2最大的改进是将Option API改为Composition API，使功能代码更集中、便于维护复用。主要特性包括：1. setup函数作为组合式API入口，替代Vue2的beforeCreate/created钩子；2. ref处理基本类型响应式数据，通过value属性访问；3. reactive处理对象类型数据，支持深层次响应；4. 计算属性需引入computed方法；5. watch监听器需引入watch方法，支持多数据源监听。Composition API通过函数式组织代码，解决
2025-10-26 11:42:11
941
1
原创 Vuex 核心概念与最佳实践
Vuex 是 Vue 的状态管理工具，用于解决多组件共享状态问题。其核心概念包括：State（存储状态）、Getters（计算属性）、Mutations（同步修改状态）、Actions（异步操作）和 Modules（模块化管理）。使用步骤：安装 Vuex → 创建 Store 实例 → 注入根实例 → 组件通过 $store 或辅助函数访问。模块化开发时，通过 namespaced 隔离模块，使用 模块名/方法名 调用。Vuex 实现了状态的集中管理和响应式更新，适合中大型项目开发。
2025-10-19 11:23:44
734
原创 Vue 核心特性详解：计算属性、监听属性与事件交互实战指南
Vue核心特性解析 本文系统介绍了Vue.js的四个核心特性： 计算属性：通过computed实现数据自动计算和缓存，提升性能，适用于依赖其他数据的派生值计算。 监听属性：使用watch监听数据变化，支持深度监听和立即执行，适合处理异步操作和复杂业务逻辑。 事件处理器：通过v-on指令绑定DOM事件，支持参数传递和事件修饰符，简化事件处理逻辑。 特性对比：详细比较了计算属性和监听属性的适用场景、缓存机制等核心差异，帮助开发者合理选择。 这些特性共同构成了Vue响应式系统的基础，掌握它们能有效提升开发效率和代
2025-10-12 10:59:24
1579
1
原创 Vue的初步学习
每个 Vue 应用都需要通过实例化 Vue 来实现。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。data 用于定义属性，实例中有三个属性分别为：site、url、alexa。methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。
2025-09-28 10:53:07
611
原创 node.js的初步学习
node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说， 需要在node.js的环境上进行当JavaScript作为前端开发语言来说，需要在浏览器的环境上进行。
2025-06-09 15:36:59
731
1
原创 封装confirm框
通过事件委托机制，在父容器上监听点击事件，然后根据点击目标的属性或类名来判断是否执行删除操作。这种方式只需一个事件监听器即可处理所有删除按钮。
2025-06-03 08:17:11
456
原创 前端如何实现分页？
本文介绍了前端实现分页的完整方案，包含HTML、JavaScript和CSS三部分。HTML构建了表格结构和分页容器；JavaScript通过异步请求获取分页数据，并动态渲染表格内容和分页导航；CSS优化了分页样式和交互体验。关键点包括：1）前后端页码/每页数量保持一致；2）动态计算页码范围；3）分页按钮状态管理；4）表格数据异步加载。该方案实现了高效的数据分页展示和流畅的用户交互体验。
2025-05-26 21:56:38
1975
原创 修改头像功能
页面核心组件为 yellow - upload，用于图片上传，其下方有 “选择图片” 和 “上传图像” 两个按钮。通过以上步骤，我们成功实现了用户头像修改功能，包括头像回显、图片上传和头像修改，并在整个过程中进行了详细的代码编写和功能处理。头像修改：成功上传图片后，用户点击 “上传头像” 按钮，实现头像的最终修改，并更新服务器上的头像信息。从 pr 中获取用户头像的预览地址，并将其赋值给 IMGULL，使其能正确回显用户头像。头像回显：当用户进入修改头像页面时，应立即显示当前已设置的头像。
2025-05-11 14:40:28
532
原创 Thymeleaf 公共页面抽取
在 Web 项目中，通常会存在一些公共页面片段（重复代码），例如头部导航栏、侧边菜单栏和公共的 js css 等。我们一般会把这些公共页面片段抽取出来，存放在一个独立的页面中，然后再由其他页面根据需要进行引用，这样可以消除代码重复，使页面更加简洁。
2025-04-20 08:22:37
513
原创 Themeleaf复用功能
-- 定义一个简单的头部片段 --><h1>网站头部</h1></div>-- 定义一个带参数的侧边栏片段 --><h2 th:text="${title}">默认侧边栏标题</h2><ul><li>菜单项 1</li><li>菜单项 2</li></ul></div>
2025-04-13 08:08:45
633
原创 thymeleaf的基本语法
在对应的国际化属性文件中，定义如 header.address.city=城市名称 、header.address.country=国家名称 ，就可以根据不同的语言环境显示相应文字。根据表达式结果决定元素是否渲染，当表达式为 true 时，元素会显示在最终生成的页面中；用 #{} 从外部 .properties 文件获取区域文字信息，使用 Key 索引 Value，还可提供一组可选参数。相反，当表达式为 false 时，元素渲染显示；定义链接：可以指定绝对路径或相对路径，还能方便地处理 URL 参数。
2025-04-06 10:58:25
1061
原创 js高级的学习
● 定义与作用：可以将执行上下文看作是代码执行的 “环境”，它记录了代码运行时的各种状态信息，提供了代码执行的环境（包括变量、函数的声明和访问），维护代码执行的状态（如变量的值、作用域链等），并确保代码按照预期的顺序和方式执行。通过将方法和属性定义在函数的原型对象上，所有由该函数创建的实例都可以访问这些共享的成员，避免了在每个实例中重复创建相同的方法和属性，从而节省了内存空间，提高了代码的可维护性和复用性。第二次调用f()，a在3的基础上又自增为4 ，变量a的值会根据fn2的操作持续变化，且不会被释放。
2025-03-30 10:00:00
1774
原创 Es6进阶
当属性值是对象时，源对象中的对象会直接覆盖目标对象中同名的对象属性（实际上是复制引用），后续对这个对象属性内部属性的修改，会同时影响到目标对象和源对象中该属性指向的对象。● 利用 ES6 的类和继承：ES6 引入了类的概念，通过继承可以创建一个新类，该类不仅拥有自己定义的方法，还能继承父类的方法，也可以重写父类方法或添加新方法来扩展功能。● 目标对象与源对象有同名属性：当使用 Object.assign() 合并对象时，如果目标对象和源对象存在相同的属性名，源对象的属性值会覆盖目标对象的属性值。
2025-03-23 11:34:42
1191
原创 es6初步学习
没有自身的this绑定：箭头函数没有自己独立的this值，它的this是继承自外层作用域。在构造函数的机制中，this需要指向新创建的对象来添加属性，但箭头函数无法满足这一点，它的this指向是固定的，不会因为new调用而改变。不能使用arguments变量，如果在箭头函数中使用 arguments，它会引外层函数的 arguments。ES6 允许在大括号里，直接写入变量和函数，作为对象的属性和方法，书写更简洁箭头函数。箭头函数不适合与this有关的回调，事件回调，对象的方法。允许给函数参数赋值初始值。
2025-03-16 11:40:14
624
原创 第二学期第二周
比如说，我们想为我们的 runoob 项目发布一个 “1.0” 版本，我们可以用 git tag -a v1.0 命令给最新一次提交打上（HEAD） “v1.0” 的标签。-a 选项意为"创建一个带注解的标签"，不用 -a 选项也可以执行的，但它不会记录这标签是啥时候打的，谁打的，也不会让你添加个标签的注解，我们推荐一直创建带注解的标签。附注标签存储了创建者的名字、电子邮件、日期，并且可以包含标签信息。命令时，Git 会打开你的编辑器，让你写一句标签注解，就像你给提交写注解一样。或者如果在新的分支上工作。
2025-03-02 11:34:48
799
原创 第二学期第一周
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。选取单选按钮点击元素jQuery 事件方法语法在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件：下一步是定义了点击后触发事件。您可以通过一个事件函数实现：// 动作触发后执行的代码!!});
2025-02-23 11:30:44
930
原创 第十周学习笔记
● 直接调用函数，其实相当于是window.函数，所以this指代window。不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load’事件。加载外部资源（如图片，外联css和js等）加载完毕时触发的事件。函数内部特殊的变量this，代表当前函数运行时所处的环境。只能得到当前的时间戳，前面两种可以返回指定时间的时间戳。触发时间时，会经过两个阶段，分别是捕获阶段和冒泡阶段。作用：弄清楚this的指向，让代码更简洁。可以返回当前时间或指定时间的时间戳。把创建的新的节点放入到指定元素内部。
2024-12-13 21:22:14
784
原创 第八周学习笔记
那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于strentch。设置子项在侧轴上的排列方式，并且只能用于子项的出现，换行的情况，在单行下无效果。该属性是控制子项在侧轴上的排列方式，在子项为单向的时候使用。
2024-12-01 11:09:04
697
原创 第七周网页制作的笔记
1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。概念：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框的边缘。继承的权重是0，该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。background-color：颜色值；
2024-11-24 11:12:11
1704
原创 第六周网页制作笔记
主要使用场景：美化网页，布局页面的HTML的局限性html只关注内容的语义CSS网页的美容师css是层叠样式表的简称，又称css样式表css也是一种标记语言css主要设置html页面内的文本内容（字体，大小，对齐方式等），图片的外形以及版面的布局和外观显示样式。
2024-11-17 11:16:54
1077
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人