记录HTML中与性能/渲染有关的几个新属性
原文中文，约7200字，阅读约需17分钟。
📝
内容提要
本文介绍了HTML中与性能和渲染相关的新属性，包括<script>、<link>和<style>标签的blocking属性，以及<img>和<iframe>标签的loading属性和<a>和<link>标签的hreflang属性。这些属性可以控制资源加载和渲染行为。
❓
Q&A
HTML中blocking属性的作用是什么？
blocking属性允许开发者控制部分渲染的阻塞，直到特定资源加载完毕。
如何使用loading属性优化图片加载？
通过将loading属性设置为'loading="lazy"'，可以推迟图片加载，直到它们即将出现在可视视口中。
hreflang属性对SEO有什么影响？
hreflang属性可以改善用户体验和SEO，帮助搜索引擎了解不同语言版本的页面。
如何检测blocking属性是否生效？
可以在浏览器的开发者工具控制台中运行特定代码，查看渲染阻塞资源的列表。
使用blocking属性时需要注意什么？
在使用blocking属性时，<link>元素与rel='preload'或rel='modulepreload'一起使用时将无效。
translate属性的主要用途是什么？
translate属性用于指示元素是否应该被翻译，以避免不必要的翻译行为。
🏷️
