1、HTML 对话框元素

HTML 的 <dialog> 元素用于创建对话框或其他交互式组件，如弹出窗口、警告框等。它提供了一种标准化的方法来实现模态（modal）和非模态（non-modal）对话框。

基本用法

要定义一个对话框，可以使用 <dialog> 标签：

<dialog id="myDialog">
  <p>这是一个对话框。</p>
  <form method="dialog">
    <button>关闭</button>
  </form>
</dialog>

<dialog> 元素包含了一段文本和一个关闭按钮。<form method="dialog"> 的使用允许在点击按钮时自动关闭对话框。

可以使用 JS 来控制对话框的显示和关闭：

const dialog = document.getElementById('myDialog');

// 显示非模态对话框
dialog.show();

// 显示模态对话框
dialog.showModal();

// 关闭对话框
dialog.close();

可以使用 CSS 伪元素 ::backdrop 来自定义模态对话框的背景样式：

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

这将使对话框外的背景呈现半透明的黑色遮罩效果。 

注意事项

• 确保为对话框提供关闭机制，例如关闭按钮或点击背景关闭等。

• <dialog> 元素的 open 属性表示对话框当前是否显示。直接在 HTML 中添加 open 属性会使对话框默认显示。

• 在使用 showModal() 方法时，页面的其他部分将无法交互，直至对话框关闭。

2、Popover API

HTML 的 Popover API 提供了一种标准化的方法，用于创建和控制网页中的弹出式窗口（popover），无需依赖额外的 JavaScript 或 CSS。该 API 简化了弹出窗口的实现，确保了跨浏览器的一致性和易用性。

基本用法

要创建一个基本的弹出式窗口，需要以下两个元素：

• 触发按钮：用于打开或关闭弹出窗口。

• 弹出内容：包含实际显示的内容。

<button popovertarget="my-popover">打开弹窗</button>

<div id="my-popover" popover>
  <p>我是一个包含一些信息的弹窗。按下 <kbd>Esc</kbd> 键或点击弹窗外部将我关闭。</p>
</div>

当用户点击按钮时，浏览器会自动切换弹出窗口的显示状态。

popover 属性可以有两个值：

auto（默认值）：表示弹出窗口可以通过点击窗口外部区域或按下 Esc 键来关闭。

manual：表示弹出窗口需要通过编程方式或特定的用户交互来关闭，点击窗口外部不会自动关闭。

<div id="my-popover" popover="manual">
  <p>这是一个需要手动关闭的弹窗。</p>
  <button popovertarget="my-popover" popovertargetaction="hide">关闭</button>
</div>

JavaScript 控制弹出窗口

除了声明式的 HTML 属性外，Popover API 还提供了 JavaScript 方法来控制弹出窗口：

const popover = document.getElementById('my-popover');

// 显示弹窗
popover.showPopover();

// 隐藏弹窗
popover.hidePopover();

// 切换弹窗显示状态
popover.togglePopover();

可以使用 CSS 的 ::backdrop 伪元素来定制弹出窗口的背景样式：

#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

与 <dialog> 元素的区别

虽然 <dialog> 元素也用于创建对话框，但它与 Popover API 有以下区别：

• 模态性：<dialog> 元素可以创建模态对话框，阻止用户与页面其他部分交互；而 Popover API 创建的弹出窗口始终是非模态的，用户仍可与页面其他部分交互。

• 关闭方式：<dialog> 的模态对话框不会通过点击外部区域关闭，而 Popover API 的 auto 模式弹出窗口支持点击外部区域关闭。

3、loading="lazy" — 图片懒加载

loading="lazy" 属性用于延迟加载图片，只有当图片进入视口时（即用户滚动到图片位置附近），浏览器才会请求并加载该图片。这样可以显著减少初始加载时的资源请求，提高页面加载速度和性能。

<img src="image.jpg" alt="Example Image" loading="lazy">

浏览器支持：

loading="lazy" 已在大多数现代浏览器中得到支持，包括 Chrome、Firefox、Edge 和 Safari。对于不支持该属性的浏览器，图片将按常规方式加载。

4、rel="preload — 预加载资源

<link rel="preload"> 是一种预加载资源的方式，它允许开发者告诉浏览器，某个资源（如 CSS、JavaScript、图片等）将很快被使用，因此应该尽早加载。这种方法对于优化页面加载顺序和加速关键资源的获取非常有效。

<link rel="preload" href="style.css" as="style">

浏览器支持：

<link rel="preload"> 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。

区别

loading="lazy"：适用于图片等资源，在页面加载时按需加载资源，避免浪费带宽并加速页面加载。

<link rel="preload">：用于告知浏览器优先加载某些关键资源，确保页面关键部分尽早呈现，提升页面加载速度和性能。