- 博客(77)
- 收藏
- 关注
RSS订阅原创 FastAPI + 前端（Vue/React）Docker 部署全流程
你完成了一套生产级 Web 应用部署流程✅ 模块化 FastAPI 路由（带版本）✅ Docker 容器化前后端✅ Nginx 反向代理 + 静态资源托管✅ 网络隔离与服务通信这份文档不仅记录了你的成果，更是未来快速部署新项目的标准模板。
2025-12-11 17:18:10
453
原创 可视化大数据的性能优化
优化方向G2 重点G6 重点数据量采样、聚合节点/边数量控制、按需加载渲染关闭动画、简化 geometry视口裁剪、简化节点样式布局不适用选轻量布局 or 后端计算坐标交互限制 tooltip 频率禁用 hover 效果、debounce 事件架构前端预处理 or 服务端聚合图数据库 + 子图查询。
2025-11-24 10:47:40
938
原创 微前端QianKun的使用以及坑点问题
主应用是 SPA（history 模式），刷新时路径被主应用拦截，导致找不到子应用资源。子应用必须允许跨域（Access-Control-Allow-Origin: *）✔ D. 主应用与子应用 UI 框架样式隔离（AntD、ElementUI）iframe 内不适合做微前端子应用，需要使用原生子应用方式。主应用切换子应用 route 时清空 container。确保开发环境、生产环境均可直接访问子应用 URL。子应用样式影响主应用样式，或之间互相覆盖。✔ 子应用 code splitting。
2025-11-19 14:34:44
720
原创 前端经常用到的性能优化手段
路由级、组件级懒加载。：确保使用 ES Module，引入 antd 时用按需加载。：babel/preset-env 的。：使用 webp、压缩工具（tinypng、svgo）。lodash → lodash-es 或按需加载。
2025-11-19 14:27:28
826
原创 企业级项目前端通用性能优化
Version：v1.0适用范围：Web 前端项目（React / Vue / Webpack / Vite）目标：系统化提升 Web 应用的加载速度、渲染性能、弱网体验与稳定性总体目标与关键指标性能优化原则构建与打包优化网络传输与资源加载优化渲染性能优化（React/Vue）图片与多媒体优化数据加载与弱网优化长列表与大数据渲染优化动画与交互性能优化缓存策略（HTTP / Storage）监控与性能分析体系安全与兼容性注意事项统一规定项目性能 baseline：降低首屏 JavaScript 体积减少网
2025-11-19 14:25:29
1125
原创 弱网环境下TRTC的优化
按重要性排序：TRTC 默认会自动做，但是最好手动再开一次：弱网下自动降级为 360p 或仅音频：如果你是 WebRTC 模式（新版 SDK），则：弱网时自动切到低码率，不卡顿。推荐初始化设置成较稳的编码：TRTC 对弱网自动重连很依赖。不用你自己写重连逻辑，但必须监听：如果 → 触发重连你可以监听 TRTC 的网络质量，再动态调整视频质量：Chrome 内置：或者使用 监控实际丢包。这是 TRTC 常见原因：
2025-11-19 10:33:29
345
原创 创建可用的 Python 3.11+ 环境 + 基础仓库结构
infra/compose: docker-compose 配置。→ 配置、启动逻辑（settings、logging）→ 异步任务、celery/apscheduler。backend/app/schemas: 数据模型。backend/app/services: 服务层。backend/app/core: 配置与启动。backend/app/routers: 路由。backend/app/tasks: 异步任务。backend/app/db: 数据库。→ 数据库连接、会话、迁移。
2025-09-24 17:02:21
303
原创 [特殊字符] 跨端视频通话实战：腾讯云 TRTC + IM（React Native & Web）
本文介绍了如何利用腾讯云TRTC和IM SDK实现ReactNative与Web端互通的视频通话Demo。通过TRTC处理音视频流传输，IM作为信令通道管理呼叫状态，实现了跨平台视频通话功能。文章详细说明了整体架构设计、信令状态机、核心代码实现（包括初始化、进房/退房逻辑）以及通话时序流程，并针对常见问题提供了解决方案。该方案适用于远程办公、在线教育等场景，具有低延迟、跨平台互通的特点，同时强调了信令与媒体分层处理、状态机管理以及安全防护等最佳实践。
2025-09-08 17:24:07
600
原创 Android BLE 扫描完整实战
Android BLE扫描实战指南：从权限配置到代码实现 本文详细介绍了Android平台上实现BLE设备扫描的完整流程。首先解析了BLE广播原理，对比了经典蓝牙与低功耗蓝牙的应用场景差异。重点说明了不同Android版本所需的权限配置（6-11版本需要位置权限，12+版本需要BLUETOOTH_SCAN等权限），并提供了运行时请求权限的代码示例。 文章推荐使用最新的BluetoothLeScanner API进行设备扫描，给出了包含过滤条件的Kotlin实现代码，并基于Jetpack Compose构建了
2025-09-08 15:35:33
520
原创 Python捕获异常
异常传递：异常会从引发处向上传递，可在调用栈中逐层捕获。raise ValueError("参数错误")func1()try:func2()print(f"捕获到异常：{e}") # 输出：捕获到异常：参数错误自定义异常：继承Exception类创建业务专用异常。super().__init__(f"余额不足：当前{balance}元，需{amount}元")try:print(e) # 输出：余额不足：当前100元，需150元。
2025-07-25 20:02:11
533
原创 前端性能优化
需注意：优化需以数据驱动，通过 Chrome DevTools Performance 面板和 Lighthouse 审计结果针对性实施。在前端性能优化中，需贯穿开发、打包、部署和浏览器运行全流程。
2025-04-01 07:53:20
674
原创 JavaScript 数组和字符串方法详解
数组方法是操作数组的核心工具，分为。（字符串不可变），返回新字符串。默认只替换第一个匹配项，需用正则。），字符串方法永不修改原数据。：前者修改原数组，后者不修改。数组方法可能修改原数组（如。
2025-03-05 21:36:59
460
原创 微前端框架 Qiankun 的应用及问题分析
Qiankun 支持主应用与子应用使用不同技术栈（如 Vue、React、Angular 等），通过 HTML Entry 方式接入子应用，无需深度改造子应用即可实现集成，降低了技术迁移成本28。例如，主应用使用 Vue2，子应用可独立使用 Vue3 或 React，实现渐进式重构59。支持子应用静态资源预加载，并通过 Fiber 模式（类似 React）优化 JS 执行性能，减少首屏白屏时间28。插件，可绕过原生限制，支持 Vite 子应用的集成。
2025-03-03 15:39:26
1766
原创 vue精简面试题
减少直接操作真实 DOM 的性能开销，实现跨平台渲染（如 SSR、Native）。对数据对象的每个属性进行递归劫持（Getter/Setter），通过。在下次 DOM 更新循环结束后执行回调函数，用于获取更新后的 DOM。：轻量级的 JavaScript 对象，描述真实 DOM 结构。操作对象属性，无需递归遍历，天然支持动态新增/删除属性。：标记动态节点类型（如文本、class），跳过未变化部分。：在 Getter 中收集依赖（如模板中的变量）。解决了 Vue 2 的监听限制，性能更优。
2025-02-27 14:13:20
747
原创 父子组件事件冒泡和捕获的顺序
阶段触发事件执行顺序典型场景捕获阶段父组件 → 子组件权限拦截、埋点统计冒泡阶段onClick子组件 → 父组件常规交互逻辑（如提交表单）
2025-02-25 13:44:00
739
原创 父组件用的是原生监听，子组件用的是onClick，子组件添加了stopPropagation还是没有阻止传播
优先统一使用 React 事件onClick）避免冲突。混合使用原生事件时，需在子组件中通过 e.nativeEvent.stopImmediatePropagation()阻止原生事件传播。若父组件事件绑定在捕获阶段，需在子组件中处理。
2025-02-25 10:55:56
1188
原创 父组件添加事件监听，子组件也有单独的点击事件，怎么避免点击子组件触发父组件
通过 e.stopPropagation()可以阻止事件冒泡到父组件。这是解决父子组件事件冲突的标准方案，适用于大多数场景。如果遇到复杂情况（如第三方库或原生 DOM 事件），再考虑其他扩展方法。
2025-02-25 10:48:05
730
原创 Vue的双向数据绑定和React的单向数据流在处理对象数组时的行为
Vue：双向数据绑定使得直接修改数组中的对象时，索引地址不会变化，Vue 会自动更新视图。React：单向数据流要求每次更新状态时都创建一个新的数组或对象，这会导致索引地址的变化，React 通过key属性来跟踪列表中的元素。这两种机制各有优缺点，选择哪种方式取决于具体的应用场景和开发者的偏好。
2025-02-19 19:29:32
582
原创 推荐两个比较好用的流程图js库
React Flow 和 Logic Flow 是两个用于构建流程图的 JavaScript 库，适用于不同的场景和需求。
2025-02-17 11:21:53
861
原创 微信小程序性能优化
微信小程序的性能优化涉及多个方面，包括减少setData的调用频率和数据量、合理控制组件渲染、优化图片和 WXML 结构、使用分包加载、减少不必要的网络请求和计算任务等。通过综合运用这些策略，可以显著提升小程序的性能和用户体验。
2025-02-16 17:42:32
976
原创 Linux常用指令
这些命令是 Linux 系统中最常用的基础命令，掌握它们可以帮助你高效地进行系统管理和文件操作。- 实时显示系统进程和资源使用情况。- 显示目录或文件的磁盘使用情况。- 创建空文件或更新文件时间戳。- 移动或重命名文件/目录。- 查看文件开头/结尾部分。- 显示网络连接、路由表等。- 以超级用户权限执行命令。- 显示磁盘空间使用情况。- 显示或配置网络接口。- 显示当前工作目录。- 分页查看文件内容。- 显示内存使用情况。
2025-02-14 10:51:51
428
原创 前端职业规划
前端开发的职业规划可以从初级开发者起步，逐步成长为技术专家、架构师或管理者。未来，前端开发者还可以探索新兴领域（如 Web3、AI、元宇宙），拓展职业发展的可能性。无论选择哪个方向，持续学习、积累经验和提升软技能都是成功的关键。
2025-02-13 21:55:10
1818
原创 React VS Vue
特性ReactVue核心定位库（专注于 UI）框架（一体化解决方案）学习曲线中等较低模板语法JSXHTML 模板状态管理Context API、Redux 等Vuex、Pinia路由Vue Router性能虚拟 DOM，手动优化虚拟 DOM，自动优化开发体验灵活，依赖工具链开箱即用，单文件组件适用场景大型、复杂应用中小型、快速开发社区与就业全球最大，岗位需求多增长迅速，亚洲流行选择 React 还是 Vue 取决于项目需求、团队经验和个人偏好。
2025-02-13 21:48:37
1637
原创 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
548
原创 浏览器相关面试题[2]
**协商缓存**：通过`Last-Modified`和`ETag`头实现，浏览器会向服务器发送请求，服务器根据资源是否变化决定返回304（未修改）或200（新资源）。- **强缓存**：通过`Cache-Control`和`Expires`头实现，浏览器直接从本地缓存读取资源，不会发送请求到服务器。- **JavaScript**：`Promise`在IE中不支持，可以使用Polyfill（如`core-js`）来解决。
2025-02-12 12:23:41
368
原创 自定义请求hooks扩展
/ 创建 AbortController。// 返回请求结果、加载状态和错误信息。// 依赖项：url 和 options 变化时重新执行。// 组件卸载时取消请求。
2025-02-12 08:46:51
572
原创 【无标题】前端面试题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
351
原创 前端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
525
原创 IntersectionObserver（无线滚动，懒加载）
IntersectionObserverEntry 对象包含了目标元素与祖先元素或视口的交集变化信息，如 isIntersecting （表示目标元素是否与视口或祖先元素相交）。- observer ：即当前的 IntersectionObserver 实例，在回调函数中可以使用它来停止观察某个元素（如 observer.unobserve(element) ）。当该元素进入或离开视口（或指定的祖先元素）时，会触发 IntersectionObserver 的回调函数。// 目标元素进入视口时的操作。
2025-02-11 19:13:01
466
原创 forwardRef
在这个例子中，使用 `useRef` 钩子创建了一个 `ref`，然后将这个 `ref` 传递给 `FancyInput` 组件。调用 `handleClick` 函数时，通过 `ref` 获取到 `FancyInput` 内部的 `input` 元素并使其获得焦点。这个组件接收 `props` 和 `ref` 作为参数，并将 `ref` 转发给内部的 `input` 元素。在这个父组件中，我们可以使用 `ref` 调用 `FancyInput` 组件中定义的 `focus` 和 `clear` 方法。
2025-02-11 16:47:34
588
原创 react中无法获取最新的redux值
与此同时，子组件 B 设置了 Redux 中的状态，父组件的对象函数中使用 Redux 的状态值进行判断，但最终函数获取到的始终是初始化时的 Redux 状态值。5. 确保函数使用最新的 Redux 状态值：由于 reduxValueRef.current 始终保持最新的 reduxValue，因此无论何时调用 objRef.current.func 时，函数都会获取到最新的 Redux 状态值。通过在函数中使用 reduxValueRef.current 可以确保函数始终使用最新的 Redux 状态值。
2025-01-22 17:17:56
397
原创 H5开发的视频语音识别分析播放记录
这些还好，让人头疼的是兼容问题，最让人头疼的是没有测试机，我用的安卓，周边也用到都是小米系列，领导倒是用的ios。
2024-10-17 16:02:36
734
空空如也
nextJS异常频繁热更新
2025-03-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人