2025 年 HTML 年度调查报告亮点速览！

1. 前言

近日「State of HTML 2025」年度调查报告公布。

这份报告收集了全球数万名开发者的真实使用经验和反馈，堪称是 Web 开发领域的“年度风向标”。

上篇文章我们盘点了使用最多的功能 Top 5，本篇我们盘点下这份报告的亮点部分。

注：目前 State of JS 2025 还未公布，欢迎关注公众号：冴羽，第一时间获取报告结果。

2. 延迟加载最常用

使用过延迟加载的受访者比例高达 70%，是“新可用（Newly Available）”功能中最常用的功能。

<!-- 这是一张图片，ocr 内容为：BASELINE STATUS: NEWLY AVAILABLE CATEGORY: A11 SORT BY: GROUP BY: HEARD OF IT USEDIT NEVER HEARD OF IT I COMMENTS SENTIMENT PERFORMANCE 只4,636 41 15% 3% 4% 51 40% 29% LAZY LOADING 21.9% 6.8% PERFORMANCE A4,627 5% 58 163 42% 21% 名% 5% SRCSET AND SIZES ATTXIBUTE 68.3% 21.9% ACCESSIBILITY 只4,377 20% 9% 23% 10% 19% 18% <SEARCH> 41.2% 29.1% 29.3% PERFORMANCE 84,613 011 26% 8% 22% 9% 16% 16% FETCHPRIORITY ATTRIBUTE 43.1% 30.8% 25.6% INTERACTIVITY 9% 26% A 5,111 20% 20 10% 20% 13% <DETAILS NAME> (EXCLUSIVE 22.9% 30.1% 46.6% -->

所谓延迟加载，指的是 loading="lazy"属性，该属性可以指定仅在需要时加载资源。

<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>

3. 内容安全策略（CSP）使用量增长最多

内容安全策略的使用量同比增长最大。

<!-- 这是一张图片，ocr 内容为：INTEREST &SATISFACTION POSITIVITY APPRECIATION AWARENESS USAGE USAGE: PROPORTION OF RESPONDENTS HAVING USED AN ITEM INTERACTIVITY :GRAPHICS &MULTIMEDIA FILTERS: WEB COMPONENTS PERFORMANCE CONTENT TOP ITEMS BOTTOM ITEMS SYSTEM CAPABILITIES LARGEST DECREASE FORMS ACCESSIBILITY LARGEST INCREASE 100% TABINDEX ATTRIBU... LANDMARK ELEMENTS 80% 80% <SVG>(INLINE SV... <CANVAS> 60% 60% LAZY LOADING SRCSET AND SIZES... 40% 46% CONTENT-SECURITY... <DETAILS> AND <S- 26% 20% <DIALOG> USING CUSTOM ELE... 0% 2024 2023 2025 -->

但同时，内容安全策略也是最令人失望的功能榜首 😂。

所谓内容安全策略，指的是网站向浏览器发出的一组指令，用于帮助检测和缓解 XSS 攻击。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />

4. <input type="color"/>表单使用最广泛

<input type="color"/> 是 2025 年使用最广泛的表单相关功能，41.8% 的受访者表示使用过该功能。

<!-- 这是一张图片，ocr 内容为：SORT BY: USEDITA NEVER HEARD OF IT HEARD OF IT COMMENTS GROUP BY: SENTIMENT EXPERIENCE TYPE`COLOR"><> 9烈 只6,048 O 53 9% 26% 7% 29% 14% <INPUT T 16.8% 40.4% 41.8% 只6,129 66 15% 14% 21郎 13起 13% 16% <DATALIST> 29.1% 29.7% 37.8% 6% 080 16% 8% INPUT.SHOWPICKER() 4% 25 25% 36% 63.6% 9.7% 25.3% 只 5,992 3% 17% 6% 22% 42% 17 6% CONTENTEDITABLE"PLAINTEXT 24% 8.6% 67% 只6,037 22招 20% CUSTOMIZABLE SELECT < 20% 021 28% 49.8% 7.1% 42.3% -->

5. JPEG XL 最受好评

JPEG XL 和 ctx.drawElement() 是图形方面两项最受好评的新功能。

<!-- 这是一张图片，ocr 内容为：SORT BY: GROUP BY: HEARD OF IT HEARDOFIT EXPERIENCE LUSEDIT4 COMMENTS SENTIMENT 84.947 <SVG> O22 (INLINE SVG) 51% 34% 6% 87.3% 8.7% 3.4% 026 23% 84.942 <CANVAS> 48% 17% 5% 24.1% 015 84,906 3% 7% 3% 15% 17% CTX.DRAWELEMENT()(HTMLIN 32% 20% 21.5% 28.1% 50% 只4,887 10% 44% 4% 6% 13% 15% WEBGL 19% 58.2% 只4,913 3% 7% 17% 50% 11% 7% COLORSPACE FOR 2D CANVAS 22.1% 67.8% 9.6% 7 只4,892 33% 4站 218 WEBGPU 34% 11% 3% 48.6% 5% 46.2% 5% 3% 只4,913 46% 20% 16% 60 <MODEL> FOR AR/VR/3D CONTE 6% 26.9% 68.6% 4.1% 33 9% 只4,902 378% 25% JPEGXL 20% 59.1% 3.7% 36.8% -->

关于这两项功能：

JPEG XL 是一种新型图像编码格式，它结合了现有的 JPEG 和 WebP 编码技术，旨在提供更好的压缩性能、更高的图像质量和更好的适用性，支持有损和无损压缩。它旨在超越现有的位图格式，并成为它们的通用替代。

ctx.drawElement() 使开发者可以在 HTML 元素上绘制 <canvas>：

<canvas id="canvas" layoutsubtree="true">
  <p>Hello world!</p>
</canvas>
<script type="module">
  const ctx = canvas.getContext("2d");
  const text = canvas.querySelector("p");
  ctx.drawElement(text, 30, 0);
</script>

6. hidden="until-found" 好多人从没听说过

你知道浏览器现在可以玩捉迷藏了吗？

这个 hidden="until-found" 属性可以让你隐藏一个元素，直到用户触发它，例如点击指向它的锚链接。

目前这项功能显然还处于“隐藏”状态，79.4% 的受访者甚至从未听说过它。

<!-- 这是一张图片，ocr 内容为：46.06年的受访者回答"*没所说过"并目没有选泽任何情绪 024 只4.713 303 36 29.4% -->

而且浏览器支持仍然有限（说的就是你，Safari！）。

但一旦互操作性得到改善，它或许会成为你工具箱中不可或缺的工具。

7. Sanitizer API 最受欢迎

最受欢迎和最不受欢迎的功能都与安全有关：

Sanitizer API 获得了最多的正面评价，而内容安全策略则位列最令人失望的功能榜首。

<!-- 这是一张图片，ocr 内容为：SORT BY: 只4,728 133% 99C 12N CONTENT-SECUXITY POLICY (C CO 只4,726 2.98 33 &TOMPLATE> 17% 23.48 &4,695 19年 艺力铭 INTL.LOCALE API CO 228 28M 27点 22% 只4,715 98 28M 13% 041 (HTML MODULES 32% 75% 35% 359 84.724 17 48 5% 355 2% 24.735 017 1787 48 26% INTL.SEGNENTER API 63 24,690 虫韩 21M 017 4.7% 12.6% (HIDDENZ'UNTIL-FOUND*CO) 9 4,713 465 30% 0241 11% 只4.729 35% <NAPVLEWER>(INLINE MAPML) -->

Sanitizer API 指的是 element.setHTML()以及 Document.parseHTML() API，通过清理 HTML 中不受信任的字符串来防止 XSS 攻击。

8. popover 可以开始用了

Popover API 今年正式上线，这意味着它现在已被四大主流浏览器全面支持。

所以现在正是学习该 API 的最佳时机。

其实 Popover API 学起来也很简单，它主要用于实现弹出窗口，例如覆盖层、弹窗、菜单等。

<button popovertarget="foo">Toggle the popover</button>
<div id="foo" popover>Popover content</div>

值得一提的是，Popover API 还是开发者投诉 “浏览器不支持” 最多的功能 —— 不是浏览器没跟上，是我们还没反应过来 “这个功能已经能用了”。

9. blocking="render" 知道的人多了起来

顾名思义，这个属性可以让<link>、<script>、<style>标签阻塞页面渲染，直到它们完全加载完毕。

不过浏览器支持尚未完全到位，但一旦得到广泛支持，它肯定会使网页加载用户体验更加流畅。

<!-- 这是一张图片，ocr 内容为：ALL RESPONDENTS QUERY BUILDER LUSED IT 1 GXOUP BY: SOXT BY: MEARD OF IT EXPEXIENCE 吕4.636 LAZY LOADING 29% 1558 2588 6.% 名4.627 21% 2639 42N 5% 只4.613 885 16% 26N 22亿 TETCHPRIORITY ATTRIBUTE 26% &4.624 313 016) 1459 13N 只4.607 010 68.1% 25.2% 6.2% -->

10. ElementInternals 可以开始用了

如果你编写过 Web 组件，那么你一定经常需要指定自定义伪类、默认 ARIA 参数，或者让组件的行为像常规表单元素一样。

ElementInternals 不仅能做到这些，还能做得更多！

而且它应用广泛，自 2023 年以来就受到所有浏览器的支持！

11. PaymentRequestAPI 值得密切关注

广告似乎已成为网络世界中不可避免的一部分，PaymentRequest API 可能是实现浏览器集成微支付的第一步。仅凭这一点，就值得我们密切关注。

目前支持度欠佳：

<!-- 这是一张图片，ocr 内容为：PAYMENT REQUEST COPY ID PAYMENT-REQUEST THE PAYMENTREQUEST API PROMPTS THE USER INTERFACE. SURVEYS BROWSER SUPPORT STATUS STATE OF HTML 2025 > SYSTEM CAPABILITIES > SYSTEM CHROME 60 RELEASED ON 2017-07-25 LIMITED AVAILABILITY CAPABILITIES FEATURES STATE OF HTML 2025 > FEATURES > ALL FEATURES CHROME ANDROID 53 RELEASED ON 2016-09-07 EDGE 15 RELE 5 RELEASED ON 2017-04-05 MDN DOCUMENTATION WEB PLATFORM TESTS(WPT) FIREFOX X PAYMENT REQUEST API VIEW THE LATEST WPT TEST RESULTS FOR THIS FEATURE FIREFOX FOR ANDROID X SAFARI 11.1 RELEASED ON 2018-04-12 SPECIFICATIONS DEVELOPER SIGNALS SAFARI ON IOS 11.3 RELEASED ON 2018-03-29 PAYMENT REQUEST API, FROM WEB PAYMENTS WORKING GROUP VOTES: 6 (W3C) BASELINE AVAILABILITY BLOCKED SINCE APRIL 2018 BY FIREFOX(93 MONTHS) IF YOU WANT THIS FEATURE TO BE AVAILABLE IN ALL BRO ALL BROWSERS,VOTE FOR IT BY ADDING A THUMBS UP REACTION( TO THIS GITHUB ISSUE,AND LEAVE A COMMENT WITH MORE INFORMATION. -->

12. <search>可以开始用了

<search> 元素属于那种只需稍加努力就能轻松添加到最佳实践列表中的实用技巧。

<search> 用于封装搜索用户界面的语义元素：

<search>
  <form action="search.php">
    <label>Find: <input name="q" type="search" /></label>
    <button>Go!</button>
  </form>
</search>

现在它已被四大主流浏览器支持，没有理由不使用它了。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。