- 博客(65)
- 收藏
- 关注
RSS订阅原创 前端性能优化
需注意：优化需以数据驱动，通过 Chrome DevTools Performance 面板和 Lighthouse 审计结果针对性实施。在前端性能优化中，需贯穿开发、打包、部署和浏览器运行全流程。
2025-04-01 07:53:20
558
原创 JavaScript 数组和字符串方法详解
数组方法是操作数组的核心工具，分为。（字符串不可变），返回新字符串。默认只替换第一个匹配项，需用正则。），字符串方法永不修改原数据。：前者修改原数组，后者不修改。数组方法可能修改原数组（如。
2025-03-05 21:36:59
321
原创 微前端框架 Qiankun 的应用及问题分析
Qiankun 支持主应用与子应用使用不同技术栈（如 Vue、React、Angular 等），通过 HTML Entry 方式接入子应用，无需深度改造子应用即可实现集成，降低了技术迁移成本28。例如，主应用使用 Vue2，子应用可独立使用 Vue3 或 React，实现渐进式重构59。支持子应用静态资源预加载，并通过 Fiber 模式（类似 React）优化 JS 执行性能，减少首屏白屏时间28。插件，可绕过原生限制，支持 Vite 子应用的集成。
2025-03-03 15:39:26
1189
原创 vue精简面试题
减少直接操作真实 DOM 的性能开销，实现跨平台渲染（如 SSR、Native）。对数据对象的每个属性进行递归劫持（Getter/Setter），通过。在下次 DOM 更新循环结束后执行回调函数，用于获取更新后的 DOM。：轻量级的 JavaScript 对象，描述真实 DOM 结构。操作对象属性，无需递归遍历，天然支持动态新增/删除属性。：标记动态节点类型（如文本、class），跳过未变化部分。：在 Getter 中收集依赖（如模板中的变量）。解决了 Vue 2 的监听限制，性能更优。
2025-02-27 14:13:20
659
原创 父子组件事件冒泡和捕获的顺序
阶段触发事件执行顺序典型场景捕获阶段父组件 → 子组件权限拦截、埋点统计冒泡阶段onClick子组件 → 父组件常规交互逻辑（如提交表单）
2025-02-25 13:44:00
622
原创 父组件用的是原生监听，子组件用的是onClick，子组件添加了stopPropagation还是没有阻止传播
优先统一使用 React 事件onClick）避免冲突。混合使用原生事件时，需在子组件中通过 e.nativeEvent.stopImmediatePropagation()阻止原生事件传播。若父组件事件绑定在捕获阶段，需在子组件中处理。
2025-02-25 10:55:56
1031
原创 父组件添加事件监听，子组件也有单独的点击事件，怎么避免点击子组件触发父组件
通过 e.stopPropagation()可以阻止事件冒泡到父组件。这是解决父子组件事件冲突的标准方案，适用于大多数场景。如果遇到复杂情况（如第三方库或原生 DOM 事件），再考虑其他扩展方法。
2025-02-25 10:48:05
348
原创 Vue的双向数据绑定和React的单向数据流在处理对象数组时的行为
Vue：双向数据绑定使得直接修改数组中的对象时，索引地址不会变化，Vue 会自动更新视图。React：单向数据流要求每次更新状态时都创建一个新的数组或对象，这会导致索引地址的变化，React 通过key属性来跟踪列表中的元素。这两种机制各有优缺点，选择哪种方式取决于具体的应用场景和开发者的偏好。
2025-02-19 19:29:32
495
原创 推荐两个比较好用的流程图js库
React Flow 和 Logic Flow 是两个用于构建流程图的 JavaScript 库，适用于不同的场景和需求。
2025-02-17 11:21:53
492
原创 微信小程序性能优化
微信小程序的性能优化涉及多个方面，包括减少setData的调用频率和数据量、合理控制组件渲染、优化图片和 WXML 结构、使用分包加载、减少不必要的网络请求和计算任务等。通过综合运用这些策略，可以显著提升小程序的性能和用户体验。
2025-02-16 17:42:32
669
原创 Linux常用指令
这些命令是 Linux 系统中最常用的基础命令，掌握它们可以帮助你高效地进行系统管理和文件操作。- 实时显示系统进程和资源使用情况。- 显示目录或文件的磁盘使用情况。- 创建空文件或更新文件时间戳。- 移动或重命名文件/目录。- 查看文件开头/结尾部分。- 显示网络连接、路由表等。- 以超级用户权限执行命令。- 显示磁盘空间使用情况。- 显示或配置网络接口。- 显示当前工作目录。- 分页查看文件内容。- 显示内存使用情况。
2025-02-14 10:51:51
378
原创 前端职业规划
前端开发的职业规划可以从初级开发者起步，逐步成长为技术专家、架构师或管理者。未来，前端开发者还可以探索新兴领域（如 Web3、AI、元宇宙），拓展职业发展的可能性。无论选择哪个方向，持续学习、积累经验和提升软技能都是成功的关键。
2025-02-13 21:55:10
759
原创 React VS Vue
特性ReactVue核心定位库（专注于 UI）框架（一体化解决方案）学习曲线中等较低模板语法JSXHTML 模板状态管理Context API、Redux 等Vuex、Pinia路由Vue Router性能虚拟 DOM，手动优化虚拟 DOM，自动优化开发体验灵活，依赖工具链开箱即用，单文件组件适用场景大型、复杂应用中小型、快速开发社区与就业全球最大，岗位需求多增长迅速，亚洲流行选择 React 还是 Vue 取决于项目需求、团队经验和个人偏好。
2025-02-13 21:48:37
1307
原创 nextjs的基础了解
Next.js 允许你在 `pages/api` 目录下创建 API 路由，这些路由会作为服务器端 API 端点。- [Next.js GitHub 仓库](https://github.com/vercel/next.js)- `pages/posts/[id].js` 对应动态路由 `/posts/1`, `/posts/2` 等。- `pages/about.js` 对应 `/about`你可以通过 `/api/hello` 访问这个 API。- `pages/index.js` 对应 `/`
2025-02-12 18:50:39
424
原创 浏览器相关面试题[2]
**协商缓存**：通过`Last-Modified`和`ETag`头实现，浏览器会向服务器发送请求，服务器根据资源是否变化决定返回304（未修改）或200（新资源）。- **强缓存**：通过`Cache-Control`和`Expires`头实现，浏览器直接从本地缓存读取资源，不会发送请求到服务器。- **JavaScript**：`Promise`在IE中不支持，可以使用Polyfill（如`core-js`）来解决。
2025-02-12 12:23:41
304
原创 自定义请求hooks扩展
/ 创建 AbortController。// 返回请求结果、加载状态和错误信息。// 依赖项：url 和 options 变化时重新执行。// 组件卸载时取消请求。
2025-02-12 08:46:51
493
原创 【无标题】前端面试题AI版
语义化标签是指用有意义的标签来描述内容结构，例如 `<header>` 表示页眉，`<nav>` 表示导航，`<article>` 表示文章内容等。- `Promise` 是一种处理异步操作的对象，而 `async/await` 是基于 `Promise` 的语法糖，使异步代码看起来像同步代码。- 表单增强（如 `input` 的 `type` 新增 `email`、`date`、`range` 等）- `display` 为 `inline-block`、`table-cell`、`flex` 等。
2025-02-12 07:56:11
281
原创 前端10道浏览器面试题
通过`Last-Modified`/`If-Modified-Since`和`ETag`/`If-None-Match`实现。2. **CSS前缀**：使用工具（如Autoprefixer）自动添加浏览器前缀（如`-webkit-`、`-moz-`）。2. **使用CSS3动画**：使用`transform`和`opacity`等属性，这些属性不会触发重排。6. **减少重排和重绘**：避免频繁操作DOM，使用`transform`和`opacity`。如何避免不必要的重排和重绘？
2025-02-11 20:07:13
433
原创 IntersectionObserver（无线滚动，懒加载）
IntersectionObserverEntry 对象包含了目标元素与祖先元素或视口的交集变化信息，如 isIntersecting （表示目标元素是否与视口或祖先元素相交）。- observer ：即当前的 IntersectionObserver 实例，在回调函数中可以使用它来停止观察某个元素（如 observer.unobserve(element) ）。当该元素进入或离开视口（或指定的祖先元素）时，会触发 IntersectionObserver 的回调函数。// 目标元素进入视口时的操作。
2025-02-11 19:13:01
392
原创 forwardRef
在这个例子中，使用 `useRef` 钩子创建了一个 `ref`，然后将这个 `ref` 传递给 `FancyInput` 组件。调用 `handleClick` 函数时，通过 `ref` 获取到 `FancyInput` 内部的 `input` 元素并使其获得焦点。这个组件接收 `props` 和 `ref` 作为参数，并将 `ref` 转发给内部的 `input` 元素。在这个父组件中，我们可以使用 `ref` 调用 `FancyInput` 组件中定义的 `focus` 和 `clear` 方法。
2025-02-11 16:47:34
486
原创 react中无法获取最新的redux值
与此同时，子组件 B 设置了 Redux 中的状态，父组件的对象函数中使用 Redux 的状态值进行判断，但最终函数获取到的始终是初始化时的 Redux 状态值。5. 确保函数使用最新的 Redux 状态值：由于 reduxValueRef.current 始终保持最新的 reduxValue，因此无论何时调用 objRef.current.func 时，函数都会获取到最新的 Redux 状态值。通过在函数中使用 reduxValueRef.current 可以确保函数始终使用最新的 Redux 状态值。
2025-01-22 17:17:56
264
原创 H5开发的视频语音识别分析播放记录
这些还好，让人头疼的是兼容问题，最让人头疼的是没有测试机，我用的安卓，周边也用到都是小米系列，领导倒是用的ios。
2024-10-17 16:02:36
541
原创 table组件中表格列无内容高度继承问题
需求是表格在线编辑，使用的表格组件遇到一些内容为空的td，点击事件无法触发到，因为元素高度为0；想出一种解决方案，但是较为麻烦，就是给所有的td都固定添加一个容器，样式固定控制，但是在遇到一些超标的需求就无法实现，搜索到的第二种：就是在给td元素上添加一个属性height：1px;然后子元素高度都是100%；具体为什么不知道，但是出奇的好用
2024-09-04 16:23:18
197
原创 前端做文件导出怎么在浏览器网络请求中不显示
XHR请求是一种在浏览器中发送HTTP请求的技术，它允许客户端（浏览器）通过JavaScript代码向服务器发送请求并获取服务器返回的数据，而无需刷新整个页面。然而，浏览器网络请求中显示的是所有发出的HTTP请求及其响应，包括文件导出的请求，这是浏览器正常工作的机制，因此无法直接让文件导出的请求在浏览器网络请求中不显示。总之，虽然无法直接让文件导出的请求在浏览器网络请求中不显示，但可以通过上述措施来减少其可见性或提高其安全性。然而，需要注意的是，这些方法都有其局限性和潜在的风险，因此在实施时需要谨慎考虑。
2024-08-28 10:08:04
439
原创 微信小程序开发中，如果页面跳转没有反应
尝试将跳转逻辑放在其他适当的位置，如用户点击事件或页面加载完成后的延时函数中。在微信小程序开发中，如果页面跳转没有反应，可能是由多种原因导致的。等非关闭当前页面的跳转方法都受到页面栈大小的限制（默认为10个页面）。虽然页面跳转通常不受网络影响，但确保你的网络连接正常，特别是当页面跳转涉及到网络请求时。确保你的微信开发者工具是最新版本，有时候旧版本的开发者工具可能存在一些bug。确保你使用的跳转路径（URL）是正确的。来关闭所有页面并跳转到新页面，或者检查并优化页面栈的使用。例如，如果你的页面路径在。
2024-08-09 17:53:41
2704
原创 在 Vue 3 + Vite + TypeScript 项目中，如果你在开发阶段运行没有问题，但在打包时遇到异常
在 Vue 3 + Vite + TypeScript 项目中，如果你在开发阶段运行没有问题，但在打包时遇到异常，这通常是因为开发环境和生产环境之间存在一些差异，比如代码优化、打包插件的行为、环境变量等。通过这些方法，你可以在开发阶段就尽可能多地捕获和修复问题，从而减少打包时的异常和错误。
2024-08-06 10:26:06
556
1
原创 输入框输入一个字符就会失去焦点的问题
但是遇到了另外一个：tabs自定义label，要求能够双击label无感修改属性，都是泪啊，自信过头了，没测试，样式改了好大会，使用的时候遇到这个问题呜呜呜呜，第二时间想到是不是name和要改的属性有关系，审查代码，嚯~~还真是，开开心心的选择了用索引加黑猫警长作为name，准备就绪，调试，双击，聚焦，输入。。。气的我一拍桌子，旁边同事痛叫了一声~你拍我手了卧槽！！！。。。。。。
2024-04-03 16:47:27
540
原创 vue2 和vue3 响应式原理的对比
原理很简单，当用户使用这些方法查找元素时，先去响应式对象中查找，如果没找到，则再去原始值中查找。Vue3 对数组实现代理时，用于代理普通对象的大部分代码可以继续使用，但由于对数组的操作与对普通对象的操作存在很多的不同，那么也需要对这些不同的操作实现正确的响应式联系或触发响应。Object.defineProperty 也可以实现对数组的监听的，但因为性能的原因 Vue2 放弃了这种方案，改由重写数组原型对象上的 7 个能操作数组内容的变更的方法，从而实现对数组的响应式监听。
2024-03-19 09:09:46
459
1
原创 Go语言的常用内置包
os 包提供了不依赖平台的操作系统函数接口，设计像 Unix 风格，但错误处理是 go 风格，当 os 包使用时，如果失败后返回错误类型而不是错误数量。net/http 包提供 HTTP 相关服务，主要包括 http 请求、响应和 URL 的解析，以及基本的 http 客户端和扩展的 http 服务。它主要的任务是对 os 包这样的原始的 I/O 进行封装，增加一些其他相关，使其具有抽象功能用在公共的接口上。bufio 包通过对 io 包的封装，提供了数据缓冲功能，能够一定程度减少大块数据读写带来的开销。
2023-09-06 16:47:07
210
原创 node版本管理工具-nvm
不同的项目可能需要不同版本的 node.js 和 npm（node 包管理器），例如，最近我需要开发的项目一个基于12.22.7版本的node，一个则基于16.X以上的版本，为了切换方便，我便学习安装了nvm。检查环境变量，将node相关的配置都删掉，环境变量打开方式：右键我的电脑->属性->高级->环境变量-> 用户变量的Path删除->系统变量的NODE_PATH里的node删掉。删除node的安装目录，默认是C:\Program Files\nodejs，也可能在其他盘，这取决于安装时的选择。
2023-07-19 10:21:08
1360
转载 vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）
是html5引入的API,它允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.vue父页面（嵌入iframe的页面）在vue中要使用iframe上的postMessage,首先应该获取到iframe实例，有以下几种方式width:100%;margin:0;border:0;将iframe的window窗体存储至data对象中会出现跨域报错。
2023-05-04 10:06:20
668
1
转载 vue页面嵌套iframe页面传值、调用、首次传值获取不到、有缓存数据问题
infodata.ter_user_name : ""// 客户姓名。//通过.contentWindow.postMessage(data,"*")向iframe子组件传值。// 'dest': infodata.user_mobile, // 手机号+0。'dest': "13455955635", // 手机号+0。'stationId': '69999', // 写死。'loginId': '17999', // 坐席工号。//获取iframe元素。// 监听用户关闭对话框,执行签出操作。
2023-05-04 09:56:16
2417
转载 Node.js文件操作1.1 读取文件1.2 写入文件1.3 修改文件1.4 删除文件2
所以这里田辛老师提示大家尽可能使用系统库来操作文件系统，包括拼装路径操作，常见的，例如使用path.join()方法来生成跨平台的文件路径，使用os.EOL来获取跨平台的换行符，使用fs.constants来设置跨平台的文件权限等。目录1.Node.js文件操作1.1 读取文件1.2 写入文件1.3 修改文件1.4 删除文件2.注意事项3.总结Node.js是一个神奇的东西，它可以让JavaScript在服务器端运行，让我们的很多前端程序员也能在后端大展身手了！如果写入文件时发生错误，将抛出错误。
2023-04-18 17:14:55
132
空空如也
nextJS异常频繁热更新
2025-03-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人