BugCollect-优快云博客

原创 IntersectionObserver懒加载

【代码】IntersectionObserver懒加载。

2025-09-04 10:59:59 100

输入URL → 浏览器解析URL → 查缓存/DNS解析域名 → TCP握手 → TLS握手 → HTTP请求 → 负载均衡/CDN → Web服务器 → 生成HTML → 浏览器下载HTML → 构建DOM/CSSOM → 执行JS → Render Tree → Layout → Paint → Composite → 屏幕显示信号与系统/计算机原理：输入输出中断、CPU调度操作系统：进程/线程调度、内核态/用户态切换网络通信浏览器内核：渲染引擎、JS引擎前端性能优化：缓存策略、CDN、HTTP/2。

2025-08-28 10:07:04 2025

原创 Favicon的动态配置

C:\Users\<你的用户名>\AppData\Local\Google\Chrome\User Data\Default\。favicon图标是ico格式图片，多位32X32位。需要根据用户的喜好配置网页的favicon图标；

2025-08-21 10:17:26 293

原创 Goole调试工具的使用

类型代表面板作用结构/样式Elements编辑 DOM、CSS脚本/调试执行 JS，设置断点网络/接口Network分析请求、响应、耗时存储/缓存操作本地存储、Cookie性能页面评估、性能分析。

2025-08-08 08:50:06 678

原创 SVG组件

这个组件是一个封装的 SVG 图标组件，用于统一加载 iconfont（通过<use>标签引用），支持传入图标名称、颜色、额外类名，适用于基于等平台导出的 symbol 图标集。

2025-08-07 08:41:14 399

原创时间格式化函数

参数名类型说明 time any 时间值（支持 Date、时间戳、时间字符串） pattern string 可选，格式模板，默认模板符号含义示例值年 2025 月（两位数字） 08 月（英文缩写） Aug / 八月日 05

2025-08-06 08:32:56 425

原创 Flexbox 流式布局详解笔记

Flexbox 提供了强大的流式布局能力，通过合理使用各种属性，可以轻松实现各种复杂的布局需求，同时保持代码的简洁和可维护性。Flexbox（弹性盒子布局）是 CSS3 中一种新的布局模式，专门为。：Flexbox 特别适合响应式设计，可以轻松适应不同屏幕尺寸。：Flex 项目默认不会缩小到小于其内容的最小尺寸。定义项目的缩小比例，默认为1（空间不足时缩小）允许单个项目有与其他项目不一样的对齐方式。：一次只能处理一个维度（行或列）的布局。定义项目的放大比例，默认为0（不放大）：可以轻松改变项目的排列方向。

2025-08-05 09:15:55 2313

原创 JavaScript Number 处理方法总结

JavaScript 提供了多种处理数字的方法和属性，下面我将详细介绍常用的 Number 处理方法，包括等。

2025-08-04 08:43:29 513

原创 Vue3的指令

是 Vue 提供的一种扩展 DOM 行为的机制。

2025-08-01 08:27:43 1040

原创路径参数中携带#符号的处理笔记

推荐使用标准的URL编码方式处理路径参数中的特殊字符，这是最规范、兼容性最好的解决方案。

2025-07-31 08:32:20 786

原创 JavaScript 字符串处理方法总结

原因：使用了slice和split，想总结一下。

2025-07-30 09:29:50 629

原创 Vue 3 响应式变量笔记

ref用于创建一个基本类型或对象类型的响应式引用，它会包裹一个.value。reactive用于将一个对象转换为响应式对象（深度响应式）toRef用于将响应式对象中的一个属性单独提取为ref，但仍然保持响应性连接。toRefs用于将一个响应式对象的每个属性都转换成ref，适合解构使用。API类型支持深度响应解构支持.value访问场景描述ref基础 & 对象是不支持处理基本类型、单值引用reactive仅对象是不支持不支持管理复杂对象toRef响应对象属性是（单个）

2025-07-29 08:37:56 678

原创 Lodash常用方法

方法优点替代方案cloneDeep安全、强大，能处理循环引用、手写递归debounce控制频繁触发，参数灵活手写版debounceuniq快速数组去重Set。

2025-07-28 09:18:35 570

原创 watch 、watchEffect 、computed

项目watch依赖收集手动指定自动收集是否能获取旧值oldValue 支持不支持是否适合副作用适合精确副作用逻辑不推荐用于副作用精细控制immediate、deep、flush 等控制缺乏控制推荐场景表单监听、API 请求、状态同步等简单数据跟踪、调试打印等computed场景推荐使用方式说明模板展示、纯值计算computed例如：金额格式化、过滤已完成任务、拼接姓名等数据变化后需执行副作用（请求等）watch如：用户输入搜索词，请求后台接口。

2025-07-26 09:52:17 952 1

原创 Vue 中的 `v-if` 和 `v-show` 指令详解

bug：使用v-show的组件虽然不显示，但是还是占据了一格。

2025-07-25 08:47:13 767

原创 ES6 数组操作方法

ES6 引入了许多强大的数组操作方法，极大简化了我们对数组的处理。下面我将介绍一些常用的数组方法，包括它们的用法、示例和原理。

2025-07-24 08:33:28 594

原创高德地图的内网代理

部署的场景内为内网环境，不能直接访问外网，所以前端对高德地图的接口调用要通过nginx转发到可以访问外网的接口去调用对应的接口；

2025-07-23 08:29:48 1671

原创屏幕键盘组件

虚拟键盘输入：提供全功能的虚拟键盘输入，支持字母、数字、符号等拖拽功能：整个键盘区域可以通过鼠标或触摸屏拖拽移动位置布局切换：支持默认布局、大写布局和数字布局三种键盘布局自定义按键：提供清除、关闭、回车等特殊功能按键。

2025-07-22 08:45:09 465

原创录制视频分片存储在indexDB中

当数据块累计超过6MB或停止录制时，处理并存储数据。表示每 10 秒（10000 毫秒）触发一次。更新 IndexedDB 中该视频的状态为已完成。更新 IndexedDB 中该视频的完成状态。判断条件（大于6MB或录制停止）时调用。这样设计是为了定期获取录制的视频数据块。事件处理器，当有新的录制数据可用时触发。创建 MediaRecorder 实例。事件处理器，当录制完全停止时触发。停止 MediaRecorder。事件（获取最后的数据块）检测支持的视频编解码器。每10秒获取一次数据块。

2025-07-21 08:49:59 341