UD5工具箱
批处理任务生成器 - 按情境分组效率执行
将同类待办归入电话、外出、电脑等情境，一目了然优化执行顺序。
资源提示标签生成器
生成 <link> 资源提示标签，优化页面加载性能
dns-prefetch
DNS预解析
preconnect
预连接
preload
预加载
prefetch
预获取
modulepreload
模块预加载
https://
请输入域名（如 example.com 或 https://example.com）
已生成的标签 0
在左侧生成标签，它们会出现在这里
资源提示知识点
dns-prefetch（DNS预解析）告诉浏览器在后台提前对指定域名进行DNS查询。当用户后续真正访问该域名的资源时，DNS解析已经完成，可以节省约20-120毫秒。
适用场景：页面中引用了第三方域名的资源（CDN、API、图片等），但不确定资源具体路径，只需要提前解析DNS。
示例：
适用场景：页面中引用了第三方域名的资源（CDN、API、图片等），但不确定资源具体路径，只需要提前解析DNS。
示例：
<link rel="dns-prefetch" href="https://cdn.example.com">preconnect 比 dns-prefetch 更全面，它除了DNS解析外，还会预先完成TCP握手和TLS协商（HTTPS）。这意味着连接已经完全建立，后续请求可以立即发送。
代价：preconnect 消耗更多资源，因为需要建立和维护连接。建议只对确定会使用的关键第三方域名使用preconnect（通常不超过4-6个），其他次要域名使用dns-prefetch即可。
最佳实践：preconnect 常与 dns-prefetch 配合作为fallback：
代价：preconnect 消耗更多资源，因为需要建立和维护连接。建议只对确定会使用的关键第三方域名使用preconnect（通常不超过4-6个），其他次要域名使用dns-prefetch即可。
最佳实践：preconnect 常与 dns-prefetch 配合作为fallback：
<link rel="preconnect" href="https://api.example.com"><link rel="dns-prefetch" href="https://api.example.com">preload 用于强制浏览器提前加载当前页面即将需要的资源，优先级较高。它告诉浏览器"这个资源很重要，尽快下载"。
必须指定
注意：如果预加载的资源在3秒内未被使用，浏览器会在控制台输出警告。因此请确保预加载的资源确实会被用到。
示例：
必须指定
as 属性来告诉浏览器资源类型，这样浏览器才能正确设置优先级和缓存策略。常见as值：script、style、font、image、fetch。注意：如果预加载的资源在3秒内未被使用，浏览器会在控制台输出警告。因此请确保预加载的资源确实会被用到。
示例：
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin="anonymous">两者都是预加载资源，但优先级和用途不同：
preload（预加载）：用于当前页面确定需要的资源，优先级高，浏览器会尽快下载。在页面加载阶段使用。
prefetch（预获取）：用于未来可能需要的资源（如下一页可能访问的页面），优先级低，浏览器在空闲时才会下载。常用于提升下一页的加载速度。
简单记忆：preload = 当前页面马上要用的；prefetch = 将来可能用到的。
preload（预加载）：用于当前页面确定需要的资源，优先级高，浏览器会尽快下载。在页面加载阶段使用。
prefetch（预获取）：用于未来可能需要的资源（如下一页可能访问的页面），优先级低，浏览器在空闲时才会下载。常用于提升下一页的加载速度。
简单记忆：preload = 当前页面马上要用的；prefetch = 将来可能用到的。
modulepreload 是专门用于ES模块的预加载方式。与preload as="script"不同，modulepreload不仅下载模块文件，还会解析和编译模块，并递归处理模块的依赖图。
使用preload加载模块时如果指定type="module"，也可以实现类似效果，但modulepreload是更语义化、更高效的选择。
示例：
使用preload加载模块时如果指定type="module"，也可以实现类似效果，但modulepreload是更语义化、更高效的选择。
示例：
<link rel="modulepreload" href="/js/app.js">as属性告诉浏览器资源的类型，用于确定请求优先级和缓存策略。完整的可选值包括：
script - JavaScript脚本
style - CSS样式表
font - 字体文件（通常需要crossorigin）
image - 图片资源
fetch - 通过fetch/XMLHttpRequest获取的资源
document - HTML文档
worker - Web Worker
video / audio - 媒体文件
track - 文本轨道（字幕等）
embed / object - 插件资源
script - JavaScript脚本
style - CSS样式表
font - 字体文件（通常需要crossorigin）
image - 图片资源
fetch - 通过fetch/XMLHttpRequest获取的资源
document - HTML文档
worker - Web Worker
video / audio - 媒体文件
track - 文本轨道（字幕等）
embed / object - 插件资源
CSS的@font-face加载字体时，默认使用CORS（跨域资源共享）模式，即使用户的字体文件和页面在同一域名下。因此，preload字体时也必须添加
这是最常见的preload使用陷阱。只要as="font"，就建议加上crossorigin="anonymous"。
crossorigin="anonymous"属性，否则浏览器会下载两次字体文件——一次是preload（无CORS），一次是@font-face请求（带CORS），造成浪费。这是最常见的preload使用陷阱。只要as="font"，就建议加上crossorigin="anonymous"。
所有资源提示标签（dns-prefetch、preconnect、preload、prefetch、modulepreload）都应该放在HTML的
特别地，preload标签应该放在使用该资源的
<head>中，且尽可能靠前放置。这样浏览器可以在解析HTML的早期阶段就发现并开始处理这些提示。特别地，preload标签应该放在使用该资源的
<script>或<link>标签之前，以确保资源提前开始下载。可以通过以下方式验证：
1. Chrome DevTools Network面板：查看资源的Initiator列，如果显示为"Other"且带有资源提示类型，说明提示生效。
2. Performance面板：录制页面加载过程，查看网络请求的时间线，可以看到预连接的建立和预加载资源的提前下载。
3. Lighthouse审计：会检查是否正确使用了资源提示。
4. 观察控制台警告：如果preload的资源未被及时使用，浏览器会发出警告。
1. Chrome DevTools Network面板：查看资源的Initiator列，如果显示为"Other"且带有资源提示类型，说明提示生效。
2. Performance面板：录制页面加载过程，查看网络请求的时间线，可以看到预连接的建立和预加载资源的提前下载。
3. Lighthouse审计：会检查是否正确使用了资源提示。
4. 观察控制台警告：如果preload的资源未被及时使用，浏览器会发出警告。
浏览器对资源提示的处理优先级从高到低：
1. preload - 最高优先级，浏览器会立即开始下载
2. preconnect - 高优先级，尽快建立连接
3. dns-prefetch - 中优先级，在空闲时进行DNS解析
4. prefetch - 最低优先级，仅在浏览器完全空闲时下载
modulepreload的优先级类似于preload，但专门针对ES模块。建议不要过度使用preload，通常2-4个关键资源即可，过多会稀释优先级。
1. preload - 最高优先级，浏览器会立即开始下载
2. preconnect - 高优先级，尽快建立连接
3. dns-prefetch - 中优先级，在空闲时进行DNS解析
4. prefetch - 最低优先级，仅在浏览器完全空闲时下载
modulepreload的优先级类似于preload，但专门针对ES模块。建议不要过度使用preload，通常2-4个关键资源即可，过多会稀释优先级。
离线页面生成器 - 当无网络时展示
创建当用户离线时展示的简单HTML页面，结合Service Worker使用。
HTTP 方法测试器 - GET/POST/PUT/DELETE 等演示
向指定 URL 发送不同 HTTP 方法的请求，显示响应状态码、头部和主体，学习 RESTful API。
Web Components 生命周期浏览器 - 查看回调执行
创建一个测试自定义元素，记录并展示 connectedCallback, attributeChangedCallback 等执行顺序。
X-Forwarded-For 模拟器 - 代理链 IP 追加演示
模拟多层代理逐步添加 X-Forwarded-For 头的过程，理解如何获取真实客户端 IP。
Terraform 计划预览器 - 资源变更可视化
粘贴terraform plan输出，解析并显示资源的增加、更改与销毁列表，辅助审查。
快捷键冲突检测与解决方案 - 输入组合查看占用
输入一组快捷键，检测在主流操作系统和浏览器中是否已被系统或软件占用。
线段树区间查询演示 - 构建/更新/查询
可视化线段树的构建、单点更新和区间求和查询过程，理解树状结构。
当前页面HTTP头查看 - fetch请求获取响应头
发起请求获取当前URL或任意允许CORS的URL的Response Headers，展示详情。
Cron表达式解析器 - 查看下次执行时间
解析标准Cron表达式，显示未来多次执行的具体日期时间，辅助验证定时任务配置。
Service Worker 生命周期演示器 - 安装/激活/更新
逐步展示SW从注册、安装到激活的完整流程，并模拟更新与跳过等待的场景。
HTML实体速查表 - 特殊字符编码Ref
常用HTML实体编码（如© ©）的图形化速查表，点击即可复制实体名称或数字代码。
浏览器特性兼容性搜索 - MDN数据本地查询
输入HTML/CSS/JS特性关键词，快速查看各浏览器版本支持情况，受@mdn/browser-compat-data驱动。
资源加载时间查看 - Performance API瀑布
显示当前页面所有资源的详细加载时序（DNS、连接、等待、接收），帮助优化。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子，提供代码复制。
流体排版 CSS 生成器 - clamp() 函数计算
输入最小/最大字体大小和视口范围，生成精确的 clamp() 值及回退方案。
HTTP/2 Server Push测试 - Link头解析
粘贴Link rel=preload头字段，解析展示服务器计划推送的资源列表。
常用表单片段库 - 登录/注册/搜索等
预置多种常见表单（登录、联系、搜索）的HTML代码，点击即可复制并稍作修改。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
Mock Service Worker演示 - 拦截并返回假数据
使用Service Worker拦截fetch请求，并返回用户自定义的JSON模拟数据，用于前端独立开发。
社交分享按钮生成器 - 多平台分享链接代码
选择平台和分享参数，生成分享到Twitter、Facebook、WhatsApp等的URL链接及按钮。
结构化克隆演示 - 深拷贝支持类型
选择各种数据类型演示structuredClone的深拷贝能力，对比JSON.parse的限制。
动画帧率分析器 - requestAnimationFrame 监控
显示当前页面动画的实时 FPS 图表，检测掉帧和卡顿，辅助性能优化。
错误代码速查器 - 常见报错及解决建议
输入常见的报错片段，基于静态库返回常见的解释和可能的修复方案。
CSS 关键帧时间轴编辑器 - 拖拽属性关键点
在时间轴上拖拽添加属性关键帧，实时预览动画并生成 @keyframes 代码。
IDB-Keyval 管理器 UI - 简单键值对数据库操作界面
提供一个用户界面来 get/set/del 基于 idb-keyval 库存储的数据，方便调试。
API响应模拟器 - JSON延迟/错误自定义
定义端点、JSON响应体和延迟毫秒，模拟后端API供前端本地开发调试。
CORS 预检请求测试器 - 发送 OPTIONS 分析响应
向指定 URL 发送预检请求，分析 Access-Control-* 响应头是否符合预期。
ES Module 与普通脚本对比演示 - 作用域与加载
对比 ES Module 和经典脚本的变量作用域、严格模式以及执行时机。
Snowflake ID 在线解析器 - Twitter 风格 ID 解构
输入一个 Snowflake 格式的数字 ID，解析出生成时间戳、数据中心、机器编号和序列号。