前言
在今天的 Web 开发中，使用组件化的开发方式已成为标准的做法。这种方式有助于提高开发效率，同时也便于我们维护代码。而 Custom Elements 组件就是组件化开发中的一种方式，目前已被列为 Web 标准之一。
Custom Elements 组件，顾名思义，是自定义的 HTML 元素。使用 Custom Elements 组件，我们可以封装出一些自定义的功能性组件。这种方式的优点在于：
- 提供了更好的抽象，降低了耦合度
- 增加了代码的可读性和可维护性
- 使我们能够更快速的复用一些功能性组件
然而，Custom Elements 组件的使用不仅仅如此，它还涉及到一些性能问题。本文的目的是帮助开发者更好地理解 Custom Elements 组件，研究它的性能，提供一些优化策略。
性能测试
测试环境
在进行性能测试之前我们需要先建立一个测试环境。
我们使用了以下配置：
- Intel Core i7-8650U CPU @ 1.90GHz (1 processor)
- 32 GB 2400 MHz DDR4
- macOS Catalina 10.15.4
- Chrome 81.0、Safari 13.1、Firefox 75.0
测试内容
我们准备了以下两个示例来正式测试 Custom Elements 组件：
示例一：创建 Custom Elements
我们首先编写一个 Custom Elements 组件，它会创建一整个新的 Custom Elements。然后，我们在 body 中插入了 10000 个 Custom Elements，并且每个 Custom Elements 都包含着一个 div 标签。
--------- -----
------
------
--------- --------------------
---- -------------- ----- ------ ----- ----------------- ------------
-----------
--------
----- ------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ---- - ------------------------------------------------------------------
-----------------------------
-
-
--------------------------------------- ---------------
--- ---- - - -- - - ------ ---- -
----- ------- - -----------------------------------------
-----------------------------------
-
---------
-------
-------示例二：更新 Custom Elements 的属性
我们之前创建了一个带有一个 div 子元素的 Custom Elements 组件。现在，我们会在 Custom Elements 的构造函数中加入另一个 div 子元素，这个元素也会设置默认的宽度和高度。我们会在接下来的测试中，改变这个元素的宽度和高度属性值。我们将使用 JavaScript 操作 DOM 的方式去改变元素的属性。在每次测试中，我们都会改变所有 Custom Elements 的属性值。
--------- -----
------
------
--------- --------------------
---- -------------- ----- ------ ----- ----------------- ------------
-----------
--------
----- ------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ---- - ------------------------------------------------------------------
-----------------------------
----- --- - ------------------------------
---------------- - -------
--------------- - -------
------------------------- - --------
----------------------------
----- ---------- - ---------- ---------- -- -
---------------- - -----------------
--------------- - ----------------
--
--------------- - ---------- ---------- -- -
-------------------- -----------
--
-
-
--------------------------------------- ---------------
----- -------- - ---
--- ---- - - -- - - ------ ---- -
----- ------- - -----------------------------------------
-----------------------
-----------------------------------
-
--- ----- - ---
--- ------ - ---
----- ---------- - --------------------- -- -
----- - ------ - --- - --
------ - ------- - --- - --
--- ------ ------- -- --------- -
------------------------- --------
-
-- ----
---------
-------
-------测试结果
我们先运行第一个示例去创建 Custom Elements。
我们在 Chrome 浏览器中运行了这个测试，它花费了 6321ms 的加载时间，页面执行后的 FPS 是 40 左右。同样的测试在 Safari 中花费了 8810ms，FPS 是 20 左右，在 Firefox 中花费了 7412ms，FPS 是 21 左右。
我们发现在所有测试中，Firefox 的性能最好，Chrome 和 Safari 稍微差一点。这个差距可能是由于内核实现的不同。
接下来我们运行第二个示例去更新 Custom Elements 的属性。
我们在 Chrome 浏览器中运行了这个测试，它花费了 647ms 的加载时间，页面执行后的 FPS 是 60 左右。在 Safari 中，这个测试花费了 1266ms，FPS 是 34 左右，在 Firefox 中花费了 970ms，FPS 是 45 左右。
这些结果表明，Custom Elements 不但能促进代码重用，而且在一定程度上可以提高代码的性能。
我们还可以从测试结果中得出以下结论：
- 当创建大量的 Custom Elements 时，页面会非常缓慢。当更高的性能要求或更高的性能预期存在时，我们不应该轻率地创建和使用 Custom Elements。相反，我们应该尝试在同一个组件内处理尽可能多的逻辑。这将减少 Cordoba 操作的数量，从而提高性能。
- 当我们更新 Custom Elements 的属性时，这个元素的性能应该是可以接受的。这种方式的效果比动态地创建和销毁元素要好，因为它们不会消耗系统资源，而且我们不必在内存中维护一大堆元素。
性能优化
Custom Elements 组件能够在我们的项目中提供更好的抽象、更高的可维护性和更好的重用性，并且我们通过上述测试也已经了解了这种方式的性能问题。现在，我们需要寻找一些方法来优化性能。
我们可以使用以下方法优化自定义元素的性能：
自定义元素与页面交互
- 避免内联样式和不必要的清除样式
Custom Elements 的样式默认位于 Shadow DOM 中，这意味着与 Shadow DOM 中的元素交互时，确保它们使用透明背景和非透明内容效果最好。这个原则也适用于在 Shadow DOM 中嵌入场景。
- 尽可能地使用标准属性
在选择自定义元素的属性名称时，优先选用标准的 HTML 属性名称。例如，使用 value 而不是 inputvalue 之类的自定义属性名称。同样的，当使用属性时，请尝试使用以下属性而不是自定义属性：
------ ----------- --------------- ---- -- --- ------ ----------- ---------------------
- 避免不必要的全局副作用
当合并全局 CSS 样式的时候，我们会给页面的所有元素添加潜在的样式。这意味着你的自定义元素可能会遭受未知的情况。需要避免这种情况。
自定义元素的代码优化
- 在编写自定义元素时，避免长生命周期
在自定义元素的构造函数中定义所有的属性和方法可能会使代码难以升级和维护。更好的方式是根据需求组织代码。
- 自定义元素不应该维护状态
我们不鼓励自定义元素跟踪任何状态。相反，自定义元素应该在访问时根据属性进行响应。同样的，自定义元素也不应该在全局作用域内共享任何数据，即使它是 withinShadow 外的。
--------
----- ------------- - -
----- ---
--------------- -----
--
----- --------------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
---------- - ---
-
------------------- -
---------------------------- - -----
-
---------------------- -
---------------------------- - -----
-
------------------------------ ------- ------- -
-- ----- --- ------- -
---------- - -------------------
-
-
--- ---------- -
----- ------- - -----------
-- ----- --- -------- -
---------- - -----
------------------------- ----------------------------
-------------------
--- -------------------------- -
------- -
----- -----------
--
--
--
-
-
-------- -
-- ------ -- --------- -- ----------
-
-
------------------------------------------ -----------------
---------- 实现正确的隐藏/显示可见性
当数据发送变化时，重复渲染会导致性能下降。当你想让你的自定义元素在隐藏时断开活动状态，可以使用 document.hidden 事件，该事件可以告诉开发人员文档的 “hidden” 状态是否已更改。我们可以使用如下方法实现：
----- ------------ ------- ----------- -
------------- -
--------
----- - ---------- - - -----------
----- ---- - --------
---------------------------------------
-------------------------
----- ---------- - ------------------- ----- ------ ---
-----------------------------
-
------------------- -
--------------------------------------------- -- -- -
-- ----------------- -
------------------
- ---- -
---------------
-
---
-------------------------------
---------------------
---------------
-
---------------------- -
-------------------------------------------------
--------------------------------------
---------------------------
-
------------ -
--------------------
---------------------------
-
--------- -
---------------
-------------------------------
---------------------
-
--------------------- -
--------------------------------- -- -
----------------------
---
-
-------------- -
--------------------------------------
-
--------------- -
--------------- - --------------------- -- -
---------------
-- ---------- -- - -----
-
-
-------------------------------------- --------------结论
Custom Elements 组件是 Web 开发中非常好的一个抽象和封装方式。但是，开发人员需要意识到，它在使用上有一定的学习曲线，同时也有一定的性能问题。在编写 Custom Elements 时，需要考虑上述的优化策略，以便更好的提高性能。虽然 Custom Elements 的性能不如期望，但你可以通过优化来使它获得更好的性能表现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731cd6d0bc820c5823a7dba