#名词区别篇：事件流事件委托addEventListener白屏时间首屏时间

news2024/9/23 17:18:32

事件流

事件捕获 —从外到内

到达目标

事件冒泡—从内到外

事件委托

定义：当有大量子元素触发事件时，将事件监听器绑定在父元素进行监听，此时数百个事件监听器变成一个监听器。

e.currentTarget 与 e.target 有何区别

Event 接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 Event.target 则是事件触发的元素。

addEventListener

const myElement = document.getElementById('myElement');

// 添加事件监听器，捕获阶段触发，只触发一次
myElement.addEventListener('click', myFunction, { capture: true, once: true });

function myFunction(event) {
  console.log('Element clicked once during the capture phase.');
}

addEventListener 还有一些可选参数：

capture： 一个布尔值，指定事件是在捕获阶段（true）还是冒泡阶段（false）触发监听器。

默认为 false，即在冒泡阶段触发。
once： 一个布尔值，指定监听器是否在执行后自动删除。

如果为 true，则监听器只会在元素上的下一个事件发生时触发一次，然后自动删除。
passive： 一个布尔值，如果为 true，表示监听器永远不会调用 preventDefault()。这对于优化滚动性能非常有用

白屏时间

白屏时间是指用户打开网页到页面开始呈现内容的时间间隔。具体来说，白屏时间包括了从用户发起导航到浏览器开始渲染第一帧内容之前的时间。

计算白屏时间的一种方法是使用浏览器的 performance.timing API。以下是一个示例：

const navigationStart = performance.timing.navigationStart;
const domLoading = performance.timing.domLoading;

const blankScreenTime = domLoading - navigationStart;
console.log('白屏时间：', blankScreenTime, '毫秒');

首屏时间

首屏时间是指用户打开网页到浏览器首次渲染页面的时间间隔。具体来说，它表示浏览器首次将像素呈现到屏幕上的时间。

计算首屏时间通常使用 performance.getEntriesByType('paint') 方法，检索页面渲染相关的性能条目。以下是一个示例：

const paintEntries = performance.getEntriesByType('paint');
const firstPaintTime = paintEntries.length > 0 ? paintEntries[0].startTime : 0;
console.log('首屏时间：', firstPaintTime, '毫秒');

在上述示例中，performance.getEntriesByType('paint') 返回页面的 paint 类型性能条目数组，其中包括首次绘制（first-paint）和首次内容绘制（first-contentful-paint）等。示例中直接使用了第一个 paint 条目的 startTime 属性作为首屏时间。

需要注意的是，首屏时间的计算方式可能因浏览器而异。在上述示例中，使用了 first-paint，但有些浏览器可能使用 first-contentful-paint 或其他类似的指标。在实际使用中，最好结合使用不同的指标以获得更全面的性能信息。