Wayne的技术博客
·
记录HTML中与性能/渲染有关的几个新属性
💡
原文中文，约7200字，阅读约需17分钟。
📝
内容提要
本文介绍了HTML中与性能和渲染相关的新属性，包括<script>、<link>和<style>标签的blocking属性，以及<img>和<iframe>标签的loading属性和<a>和<link>标签的hreflang属性。这些属性可以控制资源加载和渲染行为。
🎯
关键要点
- HTML中与性能和渲染相关的新属性包括blocking、loading和hreflang属性。
- <script>、<link>和<style>标签的blocking属性可以控制资源加载和渲染行为。
- blocking属性允许开发者控制部分渲染的阻塞，直到特定资源加载完毕。
- 设置blocking="render"用于标记必须加载完成的资源，浏览器在这些资源加载完成之前不会绘制任何像素。
- 内联脚本和模块脚本也可以使用blocking属性来控制渲染阻塞。
- <link>元素可以设置blocking属性，但与rel="preload"或rel="modulepreload"一起使用时将无效。
- 通过在<head>中放置<link>元素，可以根据特定HTML元素的解析状态来阻塞渲染。
- 使用renderBlockingStatus可以检测blocking属性是否生效。
- <img>和<iframe>标签的loading属性可以控制资源的加载行为，优化页面加载时间。
- loading属性的值为"lazy"时，图片和iframe会在需要时才加载，减少初始页面加载时间。
- 使用hreflang属性可以改善用户体验和SEO，指定链接资源的语言。
- 在内部和外部网站链接中使用hreflang可以帮助搜索引擎了解不同语言版本的页面。
- translate属性用于指示元素是否应该被翻译，避免不必要的翻译行为。
❓
延伸问答
HTML中blocking属性的作用是什么？
blocking属性允许开发者控制部分渲染的阻塞，直到特定资源加载完毕。
如何使用loading属性优化图片加载？
通过将loading属性设置为'loading="lazy"'，可以推迟图片加载，直到它们即将出现在可视视口中。
hreflang属性对SEO有什么影响？
hreflang属性可以改善用户体验和SEO，帮助搜索引擎了解不同语言版本的页面。
如何检测blocking属性是否生效？
可以在浏览器的开发者工具控制台中运行特定代码，查看渲染阻塞资源的列表。
使用blocking属性时需要注意什么？
在使用blocking属性时，<link>元素与rel='preload'或rel='modulepreload'一起使用时将无效。
translate属性的主要用途是什么？
translate属性用于指示元素是否应该被翻译，以避免不必要的翻译行为。
🏷️
标签
➡️
