Web Worker 质数搜索器 - 不阻塞界面计算

并发演示 Web Worker 性能计算质数

界面流畅度指示器（观察小球与计数器）

实时计数： 00:00.000

小球流畅移动中 — 主线程空闲

质数搜索器

体验 Web Worker 如何保持界面流畅 — 对比两种计算模式

搜索范围：1 ~ 10,000,000

Web Worker vs 主线程

Web Worker 模式

在独立线程中运行，不阻塞主线程
界面保持流畅，动画正常运行
进度条实时更新
可随时取消计算
用户可继续操作页面

主线程模式

计算占用主线程，界面完全冻结
CSS动画和JS计时器停止
进度条无法更新（计算完才跳转）
无法取消，必须等待完成
浏览器可能提示"页面无响应"

常见问题

什么是 Web Worker？

Web Worker 是浏览器提供的多线程机制，允许 JavaScript 在后台线程中运行，不会阻塞用户界面。Worker 线程与主线程通过消息传递（postMessage）进行通信，适合处理计算密集型任务。

为什么质数搜索需要使用 Web Worker？

质数搜索（如埃拉托斯特尼筛法）涉及大量循环和数组操作，属于典型的 CPU 密集型任务。在浏览器中，如果直接在主线程执行，会导致页面冻结、动画停止、用户无法交互。使用 Web Worker 可以将计算移至后台，保持界面流畅。

Web Worker 有哪些限制？

Worker 无法访问 DOM、不能操作页面元素、无法使用 window 对象的某些方法。它与主线程的数据交换依赖 postMessage，传递的数据会被结构化克隆（会有一定开销）。此外，Worker 文件需要同源或使用 Blob URL。

埃拉托斯特尼筛法的原理是什么？

筛法是一种高效查找质数的算法：创建一个从2到N的数组，从最小的质数2开始，将其所有倍数标记为非质数，然后找到下一个未被标记的数作为质数，重复此过程直到 √N。时间复杂度约为 O(N log log N)。

什么情况下应该使用 Web Worker？

当你需要在浏览器中执行以下任务时，应考虑使用 Worker：大数据处理、图像/视频处理、密码学运算、复杂数学计算、大型JSON解析、实时数据流处理等。原则是：任何可能导致主线程阻塞超过50ms的操作都应考虑移至Worker。

Web Worker计算演示 - 后台斐波那契不卡顿

在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。

OffscreenCanvas性能演示 - Worker中绘图对比

分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画，对比FPS和流畅度。

开发工具 Canvas Worker 性能

CSS缓动函数试玩场 - 所有预设一览

并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。

前端设计 CSS 动画缓动

页面标题层级分析器 - h1~h6 结构检查

输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。

SEO 大纲层级无障碍标题

Webpack 打包分析器 - stats.json 可视化

上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。

开发工具 Webpack 体积打包分析模块

CSS 伪类效果测试场 - 实时查看 :is() :where() :has()

编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。

CSS CSS :has 伪类选择器

CSS Grid 调试覆盖层 - 显示网格线与区域

在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。

开发工具 Grid 可视化覆盖层调试

gRPC-Web 一元调用测试器 - 发送请求并查看序列化

输入 gRPC 服务地址和方法，构造 JSON 请求体，观察转为二进制帧并接收响应解码。

开发工具 gRPC-Web 测试

Flexbox属性速查 - 可视对照表

可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。

前端设计 Flexbox 属性速查

CSS属性兼容性表格 - 按使用率排序

搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。

前端设计 CSS 兼容性表格

CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果

应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。

CSS contain CSS 性能隔离

懒加载代码生成 - IntersectionObserver

生成使用Intersection Observer实现图片懒加载的JavaScript代码，含过渡动画。

优化工具性能懒加载生成

质数检测器 - 在线判断整数是否为质数

输入任意正整数，即时判定是否为质数，并显示其因数分解结果，轻量数学工具。

教育工具数学检测质数

JSON 数据转 HTML 表格 - 嵌套折叠与排序

将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。

可视化 HTML JSON 渲染表格

色盲友好调色板 - 定性数据配色推荐

展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。

前端设计色盲设计调色板

纯CSS暗黑模式切换 - checkbox黑客实现

利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。

前端设计 CSS 切换暗黑模式

Web Locks API 探索器 - 跨标签页资源协调

获取和释放命名锁，观察多个标签页如何排队等待资源访问。

JavaScript Web Locks 协调资源锁

Flexbox 高级演练场 - 所有属性可视化控制

通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。

CSS CSS Flexbox 可视化布局

JavaScript循环性能测试 - 比较多种写法

在浏览器中即时测试for、forEach、map、for-of等循环的执行速度，帮助选择最优写法。

开发工具 JavaScript 循环性能

Catmull-Clark 细分曲面演示 - 控制网格迭代

载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。

图形学 Catmull-Clark 图形学曲面细分

SharedArrayBuffer 通信演示 - 跨 Worker 共享内存

在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。

JavaScript Atomics SharedArrayBuffer Worker 共享内存

Periodic Sync 事件模拟器 - 手动触发并查看结果

在开发环境中模拟 periodicSync 事件，触发后查看 SW 中的处理逻辑和网络请求。

PWA Periodic Sync Service Worker 模拟触发

正则表达式在线测试工具 - JavaScript正则校验

在线正则表达式测试工具，支持JavaScript正则匹配、替换、提取等操作，即时显示匹配结果和高亮。

开发工具 Regex 正则表达式测试验证

Webhook URL 测试器 - 自定义发送 JSON 并查看日志

向指定 Webhook URL 发送自定义 JSON 负载，查看响应状态码和内容，记录发送历史。

API JSON URL Webhook 测试

骨架屏代码生成器 - 加载占位灰色块

为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。

前端设计 CSS 生成骨架屏

颜色对比度实时分析器 - 多标准WCAG AA/AAA检测

支持任意格式颜色输入，计算对比度并显示WCAG 2.1各级别通过情况，含颜色建议。

无障碍 WCAG 对比度无障碍颜色

CSS Grid可视化调试器 - 叠加网格线

为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。

前端设计 CSS Grid 可视化调试

<dialog> 模态框设计向导 - 原生对话框样式器

自定义原生 <dialog> 元素的样式、动画和遮罩效果，一键复制生成语义化且无障碍的模态框代码。

HTML dialog HTML 无障碍模态框

跳跃表可视化器 - 插入/搜索层级演示

随机可视化Skip List的层级结构和快速查找过程，对比链表效率。

教育工具可视化算法跳跃表

CSS兼容性速查 - 属性在各浏览器支持图表

搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。

前端设计 CSS 兼容性浏览器