Page MenuHomePhabricator

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

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.)


(356 MB uncompressed)

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 a subscriber: matmarex.
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

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

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

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

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

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

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

Reason:
Bartosz is right.

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

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.