mirrors/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2025-04-04 12:47:38 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix memory leak when many videos are queued.

Browse source 
Previously angular was re-rendering the entire queue whenever any downloads changed their state. The websocket provides progress updates at a high frequency, which combined with a long download queue can quickly cause hundreds of thousands of dom nodes to be created. This results in a spike in memory usage which may persist for some time depending on browser behaviour.

Adding a trackBy function resolves the issue by telling angular which row relates to a particular download.
This commit is contained in:
James Lyne 2023-08-14 11:39:36 +01:00
parent 262e296783
commit 784dc2f735
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ui/src/app/app.component.html
View file

@ -94,7 +94,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
<tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
<td>
<app-slave-checkbox [id]="download.key" [master]="queueMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
</td>
@ -127,7 +127,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let download of downloads.done | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
<tr *ngFor="let download of downloads.done | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
<td>
<app-slave-checkbox [id]="download.key" [master]="doneMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
</td>