记录HTML中与性能/渲染有关的几个新属性
内容提要
本文介绍了HTML中与性能和渲染相关的新属性，包括<script>、<link>和<style>标签的blocking属性，以及<img>和<iframe>标签的loading属性和<a>和<link>标签的hreflang属性。这些属性可以控制资源加载和渲染行为。
延伸解读
blocking 属性的适用边界与限制
blocking="render" 能强制浏览器在资源加载完成前不绘制像素，但它并非万能。文章指出，当 <link> 与 rel="preload" 或 rel="modulepreload" 一起使用时，blocking 属性不会生效。此外，通过 JavaScript 动态添加到 <head> 的元素默认不阻塞渲染，需显式设置 blocking 才能改变行为。开发者需注意这些边界，避免误以为所有场景下 blocking 都能控制渲染时机。
懒加载对 load 事件时机的实际影响
loading="lazy" 会推迟图片和 iframe 的加载，但文章强调，懒加载的资源不会推迟 load 事件的触发。即使图片在可视视口内，若设置了 lazy，它也不会在处理元素时立即加载，但仍会作为初始加载的一部分，只是不影响 load 事件。这意味着当 load 触发时，可视区域内的懒加载图片可能尚未显示，依赖 load 事件判断页面完全就绪的代码需留意这一差异。
hreflang 与 translate 的协同使用场景
hreflang 用于告知搜索引擎链接资源的语言和地区，帮助不同语言用户获得对应版本；而 translate 属性则控制元素内容是否应被自动翻译工具处理。文章举例说明，公司名称、代码示例等不应翻译的内容可用 translate="no" 避免混淆。两者结合，既能优化多语言站点的 SEO 和用户体验，又能防止关键术语被错误翻译，适合在语言切换器和多语言页面中配合使用。
Q&A
HTML中blocking属性的作用是什么？
blocking属性允许开发者控制部分渲染的阻塞，直到特定资源加载完毕。
如何使用loading属性优化图片加载？
通过将loading属性设置为'loading="lazy"'，可以推迟图片加载，直到它们即将出现在可视视口中。
hreflang属性对SEO有什么影响？
hreflang属性可以改善用户体验和SEO，帮助搜索引擎了解不同语言版本的页面。
如何检测blocking属性是否生效？
可以在浏览器的开发者工具控制台中运行特定代码，查看渲染阻塞资源的列表。
使用blocking属性时需要注意什么？
在使用blocking属性时，<link>元素与rel='preload'或rel='modulepreload'一起使用时将无效。
translate属性的主要用途是什么？
translate属性用于指示元素是否应该被翻译，以避免不必要的翻译行为。
