Making XBlock Preview Fast

Owned by Dave Ormsbee (Axim)
Last updated: May 06, 2024
2 min read

The major XBlock rendering in Studio are:

  • Server side processing (~100-200 ms)

  • Loading of CSS/JS assets ( ? ms )

  • Processing of JS (compile time and execution)

    • This includes MathJax execution on load

A lot of the overhead is also in making many concurrent requests to Studio to get the data to populate these.

Use Cases in Libraries

There are at least a few use cases for previewing libraries content that I know of:

  1. I need to scan a set of results to find the thing I want (especially if they're all named poorly).

  2. I want to see roughly what this looks like to students. Similar to (1), but (1) could be accomplished by something lower fidelity that doesn’t necessarily look like how it would be rendered to students, e.g. an explicit description or text excerpt.

  3. I want to test the problem to make sure it's correctly written. This is particularly important for custom response problems, where you're debugging code and making sure it's being scored as expected.

So we might do (1) or (2) for the results view when it's in list-mode (or possibly neither). I'm not clear on whether we should be aiming for (2) or (3) on the preview pane though.

Single Preview Panel

Things to investigate:

  • If resource loading/init were the largest thing, we could look into pjax or similar solutions, in order to swap out an individual component’s worth of content on an already loaded XBlock rendering page.

    • For instance, we could make one background iframe per block type, and swap iframes + content to load in it at the time the user clicks. We cam fetch content differences pretty quickly, and it should be cacheable for most types. JS and CSS would not need to be reloaded.

  • There’s an extra callback for getting a handler url, but it seems like that could come over in the initial response?

Actual resource loading doesn’t seem that bad in libraries. Capa has about 800 KB of stuff, uncompressed.

List View

Course Unit Page

Issues to investigate when preview is open on the new Unit page:

  • Remove unnecessary JS assets (loading things for unrelated XBlocks)

  • Remove MathJax init

  • …