介绍
在前端开发中，性能优化一直是一项非常重要的工作。而公司和各个团队之间的竞争也需要更快的速度和更完美的用户体验。因此，优化 DOM 和 JavaScript 性能成为了前端开发的热点话题。性能优化的一个方面是减少前端代码使用浏览器内部数据结构引起的性能损失。为了达到这个目的，可以使用内置的浏览器 API，如 requestAnimationFrame，或使用某个较为成熟的库或框架，如 Lodash。但是，对于仅需要使用其中的一小部分的特定场景，这并不总是合适的选择。实际上，我们可以使用简单的 polyfill 来填补功能缺失。
本篇文章介绍一个性能优化的 npm 包——performance-polyfill，它通过重写一些低性能的浏览器 API，提高了设备的性能。下文将详细讲解 performance-polyfill 的使用教程。
安装
这个包可通过你的项目管理器，如npm或yarn，进行安装。在你的项目根目录，命令行输入如下命令安装：
--- ------- --------------------
也可以通过 yarn 将它加入你的项目：
---- --- --------------------
现在，performance-polyfill 包已经成功安装在你项目中。
如何使用
在项目开始的时候，使用以下代码加载 performance-polyfill：
------ -----------------------
这是使性能提升的最简单的做法，让你能够立即体验性能的提高。你现在可以继续使用你的代码，而不必更改任何内容。
API
performance-polyfill 有几个非常有用的 API，用于提高设备的性能。下面我们来逐个介绍。
performance.now()
performance.now() 方法性能与 new Date().getTime() 方法类似，但是准确性更高，返回一个浮点值，表示从脚本开始执行到调用 performance.now() 这一时刻的毫秒数。
在一些浏览器（如IE下（11及更早版本））中，Date.now() 和 performance.now() 的实现方式在实际单位是毫秒的情况下有明显的差别。尤其是在2006年之前的浏览器中， performance.now() 更准确。
window.requestAnimationFrame() 和 window.cancelAnimationFrame()
这些方法为 Web 动画提供了更高效、更流畅的方式。优点包括：
能够根据显示器的刷新率调整回调函数的执行次数，比默认每秒60次的计时器更准确。
当页面处于不活动状态或已隐藏时，自动暂停动画。
改变浏览器窗口大小时，提供了重绘元素的机会。
这些方法很容易使用。首先，我们需要定义一个回调函数，它将处理此列表中的所有帧。
-------- ------------------- - -- ----------- ------------------------------------- -
我们要使用 window.requestAnimationFrame 将它传递给浏览器，并在这个回调函数内部存储当前时间戳。这是由 window.requestAnimationFrame 刷新频率提供的准确时间，用于构建曲线。
-------------------------------------
如果我们需要停止动画，则使用 window.cancelAnimationFrame 取消它：
--- -- - ------------------------------------- -------------------------
示例代码
以下代码演示了如何使用 performance-polyfill 在代码中使用 API。其中createHeavyDOMCalculations() 模拟了一个比较耗费性能计算的方法。所有的 "bouncing ball" 动画都在同一帧中更新。
-- -- -------------------- -
------ -----------------------
--- --------- - -------------------------------------
--- ----- - ---
--- ------- - ---
--- ------- - --
-------- ------------- -- -
--- ---- - ------------------------------
---------------------------
-------------- - - - -----
--------------- - - - -----
------------
----- -----
--------- -
-- --
-- -
--
------- -
-- -- - -------------- - - - -- - --------
-- -- - -------------- - - - -- - -------
-
---
-----------------------
-- ------------- - --- -
--- ------------ - --------------
---------------------------
-
-
-------- ---------------------------- -
--- ---- - - -- - - ------ ---- -
--- --- - ------------------------------
--------------------------
-------------
-
-
-------- ------------- -
-----------------------------
--- ---- ---- -- ------ -
--------------- -- --------------
--------------- -- --------------
------------------- - --------------- - -----
-------------------- - --------------- - -----
-- ---------------- -- -- -
--------------- - --
------------- -- ---
------- -- ---
- ---- -- ---------------- -- ----------------- - ---------------------- -
--------------- - ----------------- - ----------------------
------------- -- ---
------- -- ---
-
-- ---------------- -- -- -
--------------- - --
------------- -- ---
------- -- ---
- ---- -- ---------------- -- ------------------ - ----------------------- -
--------------- - ------------------ - -----------------------
------------- -- ---
------- -- ---
-
-
-----------------------------------
-
---------------------------- - -- ------------------ - ---
--------------总结
对于像 performance.now()，window.requestAnimationFrame()，window.cancelAnimationFrame() 这些API，我们没有必要使用 Lodash 或其他第三方库，我们可以使用 performce-polyfill。performance-polyfill 包提供了所有支持的浏览器所需的功能，而没有提供非标准浏览器。
使用 performance-polyfill，我们可以通过重写一些相对低性能的浏览器 API 来改善设备的性能，并提供更流畅的用户体验。本文介绍了 performance-polyfill 的使用方法，包括安装和如何使用它所提供的API。
虽然 performance-polyfill 可以帮助我们优化网络和设备性能，但仍然有很多其他方法可以优化项目的性能。为了更好地了解全面的前端优化策略，我们可以参考其他教程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5751ab1864dac66c81