- 博客(19)
- 收藏
- 关注
RSS订阅原创 前端性能优化常见解决方法
避免频繁触发重排（Reflow）与重绘（Repaint），例如通过`transform`替代`top/left`修改。- 使用`Webpack`等工具压缩代码（JS/CSS/HTML），移除未使用代码（Tree Shaking）- 使用`Lighthouse`、`Web Vitals`（FCP/LCP/CLS）量化性能指标。- 利用浏览器缓存（强缓存`Cache-Control`/协商缓存`ETag`）- 图片优化：选择`WebP`格式、懒加载、响应式图片（`srcset`）
2025-04-09 21:05:41
228
原创 如何量化首屏加载时间及优化方法
**预加载关键资源**：通过`<link rel="preload">`提前加载字体、首屏图片。- **SSR（服务端渲染）**：生成首屏HTML直接输出，减少客户端 hydration 时间。- **CDN加速**：静态资源（如JS/CSS/图片）使用CDN分发，减少网络延迟。- **异步加载非关键JS**：使用`async`或`defer`属性延迟脚本执行。- **Brotli压缩**：相比Gzip，进一步减少文本资源体积15%-25%。- 格式选择：WebP替代JPEG/PNG（体积减少30%）
2025-04-09 21:02:00
352
原创 Uniapp中tap和click的区别
在Uniapp中，`tap`和`click`都是用于处理用户点击行为的事件，但它们的底层实现和应用场景有所不同。在H5平台，Uniapp会将`@tap`编译为`click`事件。| 底层实现 | DOM事件 | 触摸事件（如`touchstart`+`touchend`） |若需快速响应（如按钮点击），优先使用`@tap`，避免300ms延迟影响用户体验。避免在同一元素同时绑定`@tap`和`@click`，可能导致重复触发。优先使用`@tap`，尤其是需要跨平台兼容时。
2025-03-19 09:13:31
364
原创 easycom
easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。
2025-03-18 09:58:50
203
原创 深拷贝和浅拷贝的区别
**对比维度** | **浅拷贝（Shallow Copy）** | **深拷贝（Deep Copy）** || **场景** | **推荐拷贝方式** | **原因** || **引用处理** | 引用类型属性共享内存地址（修改会相互影响） | 引用类型属性创建独立副本（完全隔离） |
2025-03-13 12:44:05
321
原创 websocket聊天功能的聊天记录存储在哪里
**需求场景** | **推荐方案** | **示例** |- **浏览器存储**：使用 `LocalStorage`、`IndexedDB`（适合保存用户本地的聊天记录）。WebSocket 协议本身仅负责实时通信，**不存储聊天记录**。- **移动端存储**：如 `SQLite`（Android/iOS 本地数据库）。- 使用 **分页查询**（`LIMIT` 和 `OFFSET`） + **时间范围索引**。
2025-03-13 12:20:00
400
原创 处理浏览器的兼容性
**API Polyfill**：通过 [core-js](https://github.com/zloirock/core-js) 或 [polyfill.io](https://polyfill.io/) 补充缺失的 API。- **自动添加前缀**：使用 [Autoprefixer](https://github.com/postcss/autoprefixer)（配合 Webpack、Gulp 等工具）。- **触控事件**：统一使用 `touchstart` 和 `click` 的兼容处理。
2025-03-13 12:10:55
280
原创 js的高阶函数
**声明式编程**：用 `map`、`filter` 替代 `for` 循环，代码更直观。- **异步控制**：回调函数、Promise、`async/await`。- **返回一个新函数**：例如，通过闭包动态生成特定功能的函数。- **装饰器模式**：增强函数功能（如日志、缓存、权限校验）。- **接收函数作为参数**：例如，对数组元素进行操作的函数。- **`setTimeout`**：异步执行回调函数。- **`filter`**：筛选符合条件的元素。- **函数工厂**：生成特定功能的函数。
2025-03-13 12:03:59
347
原创 微信小程序的组件通信
如使用`mobx-miniprogram`等第三方库实现响应式数据管理。1. 优先使用`properties+events`的父子通信。① 子组件使用`triggerEvent`发送事件。4. 跨多层级组件通信可使用`eventBus`模式。• 实现方式：通过`properties`属性传递。② 子组件在`properties`中声明接收。• 大型项目推荐使用`Vuex`模式的状态管理方案。• 事件命名建议使用`kebab-case`格式。• 方式一：使用全局`app.js`
2025-03-12 23:09:21
454
原创 vue的组件通信
*实现原理**：通过虚拟 DOM 的 props 属性传递数据，利用 Vue 的事件系统触发自定义事件。**注意点**：默认非响应式，需配合 `ref`/`reactive` 使用。**Vue3 变化**：包含除 `class`/`style` 外的所有属性。2. **深层嵌套**：provide/inject（避免逐层传递）3. **兄弟组件**：事件总线/Pinia（根据复杂度选择）1. **简单父子**：props/emit（数据流清晰）**实现原理**：语法糖实现 props + 事件监听。
2025-03-12 23:07:29
343
原创 箭头函数的作用及应用场景
2. **需要`arguments`对象时**：箭头函数没有自己的`arguments`，需改用剩余参数（Rest Parameters）。- 箭头函数没有自己的`this`，而是继承外层作用域的`this`，避免了传统函数因`this`指向变化导致的错误。**不适用场景**：需要动态`this`、构造函数、依赖`arguments`对象的方法。**场景**：数组方法（如`map`、`filter`、`reduce`）的回调。**适用场景**：短小回调、需要固定`this`指向、函数式编程。
2025-03-12 22:04:12
211
原创 async和await
"使用 then 接收参数" | **可选方式**：但 `async` 函数内更推荐用 `await` 代替 `.then()` 链式调用 |- **处理拒绝（reject）**：若 `Promise` 被拒绝，`await` 会抛出异常（可用 `try/catch` 捕获）- ⚠️ **必须处理**：`await` 可能抛出的异常（通过 `try/catch` 或 `.catch()`）- **解包 `Promise`**：提取 `Promise` 的 `resolve` 值。
2025-03-12 21:11:06
385
原创 浏览器常用的存储方法：会话，本地，cookie
Cookie | 4KB | 可设置 | 字符串 | 同步 || Web Storage | 5-10MB | 永久/会话| 字符串 | 同步 || IndexedDB | 数百MB+ | 永久 | 结构化 | 异步 || Cache API | 动态分配| 永久 | 二进制 | 异步 || 方法 | 容量 | 持久性 | 数据结构 | 同步性 |- 用户偏好设置 → Web Storage。
2025-03-12 20:56:54
411
原创 js数组常用方法/操作
/ 返回[2]，arr变为[1, 'a', 3][3, 1, 2].sort((a, b) => a - b);// 返回[1, 2, 3, 4][1, [2, [3]]].flat(2);
2025-03-12 20:39:45
360
原创 无法找到模块“./App.vue”的声明文件。
原文链接：https://blog.youkuaiyun.com/m0_55557411/article/details/124885911。版权声明：本文为优快云博主「是个叫兽~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。点击左下角的管理 --> 设置 --> 搜索 jsconfig ，去掉勾选。
2025-02-17 16:57:03
356
1原创 桌面右键闪屏解决问题
1、点击任务栏的搜索框输入【Regedit】按回车即可打开注册表管理器。2、首先点击第一主项【HKEY_CLASSES_ROOT】，点击注册表管理器菜单选择【编辑】-【查找】，利用查找快速定位。3、弹出搜索选项，输入查找的内容为【Directory】，附加选项为只查看项，同时勾选【全字匹配】，缩小查找结果的数目。4、当查找到Directory后再按键盘的方向右展开注册表项至以下位置，HKEY_CLASSES_ROOT\Directory\Background\Shellex\ContextMenuH..
2022-04-14 11:48:47
1997
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人