Avoid rendering Webview twice? (front and back)

Hi, I am trying to design my card templates in the most efficient way to make the transitions between fron to back and cards as fluid as possible.

I feel that a fundamental problem that I cannot overcome to improve performance is that the front and back card are always rendered from scratch. This often seems kind of inefficient since the back is (almost always) the Front + some div appended. I wonder if there is any trick for avoiding this extra rendering and improve performance.

Also, in the long term I wonder if it has been considered the possibility of defining card templates via JS, so that instead of having the Front and Back templates, we would have just one template (let it be front), and two JS snippets that will be called in different events (showFront, showBack). This would allow to change the card just by running a minor JS snippet. Moreover, this could be applied to transition between different cards (of the same note type) as well.

Thank you in advance.

The context remains the same on Anki Desktop, so variables persist from front to back. The only thing that should be loaded from scratch is #qa. If you put your content outside of that element (via JS), it will persist. Please bear in mind that this doesn’t apply to AnkiDroid, which still rebuilds the whole document on every card flip.

And images should already get preloaded, IIRC. At least there have been efforts in that direction already.

You can already do that. To tell your script which side it needs to display, you can use a custom attribute like back on the <script> tag:

Front

<script src="_your_script.js">

Back

<script src="_your_script.js" back>

and then in your script:

(() => {
  const isBack = document.currentScript.hasAttribute("back");

  if (isBack) {
    // do backside stuff
  }
})();
3 Likes

Thank you for the detailed and quick reply @kleinerpirat!

The context remains the same on Anki Desktop, so variables persist from front to back. The only thing that should be loaded from scratch is #qa . If you put your content outside of that element (via JS), it will persist. Please bear in mind that this doesn’t apply to AnkiDroid, which still rebuilds the whole document on every card flip.

Oh this is very interesting, understanding the rendering process of both Anki Desktop and AnkiDroid is very important for optimizing cards so thank you for the insights, if you have any link to docs also I would be interested.

Regarding the optimization, I am a heavy user of AnkiDroid so looks like I cannot leverage much this. However, let’s assume for a second that this is no the case. Then it looks like I could bypass the 2-rendering behavior by creating an alternative qa-like div, for example qa2, and delete or hide qa. Then in qa2 I could load both front+back and use JS to display/hide as needed. I should check at the end the actual performance implication though. I am worried that loading the front will be a bit slower leading to less fluid card transitions.

You can already do that. To tell your script which side it needs to display, you can use a custom attribute like back on the <script> tag:

Here I just want to clarify that this is useful for front → back transitions but not for transitions between cards of the same note type (that could also be optimized since they use the same template).

<script src="_your_script.js">

Since you mentioned this and you are the author of a guide about this (I can’t paste links), out of curiosity, is this the recommended way of loading JS files for Anki Desktop and AnkiDroid? I read somewhere that this simply approach might be buggy and I am currently doing an async module import (which is slower but only a few lines of code).

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.