CSS新方法 mask-composite 属性对于使用 CSS 剪切 特定形状mask-image非常有用。通过使用属性将遮罩图像mask-image应用到元素，您可以仅遮罩该图像的不透明部分。mask-image自 2024 年起可用的属性mask-composite允许您指定如何合成掩码。mask-composite 属性的值与其 mask 结果之间的差异mask-composite该属性用于指定如何组合多个蒙版图像。事实上，mask-image属性还支持指定多个图像。从多个图像生成遮罩区域时，mask-composite您可以使用属性创建复杂的遮罩区域。background-image可以通过用逗号分隔来指定多个蒙版图像，就像多个属性一样。mask-image: url("mask1.png"), url("mask2.png");mask-sizemask-position也可以指定多个属性和属性。mask-image相应的值将按此顺序应用。/* 图片1 100px 100px 图像2 50px 50px */ mask-size: 100px 100px, 50px 50px; /* 图片位置*/ mask-position: 0 0, 50px 50px;mask-composite当多个蒙版图像像这样放置时，该属性决定了蒙版图像如何组合。mask-composite该属性有四个值：addsubtractintersectexclude默认值为add，它会添加每个区域。subtract从第一个遮罩图像中减去第二个遮罩图像。intersect遮罩区域是遮罩图像的重叠部分。遮罩区域是exclude遮罩图像的重叠区域以外的区域。下图将帮助您理解差异。根据遮罩图像和合成方法得出的遮罩区域结果mask-composite如果有三个或更多图像，可以使用多个属性来指定重叠程度，但会变得复杂。基本上，它是根据上面的遮罩图像以相反的顺序计算的（稍后描述）。例如，mask-composite假设您有三个遮罩图像和属性，如下所示。mask-image: url("mask1.png"), url("mask2.png"), url("mask3.png"); mask-composite: add, subtract;此时，我们是从上到下处理的，所以mask2.png首先我们将mask3.png和组合起来，然后将结果与组合起来。subtract mask1.png add注意兼容模式-webkit-mask-composite，2024年后可以不用写前缀。使用 mask-composite 构建蒙版现在将mask-composite介绍使用属性的蒙版组合的更实用的表现形式。中间切一个圆圈的面具通过使用中间带有黑色圆圈的遮罩图像，可以遮盖特定区域以外的部分，mask-composite: exclude这在过去是很困难的。这可以通过 HTML 和 CSS 来实现，如下所示<div class="centerHoleMask"></div>.centerHoleMask { mask-image: linear-gradient(#000, #000), url(".svg"); mask-repeat: no-repeat; mask-position: 0 0, center center; mask-size: 100% 100%, 480px 320px; mask-composite: exclude; }mask-image第一个属性值为linear-gradient()，用于屏蔽整个区域。第二个指定一个带有黑色中心的圆形蒙版图像。mask-composite: exclude从整体中除去中间圆形部分的区域成为遮罩。这种方法的优点是可以轻松适应屏幕尺寸的变化。以前，这是通过准备一个除中心之外填充不透明的图像来处理的，但是当屏幕比蒙版图像大时，某些部分无法正确蒙版，并且蒙版中孔的大小可能会改变。有很多限制，比如必须这样做。不过，通过这种方法，即使屏幕变大，也可以固定遮罩孔并扩大遮罩面积。使用蒙版的动画在某些情况下，单独为蒙版预先创建和排列这样的图像就足够了，但 CSS 蒙版的优点是可以用蒙版动画表达广泛的表情。使用交叉点的动画这是一个动画，其中两个图像流动，另一个图像显示在它们重叠的位置。<img src="/assets/images/bg.webp" class="intersectionAnimationImage intersectionAnimationImage1" /> <img src="/assets/images/bg2.webp" class="intersectionAnimationImage intersectionAnimationImage2" /> <img src="/assets/images/bg3.webp" class="intersectionAnimationImage intersectionAnimationImage3" />.intersectionAnimationImage { mask-repeat: no-repeat; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; } .intersectionAnimationImage1 { mask-image: url("/assets/images/intersection_mask1.png"); animation-name: intersection1; } .intersectionAnimationImage2 { mask-image: url("/assets/images/intersection_mask2.png"); animation-name: intersection2; } .intersectionAnimationImage3 { mask-image: url("/assets/images/intersection_mask1.png"), url("/assets/images/intersection_mask2.png"); mask-composite: intersect; animation-name: intersection3; } @keyframes intersection1 { 0% { mask-position: -1280px 0; } 100% { mask-position: 0 0; } } @keyframes intersection2 { 0% { mask-position: right -1280px bottom 0; } 100% { mask-position: right 0 bottom 0; } } @keyframes intersection3 { 0% { mask-position: -1280px 0, right -1280px bottom 0; } 100% { mask-position: 0 0, right 0 bottom 0; } }1图像和2图像使用单独的掩模图像进行流式传输，但交叉点处的3图像是两个掩模的合成。通过更改动画的关键帧mask-position，您可以移动蒙版位置并营造图像流动的印象。使用圆形蒙版的过渡表现一个使用转换的表现作为使用前面提到的圆形掩码的高级表现。<img src="/assets/images/bg.webp" /> <div class="transitionAnimationMask transitionAnimationMask1"></div> <div class="transitionAnimationMask transitionAnimationMask2"></div>.transitionAnimationMask { mask-image: linear-gradient(#000, #000), url("/assets/images/mask_circle.svg"); mask-repeat: no-repeat; mask-position: 0 0, center center; mask-size: 100% 100%, 0 0; mask-composite: exclude; animation-timing-function: var(--ease-out-quart); animation-fill-mode: forwards; } .transitionAnimationMask1 { animation-duration: 1s; animation-delay: 0.2s; &.isActive { animation-name: maskAnimation; } } .transitionAnimationMask2 { animation-duration: 1.1s; &.isActive { animation-name: maskAnimation; } } @keyframes maskAnimation { 0% { mask-size: 100% 100%, 0 0; } 100% { mask-size: 100% 100%, 800px 800px; } }两个蒙版图像放置在背景图像上方。通过对每个蒙版应用圆形蒙版并使用动画更改蒙版大小，可以创建一个使背景图像呈现圆形的表现。第一个和第二个动画的开始时间略有不同，持续时间也略有不同，从而产生一种扩展的过渡效果。与滚动相关的遮罩表现通过进一步应用过渡蒙版示例，我们将介绍与滚动相关的蒙版表现。这是一种看起来像是可以通过字母“GO”的字母O上的孔看到背景图像的表现。<div class="scrollMask"> <div class="scrollMaskInner"> <div class="wall"> <div class="wallMask"></div> <div class="text">GO</div> </div> <img class="wallImage" src="/assets/images/bg.webp" /> </div> </div>.wallMask { background-color: var(--color-primary); mask-image: linear-gradient(#000, #000), radial-gradient(#000 0, #000 50%, transparent 50%, transparent 100%); mask-repeat: no-repeat; mask-position: 0 0, 323px 237px; /* 「O」定位位置 */ mask-size: 100% 100%, 16px 18px; /* 「O」的size */ mask-composite: exclude; transform-origin: 331px 246px; /*「O」中心起点位置 */ }// 缩放大小 const ENOUGH_SCALE = 94; const scrollArea = document.querySelector(".scrollMask"); const wallMask = document.querySelector(".wallMask"); const text = document.querySelector(".text"); // 根据滚动事件更改缩放 scrollArea.addEventListener("scroll", (event) => { // 按滚动量放大 const scaleRatio = 1 + event.target.scrollTop / 11; if (event.target.scrollTop < 0) { return; } text.style.scale = `${scaleRatio}`; wallMask.style.scale = `${scaleRatio}`; // 当足够大时隐藏 if (scaleRatio > ENOUGH_SCALE) { wallMask.style.visibility = "hidden"; } else { wallMask.style.visibility = "visible"; } });蒙版和文本位置position: sticky是固定的，但请根据使用情况适当更改。

popover API 2023 年 5 月至 6 月发布的Chrome 114和 Edge 114配备了名为“Popover API”的 API。弹出框和模态框之间的区别弹出窗口和模态框都是显示在屏幕顶部的 UI，但关键的区别在于它们是否允许在显示时操作其他元素。显示模式时，无法进行滚动或单击其他元素等操作。另一方面，这次介绍的弹出窗口是一个 UI，允许您在显示时操作其他元素。没有 JavaScript 的弹出窗口使用 popover API，您可以在不使用 JavaScript 的情况下创建如下所示的 popover。只需指定HTML属性即可实现实现这个弹出窗口非常简单。popover将属性赋予弹出框主体并为其指定任意 id（id="popover1"等等）。向要控制 popover 打开和关闭的按钮添加属性popovertarget，并指定 1 中给出的 id。<!-- 控制弹出按钮 --> <button popovertarget="popover1">Popover 1</button> <!-- 弹窗 --> <div id="popover1" popover class="popover-content"> <p>不使用JavaScript就可以实现最低限度的功能。</p> </div> <!-- 控制弹出按钮 --> <button popovertarget="popover2">Popover 2</button> <!-- 弹窗 --> <div id="popover2" popover class="popover-content"> <p>打开第二个弹出按钮后，第一个自动关闭</p> </div>这就是创建一个简单的弹出窗口所需的全部内容。除了易于实现之外，popover API 还标配有有用的功能。弹出框 API 中包含的标准功能(1)放置在顶层 使用此 API 的弹出框主体默认放置在顶层。该层比较特殊，z-index总是出现在屏幕的顶部，无论其他元素的值如何。 (2) 可以轻松取消 您可以通过“在弹出窗口外部单击”或“按某个键”来Esc关闭弹出窗口。 MDN 文档称此为“轻微驳回”。 (3) 如果有多个popover，其他的会自动关闭 通常，屏幕上只能显示一个弹出窗口。因此，如果有两个弹出窗口，并且您在第一个弹出窗口打开时打开第二个弹出窗口，则第一个弹出窗口将自动关闭。添加弹出窗口样式:popover-open：指向弹出窗口的打开状态的伪类。::backdrop：放置在弹出框后面作为背景的伪元素。/* :popover-open 开启时 */ .popover-content:popover-open { width: 300px; height: 120px; border-radius: 8px; border: none; padding: 24px; box-shadow: 8px 8px 10px #707070; background: #ffffff; } /* 背景 ::backdrop */ .popover-content::backdrop { background-color: #505050; opacity: 0.5; }Toast 实现这是一个实现 Toast 的示例，该 Toast 通知用户进程已完成或使用 popover API 出现错误。手动显示/隐藏弹出窗口在第一个例子中popover，popovertarget我们通过指定HTML属性来实现popover的显示/隐藏。这次，我将使用JavaScript来手动切换显示/隐藏。这里以下四点很重要。指定创建为 toast 的div元素的popover属性。manual通过这样做，您可以创建一个不具有“轻松释放”和“屏幕上只有一个弹出窗口”功能的弹出窗口。显示 toast 时showPopover()使用该方法。使用此方法显示时，它将被放置在顶层。hidePopover()使用一种方法来隐藏吐司。hidePopover()如果您这样做，该元素将保留在 DOM 中，因此remove()请使用该方法将其从 DOM 中删除。const setupToast = ({ message, cssName }) => { // 创建dom 添加至 body const toast = createToastElm(message, cssName); document.body.appendChild(toast); // ⭐️showPopover 显示方法 toast.showPopover(); // -----省略----- }; /** * 创建Toast * @param {string} message 文本内容 * @param {string} cssName cssName * @return {HTMLDivElement} 返回dom */ const createToastElm = (message, cssName) => { const toast = document.createElement("div"); // popover "manual" 指定属性 toast.popover = "manual"; // -----省略----- // 关闭按钮 const closeButton = document.createElement("button"); closeButton.addEventListener("click", () => removeToast(toast)); toast.appendChild(closeButton); return toast; }; /** * 删除 toast * @param {HTMLDivElement} toast 删除dom */ const removeToast = (toast) => { toast.hidePopover(); toast.remove(); };切换事件检测在此示例中，当创建或删除新 toast 时，toast 会重新排列并设置动画。处理顺序如下。检测toast显示/隐藏做动画显示时（创建新的 toast）： 底部轻柔地显示一个新的 toast。隐藏时（toast 被删除）：将整个内容向上移动事件用于检测 toast 是显示还是隐藏toggle。toggle该事件对于弹出框元素是唯一的，并且在显示或隐藏后立即触发。传递给此事件的event对象的值newState用于进一步分支动画。// 显示和隐藏时重新排列 toast.addEventListener("toggle", (event) => { alignToast(event.newState === "closed"); }); // -----省略----- const alignToast = (withMoveAnim) => { const toasts = document.querySelectorAll(".toast"); // 把Toast按顺序竖着摆 // withMoveAnim true：opacity translate 动画 // withMoveAnim false：opacity 动画 toasts.forEach((toast, index) => { toast.style.transition = withMoveAnim ? "translate 0.2s linear, opacity 0.2s linear" : "opacity 0.2s linear"; toast.style.translate = `0px ${(56 + 10) * index}px`; toast.style.opacity = 1; }); };event.newState 当值为 closed 时，会执行动画将屏幕上剩余的 toast 移至顶部，因为 toast 已消失；否则（event.newState值为open）时，执行动画以显示它们。除了动画之外，我们还实现了一个在显示3秒后自动删除toast的实现

has() CSS 新样式 2024 年浏览器可以使用 CSS 伪类 :has()。这个:has()伪类具有非常强大的潜力。这是:has()因为伪类允许您为任何关系指定选择器。:has() 伪类的基本用法:has()伪类通过传递给它的选择器来选择父元素。例:<p class="text"> <strong>隐约雷鸣</strong> 阴霾天空 但盼风雨来 能留你在此 </p> <p class="text">隐约雷鸣 阴霾天空 即使天无雨 我亦留此地</p>.text { color: #000; } .text:has(strong) { color: red; }由于第一个元素.text有标签，因此:has(strong)应用伪类，文本颜色变为红色。第二个.text元素没有标签，因此文本颜色保持黑色。就其本身而言，这只是父元素的选择器，但:has()伪类的真正强大之处在于它们允许您追溯到父元素，从而允许您编写超越 HTML 中的父子关系的选择器。在 JavaScript 中使用 has()当使用 Canvas 等进行绘制时，可以使用 JavaScript 来控制视觉变化。在这种情况下，您不仅可以在 CSS 中使用:has()伪类，还可以将其用作 JavaScript 函数的查询。querySelector()// 鼠标坐标 const mousePosition = { x: 0, y: 0 }; // 粒子默认值 const defualtSettings = { /* 省略 */ }; // 粒子设置 let particleSettings = { /* 省略 */ }; document.addEventListener("mousemove", (event) => { // 更新鼠标坐标并更改粒子位置 mousePosition.x = event.pageX; mousePosition.y = event.pageY; const isATagHovered = document.querySelector("body:has(a:hover)"); if (isATagHovered) { // 悬停时更改粒子设置 particleSettings = { ...defaultSettings, particleNum: 4, xVariance: 70, yVariance: 70, }; } else { // 否则返回默认设置 particleSettings = { ...defaultSettings }; } });:has()使用的好处是不需要为各个标签设置事件处理程序，mousemove悬停控制可以在事件内完成。在此示例中，与事件处理程序相比，使用标签:has()可能没有太大优势，但在处理复杂状态时，可能很难同时组合来自不同事件处理程序的处理。它将在处理复杂的 Canvas 表达式时展现出它的威力。

图片压缩 AVIFAVIF（AV1 Image File Format）是一种高效的图像压缩格式，基于开放、免费的视频编解码器AV1。它提供了比传统的图像格式（如JPEG）更好的压缩率，同时保持了更高的视觉质量。以下是AVIF压缩格式的一些特点和优势：高效压缩率 ：AVIF采用现代视频编解码技术，在相同质量下通常可以实现更小的文件大小。支持广泛的颜色深度 ：AVIF支持8位、10位和12位的颜色深度，并且能够表示广泛的颜色范围。支持HDR（高动态范围） ：AVIF能够处理高动态范围的图像，使得显示设备能够呈现更丰富的颜色和明暗细节。透明度支持 ：AVIF支持alpha通道，可以实现高质量的透明图像。渐进式加载 ：AVIF支持渐进式加载，允许图像在加载过程中逐渐显示出更高质量的内容，有助于改善用户体验。广泛的浏览器支持 ：越来越多的现代浏览器已经开始支持AVIF格式，这意味着可以在Web上使用AVIF图像以提供更好的性能和用户体验。 总的来说，AVIF是一种非常有前景的图像压缩格式，具有出色的压缩率和视觉质量，适合用于各种场景，包括网页图像、移动应用程序和数字媒体等。Browser JPEGBrowser JPEG并不是一种特定的图像格式，而是在浏览器中展示JPEG图像的过程。JPEG（Joint Photographic Experts Group）是一种常见的图像压缩格式，用于存储和传输照片等真实场景图像。当一个JPEG图像被加载到Web页面中时，浏览器会根据HTML代码中的标签或CSS样式将其显示出来。浏览器会解码JPEG图像文件，并通过浏览器的渲染引擎将其呈现给用户。浏览器通常会对JPEG图像进行优化，以提高加载速度和性能。这种优化通常包括：图像压缩 ：JPEG图像已经使用了有损压缩算法，但浏览器可能会进一步优化压缩级别以减小文件大小，加快加载速度。异步加载 ：浏览器可以异步加载JPEG图像，以避免阻塞网页的加载时间。懒加载 ：当页面中存在大量图片时，浏览器可能会延迟加载视口外的图片，只有当用户滚动页面至图片位置时才加载它们。响应式设计支持 ：浏览器可以根据设备的屏幕大小和分辨率加载不同尺寸的JPEG图像，以提供最佳的用户体验。 综上所述，Browser JPEG指的是浏览器中展示JPEG图像的过程，浏览器会做一系列优化以确保图像加载速度快、性能好，并提供良好的用户体验。Browser PNGBrowser PNG并不是一个特定的图像格式，而是指在浏览器中展示PNG（Portable Network Graphics）图像的过程。PNG是一种常见的位图图像格式，通常用于网络上的图像传输和网页设计。以下是关于在浏览器中展示PNG图像的一些要点：透明度支持 ：PNG格式支持透明度，允许图像具有透明或半透明的部分，这对于需要与不同背景进行合成显示的图像非常有用。无损压缩 ：PNG使用无损压缩算法，因此保留了图像的高质量细节和清晰度。广泛应用 ：PNG图像通常用于网站设计、图标、图形设计以及其他需要透明背景或良好细节保留的场景。浏览器兼容性 ：所有现代浏览器都支持PNG格式，在网页开发中广泛应用。优化技术 ：为了提高性能，PNG图像可以通过压缩和优化工具进行进一步压缩，以减小文件大小而不牺牲图像质量。动态PNG（APNG） ：除了静态PNG图像外，还有一种称为APNG（Animated Portable Network Graphics）的动态PNG格式，用于创建带有动画效果的图像。 总之，PNG图像格式在网络上的使用非常普遍，并且由于其支持透明度和无损压缩等特性，它是网页设计中常用的图像格式之一。在浏览器中加载和显示PNG图像非常简单，只需使用标签将图像插入到HTML页面中即可。JPEG XL (beta)JPEG XL是一种新兴的图像压缩格式，旨在提供比传统JPEG更好的压缩率和视觉质量。它结合了现代压缩技术与先进的编码算法，旨在成为下一代主流图像格式。以下是关于JPEG XL（beta版本）的一些要点：高效压缩 ：JPEG XL采用先进的压缩算法，可以实现比传统JPEG更高的压缩率，同时保持更好的图像质量。特性丰富 ：JPEG XL支持多种功能，包括可变比特率编码、无损压缩、动态调整图像质量、渐进式加载等。这使得它适用于各种应用场景，从移动设备到高分辨率显示器。广泛的颜色深度支持 ：JPEG XL能够表示广泛的颜色范围，并支持高动态范围（HDR）图像。透明度支持 ：JPEG XL可以处理带有alpha通道的图像，实现高质量的透明图像。渐进式加载 ：JPEG XL支持渐进式加载，允许图像逐步显示更高质量的内容，提升用户体验。浏览器支持 ：尽管目前JPEG XL仍处于beta阶段，但随着时间的推移，预计会有越来越多的浏览器开始支持该格式。 JPEG XL作为一种新兴的图像格式，具有很大的发展潜力，可能成为未来网页设计、数字媒体和移动应用程序开发中的重要工具。在实际应用中，JPEG XL可以为用户提供更好的图像质量和更快的加载速度，为图像压缩技术带来新的突破。MozJPEGMozJPEG是由Mozilla开发的一种JPEG图像编解码器，旨在改进JPEG压缩算法，提供更好的视觉质量和更高的压缩率。MozJPEG主要专注于通过调整JPEG编码器的参数来优化压缩结果，以适应现代网络和移动设备对图像加载速度和质量的需求。以下是关于MozJPEG的一些要点：优化压缩 ：MozJPEG通过对JPEG编码器进行优化，试图提高图像的压缩效率，从而减小文件大小并保持图像质量。渐进式加载 ：MozJPEG支持渐进式加载，这意味着图像可以逐步显示出更高质量的内容，改善用户体验。开源项目 ：MozJPEG是一个开源项目，可以自由获取和使用，使其成为许多开发人员和组织的首选选择。针对Web优化 ：MozJPEG的设计目标之一是为Web优化图像压缩，以便在网页上快速加载图像，并提供良好的用户体验。兼容性 ：MozJPEG生成的JPEG图像与标准JPEG格式兼容，因此可以在各种设备和平台上正常显示。 总的来说，MozJPEG致力于提供更好的JPEG压缩效果，以满足现代网络环境下对图像加载速度和质量的需求。该工具可帮助开发人员优化他们的图像内容，从而改善网站性能和用户体验。OxiPNGOxiPNG是一个用于优化PNG图像文件的开源工具。它旨在减小PNG图像文件的大小，同时保持图像质量。通过使用OxiPNG，用户可以有效地压缩PNG图像，从而减少它们在Web页面加载时所需的带宽和加载时间。以下是关于OxiPNG的一些要点：PNG图像优化 ：OxiPNG通过应用各种优化技术来减小PNG图像文件的大小，包括无损压缩、颜色类型选择、滤波器选择等，以提高图像的压缩率。开源项目 ：OxiPNG是一个开源项目，任何人都可以免费获取、使用和修改它，使其成为许多开发人员和设计师的首选工具之一。命令行工具 ：OxiPNG通常是一个基于命令行的工具，用户可以轻松地在终端中运行命令来对PNG图像进行优化。批处理处理 ：用户可以将OxiPNG应用于整个目录中的PNG图像，以一次性批处理压缩多个图像文件。快速和高效 ：OxiPNG旨在快速且高效地处理PNG图像，生成经过优化的图像文件，以便在网页上更快加载。 总的来说，OxiPNG是一个有用的工具，可帮助用户减小PNG图像文件的大小，提高网页加载速度，并节省带宽。通过优化PNG图像，用户可以提升网页性能和用户体验。QOI https://qoiformat.org/QOI 速度很快。它可以无损地将图像压缩为与 PNG 类似的大小，同时提供 20 至 50 倍更快的编码速度和 3 至 4 倍更快的解码速度。QOI 很简单。参考编码器/解码器大约包含 300 行 C 代码。文件格式规范是单页 PDF。QOI 的不足QOI 对平滑的图像压缩比较擅长，一旦图像出现了较多噪声，RUN 方法效率降低。对 alpha 通道频繁变化的图像，RGBA 块明显增多，压缩率降低。RUN 方法定义的范围（1-62）不是压缩率最优的，run-length == 1 时绝大部分可以用 INDEX 块代替，不过这样定义比较简单快速。未定义解码 QOI 时读取 INDEX 块颜色无效 (#00000000) 的行为，很多实现会将该颜色也更新到索引，即需要编码时保证 INDEX 块的有效性。目前只支持 8 位 RGB 或 RGBA，不支持单通道。但是灰度颜色的 DIFF 和 LUMA 块效率也较高，且哈希函数保证了灰度颜色可以覆盖到所有的索引位 ([3 + 5 + 7, 64] = 1)，这点给予好评。没有额外的扩展块来支持色域管理，无法存储多张图像/动图。WebPWebP 是一种由 Google 开发的现代图像格式，旨在提供更高的压缩率和更好的图像质量，从而改善网页性能。WebP 图像格式支持有损压缩（类似于 JPEG）和无损压缩（类似于 PNG）两种压缩模式，并且通常比传统的 JPEG 和 PNG 格式具有更小的文件大小。以下是关于 WebP 格式的一些要点：高效压缩 ：WebP 使用先进的压缩技术，可以显著减小图像文件尺寸，从而加快网页加载速度并节省带宽。有损和无损压缩 ：WebP 提供了有损和无损两种压缩模式，用户可以根据需要选择适当的压缩模式。透明度支持 ：WebP 支持 Alpha 透明度通道，使得创建带有透明背景的图像变得更容易。动态图像支持 ：除了静态图像，WebP 还支持动态图像（类似于 GIF），称为 WebP 动画。现代浏览器支持 ：现代的 Web 浏览器（如 Chrome、Firefox、Edge 等）已经开始支持 WebP 格式，这使得在网页上使用 WebP 图像变得更加普遍。性能优势 ：由于其高压缩率和良好的图像质量，使用 WebP 图像可以减少网页的加载时间，同时保持视觉吸引力。 总的来说，WebP 是一种强大的图像格式，被广泛应用于网页设计、移动应用程序和其他数字媒体领域，以提高图像加载速度并改善用户体验。如果您需要更多关于 WebP 格式的信息或有任何疑问，请随时告诉我！WebP v2 (unstable)WebP v2 是 WebP 图像格式的下一个版本，目前处于不稳定阶段。这个版本致力于进一步改进压缩率、图像质量和功能，以满足现代数字媒体处理的需求。以下是关于 WebP v2（尚不稳定）的一些特点：更高的压缩率：WebP v2 旨在提供比现有 WebP 版本更高的压缩率，从而减小图像文件大小并加快加载速度。更好的图像质量：通过优化算法和技术，WebP v2 试图提供更好的图像质量，确保图像在压缩过程中保持细节和清晰度。新功能增强：WebP v2 可能会引入一些新的功能，以扩展该格式的应用范围，如对动态图像的改进、更好的透明度支持等。实验性质：由于 WebP v2 目前仍处于不稳定阶段，因此可能存在各种变化和调整，包括语法、功能和性能上的改进。开发者社区参与：Google通常会邀请开发者社区参与测试和反馈 WebP v2 的稳定性和功能性，以便最终推出成熟的版本。 虽然 WebP v2 目前还处于不稳定的状态，但它代表了 WebP 格式未来的发展方向，将带来更多优势和新功能，为用户提供更佳的图像压缩和质量。随着版本的完善和稳定，WebP v2 有望成为数字媒体处理中重要的图像格式之一。谷歌是发达图像压缩工具Squoosh。用于前端开发使用 Node.js处理方法总结squoosh一个由 Google 开发的图像压缩 Web 应用程序。可以在浏览器中查看转换结果的同时进行压缩设置，因此即使对于没有图像压缩知识的人来说也很容易使用。这是一个有用的工具，不仅可以压缩文件，还可以将文件转换为 WebP 等各种格式并调整其大小。https://github.com/GoogleChromeLabs/squooshhttps://squoosh.app/ 官网webpack 结合 压缩图片vite 结合 压缩图片

H5 手风琴式UI Elements 和Elements 非常适合实现手风琴 UI创建手风琴 UI 时使用元素和元素HTML 结构很简单。可以看到，从标签名称就可以理解其结构。如果您想创建手风琴所需的最小打开/关闭动作，则不需要 CSS；HTML 就足够了。<details> <summary>概要</summary> 详细内容 </details>添加CSS 样式优化接下来，我们将使用 CSS 更改外观。我们将使用以下图标创建一个手风琴 UI。<details class="js-details"> <summary class="js-summary"> <span class="summary_inner"> 标题标题 <span class="icon"></span> </span> </summary> <div class="content js-content"> <div class="content_inner"> 内容部分内容部分内容部分内容部分内容部分内容部分 </div> </div> </details>details { margin: 0 auto; width: 70%; summary { /* display: list-item;清除默认三角图标样式 */ display: block; .summary_inner { cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 24px; border: 1px solid #d2beff; font-weight: bold; color: #002255; .icon { display: block; position: relative; width: 24px; margin-left: 6px; flex-shrink: 0; transform-origin: center 43%; transition: transform 0.4s; &::before, &::after { content: ""; position: absolute; display: block; width: 15px; height: 3px; background-color: #7050ff; } &::before { left: 0; transform: rotate(45deg); } &::after { right: 0; transform: rotate(-45deg); } } } } summary::-webkit-details-marker { /* Safari中修改相应的值 */ display: none; } /* details 内不直接指定padding */ .content { overflow: hidden; background-color: #f0f2ff; &_inner { padding: 24px 48px; display: flex; flex-direction: column; gap: 16px; } } } /* 打开内容展示时 旋转三角哦图标 */ details[open] .icon { transform: rotate(180deg); }使用JS添加动画 优化展示效果通过单击或使用键盘来打开和关闭手风琴。这次，我们将使用标准浏览器功能Web Animations API来为手风琴的内容制作动画。<details class="js-details"> <summary class="js-summary"> <span class="summary_inner"> 标题标题标题标 <span class="icon"></span> </span> </summary> <div class="content js-content"> <div class="content_inner"> 内容部分内容部分内容部分内容部分内容部分内容部分 </div> </div> </details>details { margin: 10px auto; width: 70%; summary { /* display: list-item;清除默认三角图标样式 */ display: block; .summary_inner { cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 24px; border: 1px solid #d2beff; font-weight: bold; color: #002255; .icon { display: block; position: relative; width: 24px; margin-left: 6px; flex-shrink: 0; transform-origin: center 43%; transition: transform 0.4s; &::before, &::after { content: ""; position: absolute; display: block; width: 15px; height: 3px; background-color: #7050ff; } &::before { left: 0; transform: rotate(45deg); } &::after { right: 0; transform: rotate(-45deg); } } } } summary::-webkit-details-marker { /* Safari中修改相应的值 */ display: none; } /* details 内不直接指定padding */ .content { overflow: hidden; background-color: #f0f2ff; &_inner { padding: 24px 48px; display: flex; flex-direction: column; gap: 16px; } } } /* is-opened js控制类添加时展示 */ details.is-opened .icon { transform: rotate(180deg); }document.addEventListener("DOMContentLoaded", () => { setUpAccordion(); }); /** * JS 原生 (Web Animations API) animate() */ const setUpAccordion = () => { const details = document.querySelectorAll(".js-details"); const RUNNING_VALUE = "running"; // 动画运行添加属性值 const IS_OPENED_CLASS = "is-opened"; details.forEach((element) => { const summary = element.querySelector(".js-summary"); const content = element.querySelector(".js-content"); summary.addEventListener("click", (event) => { // 禁用默认行为 event.preventDefault(); // 防止连点, 动画执行时 点击无效 if (element.dataset.animStatus === RUNNING_VALUE) { return; } // 判断当前 details 的 open 属性 if (element.open) { // 关闭时操作 // 切换图标操作类 element.classList.toggle(IS_OPENED_CLASS); // 运行动画 const closingAnim = content.animate( closingAnimKeyframes(content), animTiming ); // 指定动画运行时 使用的值 element.dataset.animStatus = RUNNING_VALUE; // 手风琴 关闭后 closingAnim.onfinish = () => { // 删除自定义属性 open element.removeAttribute("open"); // 删除动画运行时的值 element.dataset.animStatus = ""; }; } else { //打开手风琴时的处理 //添加自定义 open属性 element.setAttribute("open", "true"); // 添加样式 element.classList.toggle(IS_OPENED_CLASS); // 执行打开动画 const openingAnim = content.animate( openingAnimKeyframes(content), animTiming ); // 赋值动画运行时 状态 element.dataset.animStatus = RUNNING_VALUE; // 动画运行完成后 置空 openingAnim.onfinish = () => { element.dataset.animStatus = ""; }; } }); }); }; /** * 动画 配置 */ const animTiming = { duration: 400, easing: "ease-out" }; /** * 关闭时的 关键帧 */ const closingAnimKeyframes = (content) => [ { height: content.offsetHeight + 'px', // height: "auto" 设置auto时 不能很好的计算 opacity: 1, }, { height: 0, opacity: 0, } ]; /** * 打开时 关键帧 */ const openingAnimKeyframes = (content) => [ { height: 0, opacity: 0, }, { height: content.offsetHeight + 'px', opacity: 1, } ]; 参考示例

Lottie 简析 ”Lottie”是一种可以实现矢量图像动画的技术和文件格式。使用lottie-web实现创建了一个将 Lottie 合并到 UI 中的演示。我会重点关注使用Lottie的部分。① 导入库 使用cdn<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" ></script>使用包管理npm install lottie-web② 准备一个空的DOM元素并添加一个id属性 准备一个空 DOM 元素并id添加属性以从 JavaScript 引用它。在示例中，我们button在元素内span准备了一个空元素，将其显示为图标按钮。<button> <span id="lottie"></span> </button>在③lottie.loadAnimation()中初始化 id在字段中container指定准备好的DOM元素，并path写入数据的文件路径。由于播放过程是手动完成的，所以autoplay: false添加了。const lottieContainer = document.querySelector("#lottie"); const anim = lottie.loadAnimation({ container: lottieContainer, path: "./assets/search.json", autoplay: false, // 自动播放 （默认true。省略可） });lottie.loadAnimation()可以指定的主要选项有：全文请参见官方文档中的“ loadAnimation-option s ”。选项名称-容器（必填）用于插入lottie的DOM元素路径或动画数据（必填一项）path：文件路径 / animationData：json对象渲染器（默认svg）svg//canvas其中html之一循环（默认true）true：无限循环播放 / false：仅播放一次 / 数值：循环播放指定次数自动播放（默认为true）true：加载时自动播放 / false：不自动播放初始段指定要播放的帧的范围。第一个值指定起始帧，第二个值指定最终帧。④动画操作 参考动画实例 操作方法 列表调整动画。请注意，可以为 Lottie 播放指定的方法会略有不同，具体取决于您将它们用于动画实例还是 Lottie 实例（项目中的整个 Lottie） 参考： 全局方法 例子中，原来的Lottie是动画数据，感觉很慢很慢，所以setSpeed()用该方法调整了播放速度。anim.setSpeed(1.7); // 调整播放速度此外，我们还向按下按钮时调用的函数添加了管理动画播放的处理。play()方法开始播放动画，等待随机秒数，然后将loop属性false更改为 。这将在完成时自动停止正在播放的动画。const onSearch = async (anim) => { anim.loop = true; anim.play(); await wait(Math.random() * 5000); // 搜索完成后关闭 anim.loop = false; };⑤根据Lottie的事件添加处理 通过向动画实例complete添加事件监听器，您可以在动画完成后执行一些处理。anim.addEventListener("complete", () => { // 动画完成后进行的处理 result.classList.remove("isLoading"); });关于 Lottie 性能优化如果它作为 UI 的一部分合并到一个小部分中，如上面的例子，看起来可能不会有太大的问题，但如果它作为演示合并到一个网站中，性能问题是不可避免的。正如文章开头提到的，Lottie 的文件大小只有几 KB，因此在加载页面时的数据容量方面可以说是非常出色的。然而，播放和渲染动画需要大量负载，这往往会降低网站的性能。高 CPU 使用率和负载可能会导致闪烁和帧速率延迟。外观因浏览器而异，但在 Chrome 中，帧速率得以维持，但某些部分不显示，屏幕看起来有问题，而在 Safari 中，帧速率显着下降，看起来很卡顿。是。如果您使用移动设备，浏览器可能会崩溃。我们建议您进行优化以确保用户体验不受影响。具体来说，如果绘图变得很慢，您可能需要考虑以下事项。在屏幕上不可见的 Lottie 将停止播放动画或释放 DOM 元素。请勿将不必要的路径数据放置在因遮罩等原因而未显示的区域中。对于复杂的 Lottie 数据，请在数据中包含背景考虑画布渲染关于渐变 （使用渐变时 换成canvas 性能更好些）

SVG动画 基础属性width 指定SVG图像的宽度。 height 指定SVG图像的高度。 viewBox 定义SVG图像的可见区域，它是一个矩形框，由四个数值组成，分别表示x轴和y轴的起始位置，以及宽度和高度。 preserveAspectRatio 指定如何适应SVG图像的viewBox到实际的宽高比例变化，它可以设置为 none（不保持比例），xMinYMin（保持比例并按照最小位置对齐），xMidYMid（保持比例并居中对齐）等等。 xmlns 定义SVG文档的XML命名空间。 version 指定SVG文档的版本。 id 为SVG元素指定一个唯一的标识符。 class 为SVG元素指定一个或多个类名，以便在CSS样式表中进行样式定义和选择。 style 定义SVG元素的内联样式。 transform 用于指定变换矩阵以实现平移、缩放、旋转等图形变换操作。 opacity 设置SVG元素的不透明度。 fill 设置元素的填充颜色。 stroke 设置元素的描边颜色。 stroke-width 设置元素的描边宽度。 stroke-linecap 设置描边的线帽样式，包括 butt（平直边缘）、round（圆形边缘）和 square（方形边缘）。 stroke-linejoin 设置描边的线段连接样式，包括 miter（尖角连接）、round（圆角连接）和 bevel（斜角连接）。标签说明<svg> 定义SVG文档的根元素。 <g> 用于将多个图形元素组合到单个分组中，以便一起进行变换、样式设置等操作。 <circle> 用于创建圆形。 <rect> 用于创建矩形。 <line> 用于创建直线。 <polyline> 用于创建折线或多边形。 <polygon> 用于创建闭合的多边形。 <path> 用于创建自定义路径，可以绘制出各种复杂形状。 <text> 用于添加文本内容。 <image> 用于插入图像。 <use> 用于引用和复用已定义的图形元素。 <defs> 用于定义可重用的元素或属性。 <linearGradient> 用于创建线性渐变。 <radialGradient> 用于创建径向渐变。 <pattern> 用于创建图案填充。 <mask> 用于创建遮罩效果。 <filter> 用于创建图形效果，如模糊、阴影等。 <clipPath> 用于创建裁剪路径。 <animate> 用于为元素添加基本的动画效果。 <script> 用于嵌入SVG中的脚本代码。基本动画操作stroke-dasharray属性接受一个由数字（表示线段的长度）和空格（表示间隔的长度）组成的数组。设置数组中的值可以实现不同的虚线样式。以下是一些常见的设置方法stroke-dasharray="5"：表示连续线段长度为5个单位，间隔长度为默认值。常用于设置等间隔的点线。 stroke-dasharray="10 5"：表示连续线段长度为10个单位，间隔长度为5个单位。常用于设置等长度的短划线。 stroke-dasharray="10 5 2"：表示连续线段长度为10个单位，间隔长度为5个单位，再加上一个长度为2的间隔。可以实现更复杂的虚线样式。stroke-dashoffset属性的取值可以是一个具体的长度值，也可以是一个百分比值。具体的长度值表示从路径的起始点开始的偏移量，而百分比值是相对于路径长度的偏移量。可设置为负数 from { stroke-dashoffset: 0; } to { stroke-dashoffset: 630; }

CSS网格布局简介 网格布局使得创建网站布局比传统方法更容易，而且不会影响 HTML 元素的结构。它特别适合具有垂直轴和水平轴的网格状布局，而使用 Flexbox 很难创建这种布局。创建常用布局时了解网格布局的基础知识<div class="container"> <header class="header">header</header> <main class="main" >main</main> <aside class="aside" >aside</aside> <nav class="nav" >nav</nav> <footer class="footer">footer</footer> </div>使用 Flexbox 创建时使用 Flexbox 创建此布局时，通过用标签等包围要水平对齐的元素（aside、main、div、nav）来创建 Flex 容器div，并将要水平对齐的元素作为 Flex 项目放置。必须添加标签，这增加了一个额外的元素。使用网格布局创建时网格布局指定布局周围的容器元素（在我们的示例中.container）如何排列其子元素。与 Flexbox 不同，不需要准备用作排列元素的行/列容器的元素。我们将在解释网格布局的容器和项目的同时，使用 CSS 创建布局。网格容器创建网格容器以在网格布局中排列元素。指定一个元素display: grid使其成为网格容器。 （当将其视为内联元素时display: inline-grid指定）.container { display: grid; }这仍然只是排列元素。因此，指定将网格容器划分为多个网格容器。垂直和水平分割网格容器。垂直划分的每列的大小由grid-template-columns水平划分的每行的大小grid-template-rows指定。让我们指定列宽。在此布局中，左侧边栏宽度为 180 像素，右侧边栏宽度为 160 像素。中央主区域的宽度是可变的，即父元素的宽度减去左右侧边栏的宽度。在这里，fr我们将使用该单位来指定主要区域的宽度。fr是一个单位，可用于指定划分网格容器的大小。从总宽度中减去指定的fr单位（px例如），并将剩余宽度fr分配给指定的列。flex-grow该图像类似于Flexbox属性。这次我想通过从整体宽度中减去左右侧边栏的宽度（180px、160px）来分配主区域的宽度，所以写如下。.container { display: grid; /* 从第一列开始 180px 1fr 160px */ grid-template-columns: 180px 1fr 160px; }以同样的方式指定每行的高度。.container { display: grid; /* 从第一列开始 180px 1fr 160px */ grid-template-columns: 180px 1fr 160px; /* 从第一行开始 60px 1fr 90px */ grid-template-rows: 60px 1fr 90px; }此时的列和行称为网格轨道。划分列和行的线称为网格线。设置每个元素所占格子放置网格项目。网格容器正下方的子元素称为网格项。在这种情况下，标题、主要内容、左右侧边栏和页脚都是网格项。划分网格轨道的网格线从第一行开始自动编号为 1、2、3 等。指定网格项将从哪一列放置到哪一条grid-column-start网格线grid-column-end。同样，grid-row-start使用grid-row-end和 指定从哪条网格线到哪条网格线放置。.header { /* 列的第一条到第四条网格线 */ grid-column-start: 1; grid-column-end: 4; /* 行的第一条到第二条网格线 */ grid-row-start: 1; grid-row-end: 2; }此时，如果grid-column-end指定，则会被放置在从每个指定grid-row-end的网格线到下一个网格线的范围内。.header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: auto; } .main { grid-column-start: 2; grid-column-end: auto; grid-row-start: 2; grid-row-end: auto; } .aside { grid-column-start: 1; grid-column-end: auto; grid-row-start: 2; grid-row-end: auto; } .nav { grid-column-start: 3; grid-column-end: auto; grid-row-start: 2; grid-row-end: auto; } .footer { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: auto; }grid-column-start可以使用简写grid-column-end property来指定grid-column。在这种情况下，可以省略。//如果以指定 相邻格子的起点 可以设置该属性为 auto .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: auto; } //简写 .header { grid-column: 1 / 4; grid-row: 1; }网格布局 平铺元素虽然可以使用 float 或 Flexbox 创建这种布局，但使用 Grid Layout 更方便的点.container { display: grid; /* 重复 最小100px、最大1fr 列 */ grid-template-columns: repeat( auto-fill, minmax(100px, 1fr) ); column-gap: 10px; row-gap: 10px; }

CSS属性 clip-path clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。可以在 Clip-path 属性中指定范围之外的坐标。还支持范围外的坐标，例如小于0%的坐标和大于100%的坐标。通过指定范围外的坐标，可以用更少的坐标来表示。clip-path的属性值可以是以下几种：inset；将元素剪裁为一个矩形circle；将元素剪裁成一个圆ellipse；将元素剪裁成一个椭圆polygon；将元素剪裁成一个多边形指定超出范围值它还支持超出范围的值，如小于0%或大于100%的坐标。<div class="hexagon"></div>.hexagon { aspect-ratio: cos(30deg); inline-size: 180px; background-color: #313135; clip-path: polygon( -50% 50%, 50% 100%, 150% 50%, 50% 0 ); }

ES6 更新内容简介 JavaScript 版本号 旧的 ECMAScript 版本由数字命名:ES5 和 ES6。从 2016 年开始，版本按年份命名:ES2016、2018、2020es6(ES2015) 新增● let const 关键字● 箭头函数 const x = (x, y) => x * y;● 解构赋值 对象结构赋值const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; // Destructuring Assignment let { firstName, age } = person;数组结构赋值const fruits = ["Banana", "Orange", "Apple", "Mango"]; // Destructuring Assignment let [fruit1, fruit2] = fruits;● 展开运算符1 合并对象或数组2 转换数组3 对象的展开4 默认参数const q1 = ["Jan", "Feb", "Mar"]; const q2 = ["Apr", "May", "Jun"]; const q3 = ["Jul", "Aug", "Sep"]; const q4 = ["Oct", "Nov", "May"]; const year = [...q1, ...q2, ...q3, ...q4]; const numbers = [23,55,21,87,56]; let maxValue = Math.max(...numbers);. //es6 function fn(a=10){ console.log(a); } fn();● For/oflet arr = ["张三","李四","王五"]; for(let val of arr){ console.log(val);//张三 李四 王五 }● Map Objects● Set Objects ES6新增了Set结构，用于保存唯一值的序列● Classes 关键字 创建构造函数● Promises● Symbol● Default Parameters● Function Rest Parameter● String.includes() 判断是否包含某个字符,或者某个值● String.startsWith() 通过什么开始● String.endsWith() 通过什么结尾let text = "Hello world, welcome to the universe."; text.includes("world") // Returns true let text = "Hello world, welcome to the universe."; text.startsWith("Hello") // Returns true var text = "John Doe"; text.endsWith("Doe") // Returns true● Array entries() 从数组 fruit 创建一个可迭代对象， 该对象包含了数组的键值对：var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.entries();[0, "Banana"][1, "Orange"][2, "Apple"][3, "Mango"]● Array.from() 把伪数组转换成数组● Array keys() ● Array find() 查找数组里符合条件的第一个值● Array findIndex() 查找符合条件的第一个索引值//1.Array.from() var lis = document.querySelectorAll("li"); console.log(lis);//NodeList(5) [li, li, li, li, li]伪数组 console.log( Array.from(lis));//(5) [li, li, li, li, li] //2.Array.of();创建一个数组 var res = Array.of(7,8); console.log(res);//(2) [7, 8] //3.find ：查找数组里符合条件的第一个值 ar arr = [1,2,3,4,5]; var res = arr.find(function(item){ return item>3; }) console.log(res);//4 // 4.findIndex： 查找符合条件的第一个索引值 var arr = [1,2,3,4,5]; var res = arr.findIndex(item=>item>3); console.log(res);//3 //5.includes ：判断是否包含某个字符,或者某个值 var arr = [1,2,3,4]; var res = arr.includes(5); console.log(res); // 6.flat ： 扁平化数组 ：默认是1 只会扁平化一层数组 ，如果传入指定参数 那么就会扁平化指定层数 var arr = [1,2,3,[4,[5]]]; //3维数组 //ES5 var res = arr.toString(); console.log(res); var newArr = res.split(","); console.log(newArr);//(5) ["1", "2", "3", "4", "5"] console.log( Object.prototype.toString.call(newArr));//[object Array] //ES6 var res = arr.flat(2); console.log(res);//(5) [1, 2, 3, 4, 5] console.log( Object.prototype.toString.call(res));//[object Array]● Math.trunc● Math.sign● Math.cbrt● Math.log2● Math.log10● Number.EPSILON● Number.MIN_SAFE_INTEGER● Number.MAX_SAFE_INTEGER● Number.isInteger()● Number.isSafeInteger()● New Global Methods● JavaScript ModulesES2016● JavaScript Exponentiation (**)幂操作 x ** y == Math.pow(x, y) 运算符表示幂运算，用于计算一个数的指数。例如，a b 表示将 a 的值提升到 b 次方。● JavaScript Exponentiation assignment (**=)在 JavaScript 中，= 是指数赋值运算符，用于对变量进行幂运算并将结果赋给左侧的操作数。例如，a = b 等同于 a = a ** b，表示将变量 a 的值提升到 b 次方，并将结果赋给变量 a。这个运算符通常用于简化幂运算和赋值的组合操作。● JavaScript Array includes()JavaScript 中用于检查数组中是否包含特定元素的方法。它返回一个布尔值，指示数组是否包含传入的元素。如果包含，则返回 true，否则返回 false。下面是一个简单的示例：const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3)); // 输出 trueconsole.log(numbers.includes(6)); // 输出 falseES2017● JavaScript String padding字符串填充是一种在字符串前面或后面添加特定字符，直到字符串达到指定长度的操作。在 JavaScript 中，可以使用 padStart() 和 padEnd() 方法来实现字符串填充。● JavaScript Object entries()Object.entries() 方法返回一个给定对象中可枚举属性的键值对数组。● JavaScript Object values()Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组。● JavaScript async and awaitasync 和 await 是用于处理异步操作的 JavaScript 关键字。通过将 async 关键字放在函数声明之前，该函数就会成为一个异步函数。而使用 await 关键字，可以暂停异步函数的执行，等待 Promise 解决（resolve）之后再继续执行。● Trailing Commas in Functions在 JavaScript 函数中，在参数列表的最后一个参数后面允许添加逗号。这样做的好处是当需要添加新的参数时，只需在最后一个参数后面添加逗号，而不必调整之前的参数逗号。● JavaScript Object.getOwnPropertyDescriptorsObject.getOwnPropertyDescriptors() 方法返回一个对象的所有自有属性的描述符。这对于获取对象属性的完整信息很有用，包括属性的值、是否可写、是否可枚举等。ES2018● Asynchronous Iteration: 异步迭代是指在 JavaScript 中处理异步操作的一种方法，特别是在处理生成器函数或异步迭代器时。它使您能够使用 for-await-of 循环来迭代异步可迭代对象，以便按照顺序处理异步任务。● Promise Finally: Promise.finally() 是 Promise 的一个方法，无论 Promise 状态如何（已解决或已拒绝），都会执行相同的代码块。这对于在完成 Promise 之后需要执行清理操作或收尾工作很有用。● Object Rest Properties: 对象剩余属性语法允许将对象中未被解构的其余属性收集到一个新的对象中。这样可以轻松地提取对象的一部分属性，并将剩余的属性放入一个新对象中。● New RegExp Features: 最新的 ECMAScript 版本增加了一些正则表达式的功能，比如命名捕获组、dotAll 模式、lookbehind 等。这些功能使得正则表达式更强大且更易于使用。● JavaScript Shared Memory: 共享内存是指多个 Web Workers 之间共享数据的机制。SharedArrayBuffer 和 Atomics API 是 JavaScript 中用于实现共享内存的机制，可以让多个 Worker 之间共享数据，但需要小心处理避免出现竞争条件和安全问题。ES2019● String.trimStart(): String.trimStart() 方法从字符串的开头移除空格或其他指定字符，并返回修改后的字符串。● String.trimEnd(): String.trimEnd() 方法从字符串的末尾移除空格或其他指定字符，并返回修改后的字符串。● Object.fromEntries: Object.fromEntries() 方法接收一个包含键值对的数组，然后返回一个基于这些键值对的新对象。它的作用相当于反转 Object.entries() 方法生成的数组。● Optional catch binding: JavaScript 中的可选捕获绑定是指在使用 try...catch 语句时，可以不提供异常对象的变量名，而只使用 catch {}。这样做会导致不会创建异常对象。● Array.flat(): Array.flat() 方法用于将嵌套数组展平为一个新数组，可以选择展平的层数。这对于去除多维数组中的嵌套结构非常有用。● Array.flatMap(): Array.flatMap() 方法首先映射每个元素，然后将结果扁平化成一个新数组。类似于先使用 map() 方法，然后再使用 flat() 方法。● Revised Array.Sort(): 改进的 Array.sort() 方法是指现代浏览器中优化的排序算法，以提高性能和稳定性。● Revised JSON.stringify(): 修改后的 JSON.stringify() 方法可能包括更多参数或选项，以实现更灵活的序列化操作。● Separator symbols allowed in string literals: JavaScript 允许在字符串字面量中使用分隔符符号，例如反斜杠或换行符，以便在代码中更清晰地表示长字符串或包含特殊字符的字符串。● Revised Function.toString(): 对 Function.toString() 方法进行修订可能改善输出格式或提供更多关于函数源代码的信息。ES2020● BigInt: BigInt 是一种用来表示任意精度整数的新数据类型，在 JavaScript 中引入了 BigInt 类型，使得可以安全地存储和操作大整数值。● String matchAll(): String.matchAll() 方法返回一个包含正则表达式匹配结果的迭代器。它允许你从字符串中找到所有匹配指定模式的子字符串。● The Nullish Coalescing Operator (??): 空值合并运算符 ?? 用于判断一个值是否为 null 或 undefined。如果操作数为 null 或 undefined，它会返回其右侧的默认值。● The Optional Chaining Operator (?.): 可选链操作符 ?. 允许在不确定对象是否存在或具有某个属性的情况下，避免出现 TypeError 错误。如果左侧的操作数为 null 或 undefined，整个表达式将返回 undefined，而不会导致错误。● Logical AND Assignment Operator (&&=): 逻辑与赋值运算符 &&= 用于在条件为真时才将右侧的操作数赋给左侧的变量。● Logical OR Assignment (||=): 逻辑或赋值运算符 ||= 用于在左侧值为假时才将右侧的操作数赋给左侧的变量。● Nullish Coalescing Assignment (??=): 空值合并赋值运算符 ??= 类似于空值合并运算符 ??，但将结果赋给左侧的变量。● Promise.allSettled(): Promise.allSettled() 方法返回一个 Promise，该 Promise 在所有给定的 Promise 都已解析或拒绝后解析，并带有一个对象数组，每个对象表示相应的 Promise 结果。● Dynamic Import: 动态导入是 ES2020 的一个特性，它允许在运行时以异步方式导入模块，而不是在代码的头部静态声明。这可以帮助优化加载时间和资源使用。ES2021● Promise.any(): Promise.any() 是 Promise 的一个方法，用于接收一个 Promise 可迭代对象（例如数组），并在其中的任何一个 Promise 解决时解决，并返回一个由第一个完成的 Promise 返回值组成的 Promise。如果可迭代对象中没有任何 Promise 成功，则返回一个拒绝状态的 Promise。● String replaceAll(): String.replaceAll() 方法通过替换所有匹配的子字符串来更新原始字符串。它使用给定的正则表达式或字符串来查找并替换所有出现的匹配项。● Numeric Separators (_): 数字分隔符 _ 是 ECMAScript 2021 的新特性之一，允许在数字文字中插入下划线，以增加数字的可读性而不影响其值。这在长数字或大数值的代码中提高了可读性。ES2022● Array at(): Array.at() 是 ECMAScript 2022 中提议的一个新方法，用于获取数组中指定索引处的元素。与传统的 arr[index] 访问方式不同，Array.at() 方法在遇到无效索引时会抛出 RangeError 错误。● String at(): 目前 JavaScript 中并没有名为 String.at() 的内置方法。可能是您的输入中有误，或者要表达的概念不太清楚。● RegExp /d: 在正则表达式中，/d 不是一个有效的特殊字符或元字符。可能是一个拼写错误或误解。在正则表达式中，\d 表示匹配数字字符（0-9）。● Object.hasOwn(): 可能是一个自定义函数或方法，JavaScript 中并没有名为 Object.hasOwn() 的内置方法。通常可以使用 Object.hasOwnProperty() 来检查对象是否有自己的属性。● error.cause: 这可能是指在某些库或框架中用于获取错误原因的属性。通常，JavaScript 中的错误对象可能包含一个 cause 属性或类似的属性，用于描述导致错误的根本原因。● await import: await import 是 JavaScript 中处理动态导入模块的语法。它允许您以异步的方式导入模块，当导入完成后再继续执行后续代码。● Class field declarations: 类字段声明是 ECMAScript 2022 的新特性之一，允许在类中直接声明实例字段而无需在构造函数中初始化。这使得类定义更加简洁和直观。● Private methods and fields: 私有方法和字段是 ECMAScript 2022 中的另一个新特性，允许在类中定义私有方法和字段，这些私有成员只能在类内部访问，而在外部不可见或访问。ES2023● Array findLast(): Array.findLast() 不是 JavaScript 中的内置方法。可能是您自定义的函数或库中的方法来查找数组中最后一个满足条件的元素。● Array findLastIndex(): 同样，Array.findLastIndex() 也不是 JavaScript 中的内置方法。这个方法可能用于自定义实现中，在数组中查找最后一个满足条件的元素的索引。● Array toReversed(): Array.toReversed() 也不是 JavaScript 中的标准方法。通常，要将数组反转，可以使用 Array.reverse() 方法。● Array toSorted(): Array.toSorted() 同样并非 JavaScript 标准方法。若要对数组进行排序，应该使用 Array.sort() 方法。● Array toSpliced(): Array.toSpliced() 也不是 JavaScript 中的内置方法。如果想在数组中插入、删除或替换元素，可以使用 Array.splice() 方法。● Array with(): Array.with() 似乎不符合 JavaScript 中的标准语法或内置方法。如有需要，可以提供更多上下文信息来进一步帮助澄清。● #! (Shebang): 在 Unix 和类 Unix 系统（例如 Linux）中，#!（shebang）是一个特殊字符序列，用于指定解释器程序的路径，以便运行脚本文件。在 JavaScript 中，这种写法通常在 Node.js 脚本的开头用于指定脚本的解释器路径。