HTML 早已不是标签了，它现在是系统级接口：这 9 个 API 直接干翻常用 JS 库
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<p>HTML 早已不再是简单的“超文本标记”，它更像是一个连接底层硬件、浏览器内核与用户交互的<strong>系统级接口集合</strong>。</p>
<p>在现代 Web 架构中，很多原本依赖庞大 JS 库（如 jQuery, Axios, Socket.io）实现的功能，现在通过原生 HTML API 就能以更低的功耗和更高的性能完成。</p>
<h3 data-id="heading-0">一、 Popover API：零 JS 实现“浮层顶层化”</h3>
<p><strong>场景：</strong> 在监控仪表盘中，点击“详细指标”展示一个不被父容器 <code>overflow: hidden</code> 遮挡的浮窗。</p>
<ul>
<li>
<p><strong>HTML 实现：</strong></p>
</li>
</ul>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><button popovertarget="metric-detail">查看详情</button>
<div id="metric-detail" popover>
<h4>实时指标详情</h4>
<p>CPU 负载: 85%</p>
</div></pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>底层干货：</strong> 它会自动进入浏览器的 <strong>Top Layer</strong>（顶层渲染层），层级永远高于 <code>z-index: 9999</code>，且无需任何 JS 监听点击外部关闭的逻辑。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-1">二、 Dialog API：受控的模态对话框</h3>
<p><strong>场景：</strong> 监控报警触发时，弹出一个强制用户交互的模态确认框。</p>
<ul>
<li>
<p><strong>HTML 与 JS 交互：</strong></p>
</li>
</ul>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><dialog id="alarm-dialog">
<form method="dialog">
<p>确认关闭此报警？</p>
<button value="cancel">取消</button>
<button value="confirm">确认</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('alarm-dialog');
// 1. 弹出模态框：自带背景遮罩 (::backdrop)
dialog.showModal();
// 2. 获取结果：无需监听按钮点击，直接监听 close 事件
dialog.addEventListener('close', () => {
console.log('用户选择了：', dialog.returnValue); // 'confirm' 或 'cancel'
});
</script></pre>
</div>
<h3 data-id="heading-2">三、 Speculation Rules API：让页面跳转“瞬发”</h3>
<p>场景： 监控首页有很多链接通往“分析页”，你预测用户 80% 的概率会点第一个链接。</p>
<ul>
<li>
<p>具体配置：</p>
</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><script type="speculationrules">
{
"prerender": [{
"source": "list",
"urls": ["/analysis/cpu-metrics"],
"score": 0.8
}]
}
</script></pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>工程意义：</strong> 这不是简单的预加载，而是<strong>预渲染</strong>。浏览器会在后台开启一个隐形标签页渲染目标页面。当用户点击时，页面切换时间趋于 <strong>0ms</strong>。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-3">四、 View Transitions API：极致的 UI 平滑度</h3>
<p><strong>场景：</strong> 在监控系统中，从“列表视图”切换到“详情视图”，希望卡片能有一个平滑的缩放位移动画。</p>
<ul>
<li>
<p><strong>代码实现：</strong></p>
</li>
</ul>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">function switchView() {
// 1. 检查浏览器支持
if (!document.startViewTransition) {
updateDOM(); // 降级处理
return;
}
// 2. 开启视图转换
document.startViewTransition(() => {
// 在回调函数中执行 DOM 变更
updateDOM();
});
}
</pre>
</div>
<ul>
<li>CSS 配合：</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/* 给需要动画的元素定义一个唯一的转换名称 */
.metric-card {
view-transition-name: active-card;
}</pre>
</div>
<ul>
<li>
<p>原理： 浏览器会截取“旧状态”和“新状态”的快照，并自动在两者之间创建位移、缩放和淡入淡出动画。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-4">五、 WebAssembly (Wasm) 与 JS 的零拷贝交互</h3>
<p>场景： 监控系统中，前端需要实时计算成千上万个点的趋势。</p>
<ul>
<li>
<p>具体用法：</p>
</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 在 HTML 中直接通过 Module 引入
import init, { calculate_metrics } from './analytics_bg.wasm';
async function run() {
await init();
const buffer = new SharedArrayBuffer(1024); // 使用共享内存
const view = new Float64Array(buffer);
// 直接把内存地址传给 Wasm 处理，避免数据在大规模拷贝时的开销
const result = calculate_metrics(view);
}</pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>工程价值：</strong> HTML 通过 Module 赋予了 Wasm 极高的集成度。对于计算密集型任务，这是 Node.js 或前端的终极提速手段。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-5">六、 WebTransport API：HTTP/3 时代的实时通信</h3>
<p><strong>场景：</strong> 在你的监控系统中，如果有数万台设备在毫秒级上报数据，WebSocket 的 TCP 队头阻塞（Head-of-Line Blocking）会导致延迟堆积。</p>
<ul>
<li>
<p><strong>具体用法：</strong></p>
</li>
</ul>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 建立基于 HTTP/3 QUIC 的连接
const transport = new WebTransport("https://metrics.your-server.com:443");
await transport.ready;
// 发送不可靠（双向）流：适合对实时性要求极高、丢失一两帧也没关系的监控指标
const writer = transport.datagrams.writable.getWriter();
const data = new TextEncoder().encode(JSON.stringify({ cpu: 85 }));
await writer.write(data);</pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>工程价值：</strong> 它基于 UDP，不仅比 WebSocket 更快，还支持多路复用。即使网络波动，其中一个流卡住了，也不会影响其他流。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-6">七、 Intersection Observer API (V2)：精准感知“真实可见性”</h3>
<p><strong>场景：</strong> 监控 SDK 的广告反欺诈，或者极高性能的长列表渲染。</p>
<ul>
<li>
<p><strong>具体用法：</strong></p>
</li>
</ul>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// isVisible 会检测该元素是否被其他元素遮挡，或者是否有滤镜/透明度导致看不见
if (entry.isIntersecting && entry.isVisible) {
sendMetric('element-real-view');
}
});
}, {
trackVisibility: true, // 开启真实可见性追踪
delay: 100 // 延迟检测以减轻 CPU 压力
});
observer.observe(targetNode);</pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>工程价值：</strong> 它是实现“无感监控”的利器。相比于 V1，它能告诉你用户是否<strong>真的</strong>看到了元素，而不仅仅是元素在视口内。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-7">八、 Compression Streams API：浏览器原生无损压缩</h3>
<p><strong>场景：</strong> 监控 SDK 在上报巨大的 JSON 日志（如数 MB 的错误堆栈）前，先在前端进行压缩。</p>
<ul>
<li>
<p><strong>具体用法：</strong></p>
</li>
</ul>
</div>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">async function compressAndSend(data) {
const stream = new Blob().stream();
const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
// 这里的 response 就是 Gzip 压缩后的二进制流
const response = await new Response(compressedStream).blob();
navigator.sendBeacon('/log', response);
}</pre>
</div>
<div>
<div>
<ul>
<li>
<p><strong>工程价值：</strong> 彻底抛弃 <code>pako.js</code> 等三方库，减少了包体积，且利用浏览器原生能力，压缩效率更高。</p>
</li>
</ul>
<hr>
<h3 data-id="heading-8">九、 File System Access API：把 Web 应用变成本地工具</h3>
<p><strong>场景：</strong> 开发一个本地离线日志分析工具，直接读取并保存用户的 GB 级日志文件。</p>
<ul>
<li>
<p><strong>具体用法：</strong></p>
</li>
</ul>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">async function openLogFile() {
// 1. 获取文件句柄
const = await window.showOpenFilePicker();
const file = await handle.getFile();
// 2. 像 Node.js 一样获取可写流
const writable = await handle.createWritable();
await writable.write("New Log Entry");
await writable.close();
}</pre>
</div>
<ul>
<li>
<p>工程价值： 不再是 <code>input type="file"</code> 那种简单的“上传”，而是真正实现了对文件的双向读写。</p>
</li>
</ul>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19744596
頁:
[1]