Maniphest T121901

UploadWizard UI performance abysmal when adding many files to upload at once
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	matmarex
	Dec 18 2015, 6:47 PM

Description

UploadWizard UI performance is abysmal when the user is adding many files to upload at once (like 20-30 or so). The page locks up for a while, and you can actually see it create and insert the box for each file into the page, one by one.

I'm sure that the fact that we insert one-by-one doesn't help (we should be building the UI "off-screen" and insert it into DOM; this would require a big rewrite of how we pass DOM elements into functions that "fill" them). The fact that we start the uploads of all the files immediately also definitely is not a good thing here.

But it seems too bad to be just that, so someone should investigate.

I recorded a timeline in Chrome dev tools of me choosing 30 files from the dialog. (Yes, it took this long.)

TimelineRawData-20151218T194053.json.bz28 MBDownload

(356 MB uncompressed)

Details

	Subject	Repo	Branch	Lines +/-
	Make the upload interface load faster	mediawiki/extensions/UploadWizard	master	+9 -10
	Kill polling for moveFileInputToCover	mediawiki/extensions/UploadWizard	master	+30 -44

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	matmarex	T121901 UploadWizard UI performance abysmal when adding many files to upload at once
Resolved	matmarex	T126712 Kill moveFileInputToCover
Resolved	matmarex	T92809 "Maximum number of concurrent uploads" (upwiz_maxsimultaneous) isn't respected
Resolved	matmarex	T126777 Defer loading of thumbnails in "Upload" step until after the rest of the interface is shown
Resolved	matmarex	T126778 Build UWUploadInterface DOM detached from the document, then attach all at once
Resolved	matmarex	T126780 UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step

Event Timeline

matmarex created this task.Dec 18 2015, 6:47 PM

matmarex raised the priority of this task from to Needs Triage.

matmarex updated the task description. (Show Details)

matmarex added projects: UploadWizard, Performance Issue.

matmarex subscribed.

Restricted Application added a project: Multimedia. · View Herald TranscriptDec 18 2015, 6:47 PM

Restricted Application added subscribers: StudiesWorld, Steinsplitter, Aklapper. · View Herald Transcript

Change 260059 had a related patch set uploaded (by MarkTraceur):
Kill polling for moveFileInputToCover

https://gerrit.wikimedia.org/r/260059

Restricted Application added a subscriber: Matanya. · View Herald TranscriptDec 18 2015, 7:05 PM

gerritbot added a project: Patch-For-Review.Dec 18 2015, 7:05 PM

Change 260059 merged by jenkins-bot:
Kill polling for moveFileInputToCover

https://gerrit.wikimedia.org/r/260059

ReleaseTaggerBot added a project: MW-1.27-release (WMF-deploy-2016-01-12_(1.27.0-wmf.10)).Dec 21 2015, 4:00 PM

matmarex removed projects: MW-1.27-release (WMF-deploy-2016-01-12_(1.27.0-wmf.10)), Patch-For-Review.Dec 21 2015, 4:08 PM

matmarex set Security to None.

MarkTraceur triaged this task as High priority.Dec 21 2015, 9:33 PM

MarkTraceur subscribed.

matmarex mentioned this in T122473: Long time of uploading images on Wikimedia Commons. (Opera).Dec 28 2015, 6:44 PM

Change 263883 had a related patch set uploaded (by MarkTraceur):
Make the upload interface load faster

https://gerrit.wikimedia.org/r/263883

gerritbot added a project: Patch-For-Review.Jan 13 2016, 6:05 PM

Change 263883 abandoned by MarkTraceur:
Make the upload interface load faster

Reason:
Bartosz is right.

https://gerrit.wikimedia.org/r/263883

matmarex claimed this task.Feb 4 2016, 7:37 PM

matmarex merged tasks: T125269: Uploading multiple images freezes the browser, T122473: Long time of uploading images on Wikimedia Commons. (Opera).

matmarex removed a project: Patch-For-Review.

matmarex added subscribers: Discanto, Base, Nickispeaki.

Some high-level notes:

We're just doing many expensive things. Loading ten high-resolution photos to display their thumbnails is quite simply an expensive operation. We should try doing fewer of them (for example, only display thumbnails of uploads visible on the screen at the moment).
We're trying to start all the uploads at once. This requires loading the file contents, updating all the upload interfaces to show status and progress, and the browser is going to queue the requests anyway. We should do them one-by-one (or at least no more than several at once).
We're building the upload interfaces inefficiently. You can actually see them appear, part by part, one by one, while your browser is frozen; with every change, some time is spent to re-render. We should build them "off-screen" and display them all at once.
We're using libraries which weren't optimized for performance. Constructing some OOjs UI widgets is taking way more time than it should. Comparing and modifying moment objects is taking more time than it should.
We're just boneheadedly doing needless work sometimes. The "Add more files" button is apparently being set up three times for each added file.

The problem is that there isn't a single slow thing, so this is probably going to take some work to investigate which parts are worth improving, and some more to actually improve them.

matmarex added a subtask: T126712: Kill moveFileInputToCover.Feb 12 2016, 4:37 AM

matmarex added a subtask: T92809: "Maximum number of concurrent uploads" (upwiz_maxsimultaneous) isn't respected.Feb 12 2016, 5:21 PM

matmarex added subtasks: T126777: Defer loading of thumbnails in "Upload" step until after the rest of the interface is shown, T126778: Build UWUploadInterface DOM detached from the document, then attach all at once, T126780: UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step.Feb 12 2016, 5:42 PM

matmarex added subtasks: T126788: mw.widgets.DateInputWidget takes comparably long time to construct, investigate why, T126787: OOjs UI performance issues affecting UploadWizard.Feb 12 2016, 5:57 PM

matmarex closed subtask T126780: UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step as Invalid.Feb 18 2016, 5:09 PM

matmarex reopened subtask T126780: UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step as Open.Feb 18 2016, 6:18 PM

matmarex closed subtask T126712: Kill moveFileInputToCover as Resolved.Feb 18 2016, 9:08 PM

matmarex closed subtask T126780: UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step as Resolved.Feb 18 2016, 9:29 PM

matmarex closed subtask T126778: Build UWUploadInterface DOM detached from the document, then attach all at once as Resolved.Feb 18 2016, 11:46 PM

T126787: OOjs UI performance issues affecting UploadWizard and T126788: mw.widgets.DateInputWidget takes comparably long time to construct, investigate why only affect the "Details" step (not the "Upload" step; at least after T126780: UWDetails objects are being constructed from scratch twice for each upload: once when stashed, once when moving to Details step was fixed), so I'm removing them from the list of blockers.