你已经用动画完善了 tooltip 的行为。现在是确保出色性能的时候了。

由于 tooltip 仅在用户与目标交互时才显示，因此在交互之前不需要创建 tooltip。如果一个页面使用了大量 tooltip（这种情况并不少见），添加此优化可以显著加快页面初始渲染速度。

为此，你将创建一个函数，用户使用 tooltip 目标元素和一个回调来调用该函数，该回调会在需要时按需渲染 tooltip 内容。

向 SimpleTooltip 类添加一个名为 lazy 的 static 方法。它将在目标元素上设置事件监听器，监听与触发 tooltip 相同的事件。监听器创建 tooltip 元素并用用户回调填充内容，然后显示它。在类定义的顶部附近添加：

simple-tooltip.

Permalink to "simple-tooltip."

// 延迟创建
static lazy(target: Element, callback: (target: SimpleTooltip) => void) {
  const createTooltip = () => {
    const tooltip = document.createElement('simple-tooltip') as SimpleTooltip;
    callback(tooltip);
    target.parentNode!.insertBefore(tooltip, target.nextSibling);
    tooltip.show();
    // 我们只需要创建一次 tooltip，所以忽略所有后续事件。
    enterEvents.forEach(
      (eventName) => target.removeEventListener(eventName, createTooltip));
  };
  enterEvents.forEach(
    (eventName) => target.addEventListener(eventName, createTooltip));
}

// 延迟创建
static lazy(target, callback) {
  const createTooltip = () => {
    const tooltip = document.createElement('simple-tooltip');
    callback(tooltip);
    target.parentNode!.insertBefore(tooltip, target.nextSibling);
    tooltip.show();
    // 我们只需要创建一次 tooltip，所以忽略所有后续事件。
    enterEvents.forEach(
      (eventName) => target.removeEventListener(eventName, createTooltip));
  };
  enterEvents.forEach(
    (eventName) => target.addEventListener(eventName, createTooltip));
}

现在打开 my-content. 模块，将 greeting 的 tooltip 改为使用 lazy 方法。为此，首先移除内联的 tooltip：

my-content.

Permalink to "my-content."

<p>
  <span id="greeting">Hello, ${this.name}! <span class="icon">info_outline</span></span>
</p>

然后定义一个 firstUpdated 生命周期回调来设置对 lazy 的调用。

import {SimpleTooltip} from './simple-tooltip.js';

@customElement('my-content')
export class MyContent extends LitElement {
  // ...
  firstUpdated() {
    const greeting = this.shadowRoot!.getElementById('greeting')!;
    SimpleTooltip.lazy(greeting, (tooltip: SimpleTooltip) => {
      tooltip.textContent = `${this.name}, there's coffee available in the lounge.`;
    });
  }

import {SimpleTooltip} from './simple-tooltip.js';

export class MyContent extends LitElement {
  // ...
  firstUpdated() {
    const greeting = this.shadowRoot.getElementById('greeting');
    SimpleTooltip.lazy(greeting, (tooltip) => {
      tooltip.textContent = `${this.name}, there's coffee available in the lounge.`;
    });
  }

问候语元素的 tooltip 现在应该仍然正常工作，但它是在触发"进入"事件时按需创建的。如果你对所有 tooltip 都这样做，就可以确保它们不会对页面初始渲染造成性能损失。