属性动画内存泄漏_减少使用动画时的内存泄漏

忘是亡心i 2023-02-22 03:40 77阅读 0赞

属性动画内存泄漏

I have been doing a lot of work with Snap.svg recently and you may have already seen an [article][] a while back regarding SVG animations.

我最近在Snap.svg上做了很多工作，您可能已经看过一段时间有关SVG动画的[文章][article] 。

After the article had been published, I took some time out to review the code I had written and found that I had created some memory leaks. Unless you monitor your website's performance, you wouldn't normally realise this was occurring. To show you how to find memory leaks I will use my Hill Valley animation I wrote as an example.

文章发表后，我花了一些时间检查我编写的代码，发现我创建了一些内存泄漏。 除非您监视网站的性能，否则通常不会意识到这种情况的发生。 为了向您展示如何查找内存泄漏，我将以我编写的Hill Valley动画为例。

## Chrome浏览器“获取堆快照” **(**Chromes 'Take Heap Snapshot'**)** ##

Chrome has some great tools to understand whether you are introducing memory leaks. The easiest way to do so is to use 'Take Heap Snapshot.' Found in Developer Tools -> Profiles. Simply hit the record button.

Chrome浏览器提供了一些很棒的工具，可以帮助您了解是否引起内存泄漏。 最简单的方法是使用“获取堆快照”。 在开发人员工具->个人资料中找到。 只需点击录制按钮。

The first thing to check is if a looping animation has caused the memory leak. To do this, take a heap snapshot at a series of intervals. As you can see below, the memory size is growing inexplicably.

首先要检查的是循环动画是否引起了内存泄漏。 为此，请按一系列间隔拍摄一个堆快照。 如下所示，内存大小正在莫名其妙地增长。

![Memory Leaks][]

Now we have these snapshots; we can use the comparison tool to figure out where the main growth in memory is. To do this, choose the last snapshot, and then click ‘Comparison' from the summary dropdown.

现在我们有了这些快照。 我们可以使用比较工具来找出内存的主要增长位置。 为此，请选择最后一个快照，然后从摘要下拉列表中单击“比较”。

![Memory Leaks][Memory Leaks 1]

Now choose your first snapshot from the dropdown to the right of the class filter.

现在，从类过滤器右侧的下拉列表中选择您的第一个快照。

![Memory Leaks][Memory Leaks 2]

Once Chrome has worked out what it needs to sort your table by the \#**Delta**. You will now see where those leaks are coming from, start at the top and work your way down. Please note, not all of these new things will be memory leaks, sometimes memory is just needed.

一旦浏览器已确定哪些工作需要由＃ **三角洲**你的表进行排序。 现在，您将看到这些泄漏的来源，从顶部开始，然后逐步下降。 请注意，并非所有这些新事物都是内存泄漏，有时仅需要内存。

When I clicked on my top \#Delta, I can see from the stack trace that the finish event of snap.svg and the easing algorithm of the mina caused this. Many parts of the code can cause this, which I will now discuss.

当我单击顶部的\#Delta时，从堆栈跟踪中可以看到snap.svg的完成事件和mina的缓动算法导致了此情况。 代码的很多部分都可能导致这种情况，我现在将讨论。

![Memory Leaks][Memory Leaks 3]

### 标记扫描算法 **(**The Mark-and-Sweep algorithm**)** ###

Unfortunately, with the way we sometimes write animations in JavaScript, we can easily introduce patterns that the Mark-and-Sweep algorithm for garbage collection won't pick up.

不幸的是，通过我们有时用JavaScript编写动画的方式，我们可以轻松地引入垃圾收集标记清除算法不会采用的模式。

The Mark-and-Sweep algorithm in simple terms works by trying to work out if an object is unreachable. If it finds it that object is unreachable, it will apply garbage collection to that object.

简单地说，“标记并扫描”算法通过尝试确定对象是否不可访问来工作。 如果发现该对象不可访问，则会将垃圾回收应用于该对象。

That means that when you create a singleton of an animation library in a loop, but never set this assignment to null, garbage collection will never apply itself to that object. As an object is still reachable.

这意味着，当您在循环中创建一个动画库的单例但从未将此分配设置为null时，垃圾回收将永远不会将自身应用于该对象。 作为对象仍然可以到达。

The easiest way to overcome this is simply reset the variable to null once the animation has ended.

解决此问题的最简单方法是在动画结束后将变量重置为null。

### 动画积累 **(**Animations building up**)** ###

With the use of animation libraries, it is very easy to have animations building up in memory. Most libraries have a built-in function to try and overcome this, as we built the previous tutorial with Snap.SVG, I will explain its version.

通过使用动画库，可以很容易地在内存中建立动画。 大多数库都具有内置函数来尝试克服此问题，因为我们使用Snap.SVG构建了上一教程，所以我将解释其版本。

Snap.SVG uses the same method as jQuery that is the `stop()` function. It stops all queued animations and continues with the new animation.

Snap.SVG使用与jQuery相同的方法，即`stop()`函数。 它停止所有排队的动画，并继续新的动画。

### 计时器永远不会被清除 **(**Timers never being cleared**)** ###

Probably the most common memory leak not only in animations, but in general UI interfaces around the web. If you do not remove the reference to a timer, it will simply hang around in memory never to be removed by garbage collection.

可能最常见的内存泄漏不仅发生在动画中，而且发生在网络上的一般UI界面中。 如果不删除对计时器的引用，则它只会在内存中徘徊，永远不会被垃圾回收删除。

For most applications, this isn't an issue as a page refresh when changing between pages will remove it. However, now the web is full of one-page applications you can see how this quickly becomes a problem.

对于大多数应用程序来说，这不是问题，因为在页面之间进行切换会删除页面时刷新页面。 但是，现在网络上到处都是一页纸的应用程序，您可以看到它如何Swift成为问题。

The best way to clear your timers is by adding them to an array, then when you think is best, usually the start of a new animation, or just before a js page transition. Clear said timers and reset the array.

清除计时器的最佳方法是将其添加到数组中，然后在您认为最佳的时候(通常是新动画的开始)或在js页面过渡之前。 清除所述计时器并重置阵列。

> 翻译自: [https://davidwalsh.name/reducing-memory-leaks-working-animations][https_davidwalsh.name_reducing-memory-leaks-working-animations]

属性动画内存泄漏

[article]: https://davidwalsh.name/svg-animations-snap
[Memory Leaks]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tZW1vcnktbGVha3MtaW1hZ2VzLzEucG5n?x-oss-process=image/format,png
[Memory Leaks 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tZW1vcnktbGVha3MtaW1hZ2VzLzIucG5n?x-oss-process=image/format,png
[Memory Leaks 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tZW1vcnktbGVha3MtaW1hZ2VzLzMucG5n?x-oss-process=image/format,png
[Memory Leaks 3]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9tZW1vcnktbGVha3MtaW1hZ2VzLzQucG5n?x-oss-process=image/format,png
[https_davidwalsh.name_reducing-memory-leaks-working-animations]: https://davidwalsh.name/reducing-memory-leaks-working-animations