- 博客(633)
- 资源 (5)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 如何中断大批量 dom 元素渲染的循环
前端优化关键技巧：通过"让出主线程"解决大批量DOM渲染卡顿问题。浏览器主线程负责JS执行、渲染和交互，长时间任务会阻塞UI响应。技巧核心是使用setTimeout或await Promise分片执行任务，例如每100次DOM操作插入await new Promise(resolve => setTimeout(resolve, 0))，让浏览器有机会处理UI更新。示例代码展示了如何通过异步分片渲染1000个元素，并提供中断机制，实现流畅的用户体验。这种技术适用
2025-08-01 10:54:31
713
原创 fetch 请求流式chunk 处理数据
摘要 本文介绍了一种基于Node.js的流式数据渲染方案，模拟ChatGPT的流式请求模式。通过不设置Content-Length头，服务器自动启用chunked transfer编码，实现边计算边传输数据的效果。文章提供了Node服务端代码示例，每100ms推送10条矩形框数据，以及前端使用fetch API处理流式响应的完整实现方案。重点解析了如何将二进制流转换为结构化数据的过程，并比较了fetch与XHR的优劣，以及chunked传输与Server-Sent Events的区别。方案适用于需要实时渲染
2025-06-30 14:11:04
750
原创 web项目实现PWA和Browsersync的安装及使用方法
所以这里使用一个插件方便测试。npm run build，再通过browser-sync开本地服务器。可以同时在PC、平板、手机等设备下进项调试。即在任何一设备上操作，其他设备也随之改变，大大提高了测试效率。会修改 public 文件夹，生成很多 icon 作为桌面显示图标。去配置名字和颜色涉及添加至桌面的应用名，及桌面进入的启动页面的长相。，注册 Service Worker，并监听生命周期的事件。省去手动F5的事件，更重要的是。会修改项目，在 src 目录下生成这个文件。是浏览器同步测试工具，
2025-06-11 17:25:36
352
原创 为什么上传大量大文件推荐是使用 app 应用为不是 web 浏览器下载上传呢？
Web 浏览器在处理大文件上传/下载时存在性能和稳定性的天然限制，而原生应用（App）可以绕过这些限制，提供更高效、稳定和灵活的文件传输体验。浏览器受限于内存分配、线程模型和文件系统访问能力，无法像 App 那样直接优化读写操作。此外，浏览器在网络稳定性、断点续传、交互体验和权限管理方面也存在不足，而 App 可以通过流式处理、后台下载和更丰富的交互功能提升用户体验。虽然 Web 技术如分片上传、PWA 和 WebAssembly 尝试解决这些问题，但 App 仍是大文件传输的更优选择。开发者可结合 Web
2025-05-19 15:35:55
565
原创 如何将 Build at、Hash 和 Time git 的 Tag 号等构建信息，自动写入一个 JSON 文件
构建信息自动写入一个 JSON 文件（比如 ），你可以在 Vue CLI 项目中通过 Webpack 插件机制实现这个目标。
2025-05-08 10:34:45
816
原创 Paper.js 的 simplify()方法在绘制高精度path时，消失问题
分辨率 + 缩放感知型”的简化策略，使得用户无论在什么视图比例下都能获得自然、合适的路径简化效果。✨。
2025-05-07 13:09:32
614
原创 darwin 是什么操作系统平台
上面盖了不同的漂亮楼房（比如 macOS 和 iOS）。）、设备驱动、系统基本服务，还有一些BSD类Unix组件。（因为 macOS 就是基于 Darwin 构建的呀）当前运行的 nodejs 的平台是“这些系统的内核和底层基础！比如，当你在开发中看到什么。👉 它包含了内核（叫做。通俗一点说，就是——
2025-04-28 11:10:53
879
原创 探究生成一个 svg图像，stroke-width 的属性值为小数时在JS 生效但 TS 环境下不生效的现象
探究生成一个 svg图像，stroke-width 的属性值为小数时在JS 生效但 TS 环境下不生效的现象
2025-04-09 14:07:34
425
原创 vue3+vite模式下修改pinia的stroe初始值不进行热HMR更新解析
vue3+vite模式下修改pinia的stroe初始值不进行热HMR更新解析
2025-03-11 16:58:44
504
原创 js数组方法some() 和 every()的区别
some()和every()是 JavaScript 中两个常用的数组方法，它们都用于检查数组中的元素是否满足某种条件，但它们的行为有所不同。
2024-12-24 15:47:57
918
原创 在 OpenSeadragon 中，**所有逻辑坐标的比率（包括中心坐标的 `x` 和 `y`）默认都是基于图像宽度计算的
这是 OpenSeadragon 的设计逻辑，逻辑坐标系通常是一个宽度为 1 的方形（即宽度为 1，高度按照原始图像的宽高比调整）。，而高度通过宽高比进行换算。这种设计可以统一逻辑坐标的比例，不受图像具体尺寸的影响。在 OpenSeadragon 中，0.5 × 逻辑高度。
2024-12-23 15:51:34
539
原创 js中string和String的区别
在 JavaScript 中，string 和 String 有本质的区别，分别代表 基本类型 和 对象类型。
2024-12-11 17:40:09
496
原创 CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示
通过伪类::before、定位top、两端对齐等CSS技巧，.title和.txt标签在不同情况下能实现动态切换与覆盖，同时保证文本省略和展示效果的平衡。
2024-11-21 09:56:25
1699
原创 Navigator：vibrate() 方法 - Web API | MDN
Navigator接口的vibrate()方法用于控制设备上的振动硬件（如果存在）。如果设备不支持振动，则该方法无效。如果已经处于振动模式，调用此方法会停止前一个模式，并开始新的振动模式。
2024-11-15 09:48:52
1248
原创 前端SSE包event-source-polyfill的其他事件监听的实现
event-source-polyfill库中如何监听其他事件SSE
2024-10-25 17:31:56
2342
2
原创 《webpack深入浅出系列》
Webpack 是一种现代 JavaScript 应用的打包工具，通过将代码及其依赖项打包成静态文件，方便在浏览器中加载和运行。此文章是基本使用与设计概述
2024-10-09 11:28:27
1397
原创 js，web端加载新消息，滚动条位置不变，最新消息渲染至视口
保持滚动条位置不变的关键是记录和恢复滚动条的高度差异。通过计算加载新消息前后的高度差，并调整滚动位置，可以有效地防止用户视角的跳动。
2024-08-29 10:53:39
1459
原创 前端构建URL的几种方法比对，以及函数实现
简单场景：字符串拼接或 ES6 模板语法。复杂场景new URL()构造函数。这两种方法没有绝对的优劣，关键是选择适合场景的工具。
2024-08-13 15:41:50
2387
原创 前端js中将YAML文本赋值给变量，并使用js-yaml插件来解析
模板字符串（使用反引号）支持多行文本和插值，适用于包含换行符的文本内容，如 YAML。普通字符串（使用单引号或双引号）不支持直接包含换行符，需要使用换行字符或字符串连接，处理起来较为繁琐。以上步骤展示了如何在 Vue 项目中使用js-yaml解析 YAML 文本。通过安装js-yaml依赖，并在 Vue 组件中导入和使用它，你可以轻松解析并显示 YAML 数据。
2024-08-05 13:32:06
1069
原创 Axios的几种不同的responseType处理响应，以及blob与arraybuffer的解析
Axios的几种不同的responseType处理响应，以及blob与arraybuffer的解析
2024-07-29 13:47:29
7172
1
原创 HTTP/1.1、1.2、1.3详细信息和主要区别
HTTP/1.1：持久连接和管道化，解决了基本的性能问题，但仍然存在队头阻塞。HTTP/2：二进制分帧和多路复用，大幅提升性能，但仍然受限于 TCP 的队头阻塞。HTTP/3：基于 QUIC，解决了队头阻塞问题，进一步优化了连接建立和数据传输效率。这些协议版本的改进都是为了适应现代 Web 的需求，提高页面加载速度和传输效率。可以关注和应用 HTTP/2 和 HTTP/3 的特性，以便为用户提供更好的体验。
2024-07-23 17:18:02
1857
原创 nginx开启资源目录
上一篇文档揭示了nginx的神秘面纱，初步介绍与启动了nginx的基本功能和使用那如何开放出一个公用的静态资源目录，可以访问所有的文件呢？这段配置实际上是用于配置 Nginx 服务器块，用于从文件系统的特定目录提供文件。：该指令指定要匹配传入请求的 URL 前缀（因此，任何以开头的请求都将由此块内的指令处理。alias F:/;：该指令指定文件系统上文件的物理路径，即请求对应的文件应该位于的位置。在这里，是F:/。alias。
2024-05-21 14:58:40
1258
原创 javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
2024-05-16 16:37:09
505
原创 Vue中v-if与v-for的优先级和注意事项
在Vue.js中，和是两种常用的指令，它们在模板中控制元素的渲染方式。理解它们之间的优先级和如何正确使用它们对于编写高效的Vue应用至关重要。在Vue模板编译时，和都会被转换成可执行的函数。在Vue的源码中，的判断优先于。Vue源码分析在Vue的源码中，的处理优先于，这意味着在渲染过程中，Vue会先进行列表渲染，然后才进行条件判断。计算属性示例四、流程图下面是和在Vue模板中的处理流程的简化流程图：Vue模板v-forv-if列表渲染条件判断在Vue中，和的处理流程可以通过以下简化流程图来表
2024-05-14 10:37:00
1363
原创 一图看懂git merge和git rebase的区别！！
git merge和git rebase都具有合并分支的功能，但两者又有不同:rebase: 变基: 把一个分支的更改移动到另一个分支上，通常用于保持提交历史的线性和干净merge: 合并： 把一个分支的更改合并到另一个分支,合并后的提交会保留原始分支的提交历史rebase: 解决完冲突后不会产生额外的commitmerge: 解决完冲突后会产生一个commit
2024-05-13 13:03:25
715
原创 前端nginx（windows操作系统）学习配置开发验证
Nginx作为负载均衡在Linux系统上具备很好的并发性能，并且占用极小的内存。但是在Windows系统上并不支撑较高并发，所以在Windows系统上选用Nginx作为负载均衡，需要考虑并发情况。
2024-05-07 14:24:18
669
2
nodejs+字符串的模式匹配+正则表达式+判断获取字符串的某些需求
2022-04-03
SpringBoot+社区老人健康信息管理的所有代码打包
2022-06-19
获取fs的readfille读取文件时的返回值
2022-01-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人