前端_学习之路-优快云博客

原创前端SEO优化

前端SEO技术通过优化HTML结构（语义化标签、标题层级、图片alt属性）、提升页面加载速度（资源压缩、懒加载、缓存策略）、适配移动端（响应式设计）及优化JavaScript兼容性（SSR/SPA处理）提升网站在搜索引擎中的排名。同时规范元标签、URL结构和内部链接，结合工具监测数据并持续迭代。2025年趋势聚焦核心网页指标、AI分析及边缘计算，需平衡技术优化与用户体验，实现流量与转化双提升。

2025-11-25 10:08:06 686

JavaScript 中的链表是一种由节点组成的动态数据结构，每个节点包含数据和指向下一节点的引用。本文介绍了链表的基本实现，包括节点类(ListNode)和链表类(LinkedList)，详细说明了追加(append)、头部插入(prepend)、按索引获取(getNodeByIndex)、插入(insert)、删除(remove)等核心操作，并提供了将链表转为数组的方法(toArray)和使用示例。链表适用于实现栈/队列、管理动态数据、哈希表冲突处理等场景，特别适合数据频繁变动的需求。

2025-10-20 18:20:03 229

原创微前端--前端架构的模块化革命

微前端不是 “银弹”，而是 “复杂前端项目的架构解决方案”—— 它通过 “拆分巨石应用、解耦团队协作、支持技术栈无关”，解决了大型项目的核心痛点，但同时也带来了 “架构复杂度、性能开销” 等挑战。若项目规模小、团队单一：优先选择传统巨石应用，避免过度设计；若项目规模大、多团队协作：优先选择成熟框架（如 qiankun），降低落地成本；若需模块级复用、且用 Webpack 5：可考虑 Webpack Module Federation；

2025-09-18 17:34:19 1030

原创 Vue--Composition API 的设计思想

摘要： Vue Composition API 是 Vue 3 的核心特性，旨在优化代码组织和复用。其设计理念包括：逻辑组合：通过组合函数聚合分散的逻辑，解决传统 Options API 的代码碎片化问题；类型安全：函数式设计天然支持 TypeScript，提升开发体验；渐进式采用：兼容 Options API，支持逐步迁移；性能优化：减少组件实例开销；跨框架共享：支持逻辑复用（如 Vueuse）。 Composition API 并非替代 Options API，而是为复杂应用提供更灵活、可维护

2025-08-29 16:27:12 428

原创 HTTP、HTTPS 与 WebSocket 详解

本文详细解析了HTTP、HTTPS和WebSocket三种网络协议的核心特性。HTTP是基础请求-响应协议，HTTPS通过SSL/TLS加密增强安全性，而WebSocket支持全双工实时通信。三者均基于TCP，但通信模式不同：HTTP/HTTPS是单向短连接，WebSocket是持久双向连接。HTTP适用于网页浏览和API调用，HTTPS用于敏感数据传输，WebSocket则适合实时交互场景。理解这些协议的特点有助于根据实际需求选择合适的网络通信方案。

2025-08-25 09:56:45 1338 1

原创 Vue3.0性能优化（v-memo指令）

Vue3.0的v-memo指令通过缓存渲染结果优化性能，特别适合处理大型静态列表或复杂组件。它接收一个依赖数组，仅当数组值变化时才重新渲染。使用场景包括：大型静态列表、复杂组件嵌套和条件渲染分支。性能对比显示v-memo能有效减少不必要的重渲染。使用时需注意避免滥用，确保依赖数组精确，并与v-for合理配合。合理使用v-memo可显著提升Vue应用在处理大量数据时的性能表现。

2025-07-18 15:17:52 423

原创 React--Fiber 架构

React 16引入的Fiber架构重新设计了协调算法，以解决大型应用的性能瓶颈。其核心是将渲染拆分为可中断的小任务，支持优先级调度和增量渲染，避免主线程阻塞。Fiber节点包含组件信息、状态和副作用标记，通过双缓存树（current树和workInProgress树）实现高效更新。工作流程分为调度、协调（可中断）和提交（同步）三个阶段，使用链表遍历替代递归，支持时间切片和优先级控制。相比传统算法，Fiber提升了响应速度，支持错误边界，并通过概念示例展示了节点结构和工作循环机制。

2025-07-10 16:43:43 1041

原创浅谈Solana

摘要： Solana 是一个高性能区块链平台，以高速交易（理论 TPS 达 5 万+）和低成本（单笔交易约 0.0001 美元）著称，核心技术包括 PoH（历史证明）共识机制和 Sealevel 并行处理。其生态覆盖 DeFi（如 Serum）、NFT（如 Metaplex）和支付应用，优势在于用户体验友好和开发者支持（Rust/C++）。但面临网络宕机（如 2022 年宕机事件）、监管风险（SOL 被 SEC 列为证券）及以太坊 Layer2 竞争的挑战。SOL 代币用于支付、质押和治理，通胀机制激励节点

2025-07-04 18:23:58 1011 1

原创 B 树和 B+ 树

B树和B+树是两种高效的外存索引结构。B树是一种平衡多路搜索树，所有叶子节点在同一层，节点包含键值和子节点，适合随机访问。B+树是B树的优化版本，其特点是非叶子节点仅存储索引，所有数据存储在叶子节点中，并通过指针连接形成有序链表，更适合范围查询。两者都通过控制节点最小/最大子节点数来保持平衡，减少磁盘I/O。文中提供了JavaScript实现代码，包含节点结构、插入、分裂等核心操作，展示了如何构建和打印这两种树结构。B+树在数据库系统中应用更广泛，因其查询效率更稳定且适合顺序访问。

2025-06-25 10:03:06 912

原创浅谈区块链

区块链是一种去中心化的分布式账本技术，通过密码学、共识机制和区块链式结构确保数据难以篡改。核心技术包括哈希算法、公钥加密和PoW/PoS等共识机制。主要类型有公有链、联盟链和私有链。应用涵盖数字货币、金融、供应链管理等领域，具有去中心化、透明和可追溯等优势。但面临性能瓶颈、高能耗、监管等挑战。未来将优化技术性能、探索跨链融合，并推动绿色区块链发展，持续拓展应用场景。

2025-06-24 17:00:14 3221 1

原创浅谈Web3

Web3 是对下一代互联网的构想，也被称为 “去中心化网络”。它旨在通过区块链、加密货币、智能合约等技术，改变当前互联网（Web2）以平台为中心的集中化模式，让用户重新掌握数据所有权和控制权。

2025-05-29 13:08:38 1806

原创树结构详细介绍（javascript版）

平衡二叉树是一种特殊的二叉搜索树，它的每个节点的左右子树的高度差不超过 1。红黑树是一种自平衡的二叉搜索树，它通过为每个节点分配一个颜色（红色或黑色）并遵循一些特定的规则来保持树的平衡。上面的二叉树实现实际上就是一个二叉搜索树的实现，它提供了高效的查找、插入和删除操作，时间复杂度为 O (log n)。深度优先遍历沿着树的深度遍历树的节点，尽可能深的搜索树的分支。二叉树是一种特殊的树，每个节点最多有两个子节点，通常称为左子节点和右子节点。树的遍历是指按照某种顺序访问树中的所有节点。

2025-05-27 13:57:24 762

原创 React与Vue的内置指令对比

将子组件渲染到 DOM 树的其他位置。帮助发现潜在问题的开发工具。

2025-05-26 17:34:35 1207

原创 React--函数组件和类组件

React 中的函数组件和类组件是两种定义组件的方式，现代 React 开发中，函数组件配合 Hooks 已成为主流，因为它们更简洁、可复用性更高，并且能更好地处理状态和副作用。

2025-05-21 13:13:51 1176

原创字典和哈希表（javascript版）

字典是一种抽象概念，JavaScript 中常用 Object 或 Map 实现。哈希表是一种具体实现，JavaScript 的 Map 底层通常使用哈希表。优先使用 Map：它提供了更完善的 API、类型支持和性能，适合大多数场景。手动实现哈希表：仅在需要控制底层细节（如哈希函数、冲突处理）时使用。在实际开发中，无需严格区分字典和哈希表，根据需求选择合适的实现即可。

2025-05-20 14:48:33 703

原创快慢指针算法（Floyd 判圈算法）

快慢指针（又称龟兔赛跑算法）是一种常用的链表操作技巧，通过两个移动速度不同的指针遍历链表，用于解决链表中环检测、中点查找等问题

2025-05-16 17:28:16 892

原创 javaScript--数据结构和算法

二叉树是一种灵活且强大的数据结构，不同的遍历方式适用于不同的场景。后序遍历常用于释放二叉树的节点内存；冒泡排序是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。二叉树是每个节点最多有两个子节点的树结构，这两个子节点通常被称为左子节点和右子节点。队列是一种先进先出（FIFO）的数据结构，元素从队尾入队，从队头出队。链表是由节点构成的数据结构，每个节点包含数据和指向下一个节点的指针。数组是最基础的数据结构，用于存储一系列有序的数据。

2025-04-27 10:40:01 698

原创弹性布局--Flexbox

flex:1 属于一个简写属性，它是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写，等同于 flex: 1 1 0。弹性布局（Flexbox）的兼容性整体较好，但在不同浏览器及其不同版本中存在一定差异。

2025-04-25 14:23:29 954

原创 javaScript--数组方法

Array.prototype.push()，接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。Array.prototype.pop()，从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。Array.prototype.unshift()，在数组前端添加任意个数选项并返回新数组的长度。Array.prototype.shift()，移除数组中的第一个项并返回该项，同时将数组长度减1。Array.prototype.splice()，向数组的中部插入项。

2025-04-21 14:01:44 601

原创 vue状态管理--Pinia 和 Vuex的区别

Pinia使用 defineStore 函数来定义一个 store，其中 state 是一个返回对象的函数，Pinia 会自动将这个对象通过 Vue3 的 reactive 函数转换为响应式对象。这里 state 返回的 { count: 0 } 对象会被 reactive 处理成响应式对象，对 count 属性的修改会自动触发响应式更新。Vuex在 Vuex 中，state 是一个普通的对象，在创建 Vuex store 实例时进行定义。

2025-04-11 14:28:27 910

原创 Vue--状态管理pinia

getters 会自动追踪其依赖的 state 属性，当依赖的 state 属性发生变化时，getters 会重新计算并更新相关的组件。当使用 defineStore 定义一个 Store 时，Pinia 会利用 Vue 3 的 reactive 函数将 state 函数返回的对象转换为响应式对象。当调用 increment 方法时，this.count 的值会增加，由于 state 是响应式的，任何依赖于 count 的组件或 getters 都会自动更新。

2025-04-08 19:42:57 1406

原创 TypeScript--基础讲解

在 TypeScript 里，你可以为变量、函数参数和返回值等指定类型。常见的基本类型有 number、string、boolean、null、undefined 等。TypeScript 支持类的概念，并且可以使用访问修饰符（如 public、private、protected）。类型断言能够告诉编译器 “相信我，我知道自己在做什么”，它允许你手动指定一个值的类型。元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。在 TypeScript 中，你可以为函数的参数和返回值指定类型。

2025-04-02 10:00:00 465

原创前端工程化--Rollup的使用

集成 Babel，将 ES6+ 代码转换为向后兼容的 JavaScript 代码。将 CommonJS 模块转换为 ES6 模块，以便 Rollup 可以处理。打包完成后，会在dist目录下生成bundle.js文件。用于解析node_modules中的第三方模块。用于压缩和混淆打包后的代码。

2025-04-01 10:00:00 2146

原创 vue--Tree-shaking技术

由于 ES6 模块的导入和导出是静态的，打包工具（如 Webpack、Rollup）在编译时就可以确定哪些模块被使用，哪些未被使用，然后将未使用的模块从最终的打包文件中移除。这里的Vue是一个全局对象，包含了 Vue 的所有功能，即使我们只使用了其中一部分，打包工具也无法将未使用的部分移除。综上所述，Vue 3.x 通过组合式 API 和按需引入的设计，极大地提升了对 Tree-shaking 的支持，使得开发者能够更方便地减少打包文件的体积，优化应用性能。Vue 3.x 的全局 API 也支持按需引入。

2025-03-31 09:45:00 1003

javascript学习第二天（运算符的使用）.md

JavaScript学习第一天.md

index.vue

空空如也