前言
Custom Elements 是 Web Components 的核心部分，允许开发者定义自己的 HTML 元素并且使用它们。Custom Elements 的核心是 JavaScript 类（Class）。使用 Custom Elements 时，为保持性能，我们需要注意以下几个方面。
避免严重的 "回流"
回流 (reflow) 是浏览器重新计算布局所需的过程，可能会影响性能。通过在自定义元素上设置样式以避免在 JavaScript 中进行 CSS 计算，可以避免这种情况。
<my-element class="width-100"></my-element>
[is="my-element"].width-100 {
width: 100%;
}避免不必要的重复计算
避免在 Custom Elements 中进行重复计算，例如页面渲染和 DOM 操作。如果可能的话，可以将计算和操作移到 Custom Element 的构造函数外部。例如，在创建自定义元素时，可以将innerHTML直接设置为字符串，并将事件侦听器单独添加。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
------------------------------ --------------
-------------- - ---------- ------------
-
--------- -
-----------------------
-
-
----------------------------------- -----------避免锁定页面的主线程
避免在 Custom Elements 中耗时过长或造成页面主线程发生锁定的操作。如果需要在元素中进行更复杂的计算或进一步处理，则可以使用 Web Workers 或 Service Workers 将它们从主线程中分离出来。这可以保证页面流畅响应。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------ - --- -----------------------
---------------------------------------- ----------------------
-
------------------- -
----------------------------------
-
---------------------- -
------------------- ---------- ------------
-
-
----------------------------------- -----------结论
Custom Elements 是一个强大的功能，可以帮助我们构建高质量的 Web 应用程序。但是，为了实现最佳性能，我们需要小心谨慎地编写代码，避免不必要的重复计算或操作，以及避免可能对页面性能造成不利影响的浏览器行为。通过以下最佳实践，可以保证 Custom Elements 的最佳性能。
参考
- Improving Performance with Web Components
- How to Create Custom Elements with Vanilla JavaScript
- Web Workers MDN
- Service Workers MDN
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0f95a6fbf96019734bc38