- 博客(134)
- 收藏
- 关注
RSS订阅原创 函数耗时情况检测方案
首选方案：开发环境用 console.time 快速调试，性能优化阶段用 DevTools 火焰图分析。对于需要长期监控的关键函数，推荐接入 Web Vitals 性能监测系统。禁用缓存（Network面板 → Disable cache）打开开发者工具 → Performance 面板。查看 Bottom-Up 标签获取精确耗时占比。适用场景：开发环境快速定位瓶颈函数。点击录制按钮 🔴 → 执行目标函数。查找红色三角标记（长任务）毫秒级精度（可达微秒）
2025-07-24 22:45:41
304
原创 前端如何做安全策略
后端生成csrfToken存入Session，前端在请求头携带：axios.defaults.headers.common[‘X-CSRF-Token’] = getTokenFromCookie();设置敏感Cookie：Set-Cookie: sessionId=abc123;使用package-lock.json或yarn.lock。持续监控（使用Sentry等工具实时捕获异常）部署WebAuthn生物认证。
2025-07-24 17:55:45
317
原创 get 请求和post 请求的区别
RESTful API设计遵循：GET=读取，POST=创建，PUT=更新，DELETE=删除。📏 受URL长度限制（浏览器通常2KB~8KB）✏️ 用于修改数据（如登录、支付、表单提交）🔍 用于获取数据（如加载网页、搜索查询）参数附加在URL末尾（查询字符串）修改数据用 POST（如用户注册）✅ 可传输文件/大型JSON数据。查询数据用 GET（如搜索过滤）参数封装在请求体（body）中。
2025-07-24 00:08:07
127
原创 如何中断promise的执行
以上方法仅阻止后续.then/catch触发，但异步操作本身仍在执行（如setTimeout）。若要完全终止，需在异步任务内部添加检查逻辑（如示例中的 isCancelled 或 signal.aborted）。，它是现代JavaScript中断异步操作的标准实践。
2025-07-23 16:49:57
322
原创 set、map 比数组，json 对象的性能更好原因分析
当处理超过 1000 项数据时，Set/Map 的优势会指数级放大。在框架开发（如 Vue/React 的虚拟 DOM）和数据处理库中，这种性能差异直接决定了用户体验的流畅度。Set 和 Map 在特定操作上比数组和普通对象（JSON 对象）性能更好的根本原因在于其底层实现和数据结构设计。VS 对象：对象虽用类似结构，但需处理原型链和键转换。VS 数组：数组查找需遍历（最坏情况 O(n)）3、小数据量操作（<1000项）：差异可忽略。1、有序数据：数组索引访问更直接。：不像对象需处理原型/键转换。
2025-07-17 20:59:56
354
原创 compose、 pipe 组合函数实现
compose 是函数式编程的核心工具，用于将多个函数组合成从右向左执行的管道。实现方式：从左向右的 pipe（与 compose 方向相反）pipe 用于将多个函数组合成从左向右执行的管道。reduceRight 从右向左遍历函数数组；数据流向：前一函数的输出 = 后一函数的输入。参数要求：除最右函数外，其它函数应接收单参数。函数顺序：从右向左执行（数学函数组合标准）Ramda 对应实现：R.compose。每个函数的输出作为下一个函数的输入；纯函数要求：所有组成函数应为纯函数。（函数式编程核心工具）
2025-07-15 23:31:59
332
原创 函数柯里化详解
是一种高阶函数技术，它将一个多参数函数转换为一系列单参数函数的链式调用。：将一个函数 f(a, b, c) 转换为 f(a)(b)© 的形式。：每次调用只接收一个参数，返回新函数或最终结果。**本质：**通过闭包保存参数，实现分步传参。配合TypeScript使用增强类型安全。：分阶段收集参数，在需要时触发计算。：创建特定计算器（如税率计算器）：固定常用参数，生成专用函数。：生成带预设样式的组件工厂。：创建可管道化的函数单元。优先用于参数明确固定的场景。：基于配置创建定制函数。：创建可复用的验证规则链。
2025-07-15 22:24:35
296
原创 解决 Promise 地狱问题
Promise组合工具：使用Promise.allSettled()处理部分成功场景。优点：代码结构清晰，错误处理集中，近似同步代码的阅读体验。优点：避免嵌套缩进，通过返回新Promise保持链式结构。使用统一的错误处理机制（如顶层的catch）用Promise.all()优化并行请求。复杂场景考虑RxJS等响应式编程库。函数拆分：将复杂操作拆分为小函数。避免超过3层的Promise嵌套。优先使用async/await。
2025-07-14 16:09:18
161
原创 说说 Vuex 与 Pinia 的区别？
Pinia 取消 mutations，允许在 actions 中直接修改状态，无需 commit/dispatch，直接调用函数即可。Pinia 无需命名空间前缀（user/login → userStore.login()）精简了 Vuex 的冗余概念（去除了 mutations、modules 等）完美契合 Vue 3 的 Composition API 和响应式系统。Pinia 是 Vuex 的现代进化版，由 Vue 核心团队维护。⚠️ 需要兼容旧版浏览器（Pinia 依赖 Proxy）
2025-07-03 22:08:04
424
原创 买卖股票的最佳时机--js 算法
给你一个整数数组 prices，其中 prices[i] 是第 i 天股票的价格（美元），以及一个整数 k。你最多可以进行 k 笔交易，每笔交易可以是以下任一类型：普通交易：在第 i 天买入，然后在之后的第 j 天卖出，其中 i < j。你的利润是 prices[j] - prices[i]。给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。给你一个整数数组 prices 和一个整数 k ，其中 prices[i] 是某支给定的股票在第 i 天的价格。
2025-07-02 18:47:24
555
原创 react 状态改变引发视图频繁更新，怎么优化
将状态下沉到更小的组件中，避免全局状态触发大范围更新：// 错误：父组件管理状态，导致所有子组件重新渲染。使用 Performance 面板 录制并分析组件渲染耗时。Highlight updates 功能可视化重渲染组件。虚拟滚动（Virtualization）原子化状态管理，按需订阅更新。使用记忆化选择器避免冗余计算。
2025-06-17 22:11:10
777
原创 算法--js--组合总和
先对数组排序，当发现 candidates[i] > remain 时直接终止循环，避免无效递归。start 控制遍历起点，避免重复组合（如 [2,3,2] 和 [3,2,2]）最坏情况为 O(2^n)，但题目保证组合数少于 150 个，实际性能优异。递归时传递 i 而非 i+1，允许元素被重复选取。• 通过 start 参数避免重复组合。remain 表示剩余需要凑的值。• 通过排序和剪枝减少递归深度。path 记录当前组合路径。• 深拷贝避免引用问题。
2025-05-22 11:33:18
387
原创 算法--js--电话号码的字母组合
N 为输入中对应3字母的数字个数（2,3,4,5,6,8）例如输入"279"的复杂度为 O(3×4×4) = 48。内存复用：每次循环复用 temp 数组，避免内存碎片。动态扩展组合：通过迭代而非递归，减少调用栈开销。即时计算：无需预计算所有可能性，逐层生成结果。K 为最终结果的数量，与时间复杂度相同量级。M 为对应4字母的数字个数（7,9）多数字时通过笛卡尔积逐层扩展组合。输入为空字符串时直接返回空数组。单个数字时直接返回对应字母列表。
2025-05-21 16:39:08
251
原创 算法-js-最大矩形
时间复杂度：O(mn)，每行处理需要O(n)时间。空间复杂度：O(n)，只需存储当前行的高度数组。每个位置的高度表示：从当前行向上连续1的个数。遇到0时高度重置为0（无法形成矩形）比暴力解法的O(m²n)效率提升显著。复用柱状图算法保证每行处理的效率。2、对每行高度应用柱状图算法。
2025-05-18 22:02:23
271
原创 算法-js-柱状图中最大的矩形
维护一个存储柱状图索引的栈，保证栈中索引对应的柱子高度单调递增。空间复杂度：O(n)，最坏情况下需要存储所有元素的索引。时间复杂度：O(n)，每个元素最多入栈和出栈一次。当遇到较小高度时，弹出栈顶元素作为当前高度。计算宽度：当前索引 - 新栈顶索引 - 1。在数组首尾添加0作为边界哨兵。面积计算：高度 * 宽度。避免处理空栈的特殊情况。确保所有柱子都会被计算。
2025-05-18 19:02:09
252
原创 算法—插入排序—js（小数据或基本有序数据）
将数组分为“已排序”和“未排序”两部分，逐个将未排序元素插入到已排序部分的正确位置。：平均 O(n²)，最优（已有序）O(n)
2025-04-20 16:50:51
318
原创 算法—快速排序—js（大规模数据，通用场景）
通过选定基准值（pivot），将数组分为“小于基准”和“大于基准”的两部分，递归排序子数组。：平均 O(n log n)，最差 O(n²)：O(log n)（递归栈）
2025-04-20 15:56:12
163
原创 算法—冒泡排序—js（教学示例、小数据）
冒泡排序是一种简单的排序算法，通过重复遍历数组，比较相邻元素并交换位置，使较大的元素逐渐“浮”到数组末尾。：平均 O(n²)，最优（已有序时）O(n)：稳定（相同元素相对位置不变）：O(1)（原地排序）
2025-04-20 15:42:54
171
原创 算法——BFS
JavaScript 中直接用数组的 shift() 效率较低，可优化为维护一个指针（类似双端队列）。是一种用于遍历或搜索树/图的算法，逐层访问节点，适合解决最短路径、层级遍历等问题。：根据问题场景，可以用 Set、哈希表或直接修改原数据（如标记为已访问）。：用 visited 集合（或标记）记录已访问的节点，防止死循环。：从起点开始，先处理当前层的所有节点，再处理下一层。3、扩散类问题（如病毒传播模拟、社交网络层级关系）：用队列（先进先出）保存待处理的节点。2、层级遍历（如二叉树层序遍历）
2025-04-14 18:19:52
330
原创 js 两个对象怎么对比是否相同
• 简单数据 → JSON.stringify• 生产环境复杂对象 → lodash.isEqual• 高频次性能敏感场景 → fast-deep-equal• 特殊需求（如不可变数据） → 手写递归 + 定制逻辑。
2025-03-07 19:01:00
604
原创 js 常用的几种 图片下载的功能总结
几种常用的图片下载及会遇到的问题1、同源路径直接用a标签+download 属性：<a href="https://baidu.com" download="百度.jpg">下载</>或者用blob文件流的形式：// 获取图片文件流download (row) { const imgUrl = row.fileUrl let xhr = new XMLHttpRequest() xhr.open('get', imgUrl, true) // 至关重要
2022-03-30 22:20:28
1538
原创 vue -- 页面过多热更新加载过慢解决方案
解决方案：babel-plugin-dynamic-import-node安装：npm install babel-plugin-dynamic-import-node --save-dev使用配置：1、如果你使用的是：.babelrc就在.babelrc文件中添加：2、如果你使用的是：babel.config.js修改文件module.exports = { presets: [ '@vue/app' ], env: { development: { plugins
2021-09-01 15:23:15
2315
原创 根据id找节点
场景：给出一个节点树，根据id找出对应的节点节点树：let tree = { id: 1, children: [ { id: 2, children: [ {id: 3}, { id: 5, children: [ {id: 6} ] }, null ] }, { id: 4 }, null ]}// 写一个方法function getNode(root, id) {/
2021-08-05 12:19:19
876
原创 一个简单的抽奖函数
假定场景：写一个方法，返回 1，2，3，4 表示四种奖品，这四种奖品的概率分别是 5%，15%，25%，55%；思路，利用Math.random()的随机数，然后将四种奖品填满一个100长度的数组容器中，随机抽取；上代码：function getReward() { let arr1 = new Array(5).fill(1); let arr2 = new Array(15).fill(2); let arr3 = new Array(25).fill(3); let arr4 = new
2021-08-05 09:26:08
608
原创 axios请求-- 取消上一次的请求
问题场景：很多时候，我们的提交按钮联系点好多次，或者我们的change事件联系触发好多次，但是可能有的请求返回错误，有的有数据，接着，在接口请求超时或者是返回成功的时候，就会出现页面上可能一直在弹出请求失败的消息，而下拉中缺有数据的尴尬请求。为了解决这个问题，我们需要对axios进行处理：引入axiosimport axios from 'axios'； const CancelToken = axios.CancelToken;在全局先定义一个cancle变量window.cancle=nu
2021-08-02 11:33:19
928
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人