18

When answering JavaScript questions, I often include a handful of code snippets to accompany written descriptions. I've noticed that after two or three snippets, when I'm continuing to write the answer, the keyboard experiences a large input lag – I type some letters, and it takes over a second for them to appear on screen sometimes. This latency goes up as more snippets are added to the answer.

Here's an answer I'm writing right now where the problem is becoming unbearable https://stackoverflow.com/a/43195580/633183

Recreating the "bug" is a little difficult:

  1. Open the question: https://stackoverflow.com/a/43195580/633183
  2. Click the "edit" link
  3. Add some text in the textarea
  4. Click outside of the textarea to trigger a re-render on the answer preview (give Stack Overflow a couple of seconds to complete the render before re-focusing the textarea)
  5. Repeat steps 3 and 4 a bunch of times
  6. You will notice keyboard latency go way up - to a point where the textarea is literally unusable.

My suspicion is that there is some kind of memory leak when the answer preview renderer cleans up the stack snippets improperly. This issue only happens on answers where I include stack snippets.

For what it's worth, this is an old bug. I've been putting up with it for at least a year. It's possible it's been there since the beginning of stack snippets and I didn't notice right away.

Of the two browsers I have access to, Google Chrome is affected, but Safari is not. I have only tested on macOS. Another user reports experiencing this bug in Firefox.

5
  • 1
    It's possible other browsers are affected, but I've only noticed it in Chrome
    – Mulan
    Commented Apr 4, 2017 at 19:36
  • 4
    Reproduced in 57.0.2987.133 (64-bit)
    – Nic
    Commented Apr 5, 2017 at 23:11
  • 2
    I've experienced this on Firefox many times, over several months. The SE code completely reformats everything for each key the user presses (actually, the code is called 3 or 4 times for each key press; DOM is only changed once). This can easily get behind, causing lag. The solution is to throttle how often the reformatting is done. This leaves the UI more responsive from the user's point of view, but means the formatted text (often off-screen) lags slightly behind user input, when the user input is rapid. I tested by creating an (unpublished) extension to throttle the events SE uses for this.
    – Makyen Mod
    Commented Apr 6, 2017 at 5:10
  • Related: While I haven't experienced noticeable lag on regular answers or those with snippets, but I definitely experience lag on any answer that uses LaTeX/MathJax. Debounce, as suggested below, would be great
    – Flambino
    Commented Apr 6, 2017 at 21:41
  • This post on the same subject has a userscript which fixes the problem. Commented Jan 3, 2020 at 9:13

1 Answer 1

7

Even without snippets, a large enough answer runs into this issue.

If Makyen's comment is correct (and it certainly seems to be) that the rendered output is re-rendered on every keypress, some kind of debouncing is definitely necessary, perhaps kicking in the first time that processing the post takes more than X milliseconds.

Something along these lines:

var MAX_CHANGES_QUEUED = 10; // Some acceptable limit on backlog
var PROCESSING_DELAY = 100;  // Milliseconds before updating
var changesQueued = 0;
var timer = 0;
var theEditBox = $("....");
theEditBox.on("input keypress", function(e) {
    if (timer) {
        clearTimeout(timer);
    }
    if (++changesQueued > MAX_CHANGES_QUEUED) {
        timer = 0;
        process();
    } else {
        timer = setTimeout(process, PROCESSING_DELAY);
    }
});
function process() {
    // Process the changes
}

(That's always "kicked in," would want to add the bit measuring process and deciding to activate it.)

Example using HTML in a text area:

var MAX_CHANGES_QUEUED = 10; // Some acceptable limit on backlog
var PROCESSING_DELAY = 100;  // Milliseconds before updating
var changesQueued = 0;
var timer = 0;
var theEditBox = $("textarea");
theEditBox.on("input keypress", function(e) {
    if (timer) {
        clearTimeout(timer);
    }
    if (++changesQueued > MAX_CHANGES_QUEUED) {
        timer = 0;
        process();
    } else {
        timer = setTimeout(process, PROCESSING_DELAY);
    }
});

function process() {
  $("#rendered").html(theEditBox.val());
  changesQueued = 0;
}
<textarea rows="10" cols="50"></textarea>
<hr>
<div id="rendered"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5
  • 3
    Not having code like this, which adapts the processing done based on what can be done in real-time, is a symptom of a common assumption that code will always be running on machines/configurations which can perform whatever processing is desired fast enough to keep up with real-time requirements. I often feel that programmers should have (& be required to actually try to use, for a day? hour?) a test machine with older HW/SW, so they can experience how their code feels to those users who don't have the latest and greatest hardware. In this case, the issue is not just on older hardware.
    – Makyen Mod
    Commented Apr 6, 2017 at 18:18
  • @Mayken, if I'm understanding your comment correctly, you agree TJ's approach is a good one?
    – Mulan
    Commented Apr 6, 2017 at 18:47
  • 1
    @naomik, It's the beginning of a good approach; significantly better than nothing. As is stated, when possible, updates should be in real-time. Throttling should be enabled if the time the task is expected to take is longer than the time between user input events. User typing tends to be in bursts. The burst can be a word, sentence, code control structure, cursor movement, etc. The length of an input burst will vary considerably. Once throttling, the length of the gap between events, to detect the end of a burst to trigger the update, can adapt based on the time the task takes & user (cont')
    – Makyen Mod
    Commented Apr 6, 2017 at 21:36
  • 1
    input rate during a burst. Task queue limit: Generally, in some cases, a limit should exist, in others it should not, based on the relative importance of the task providing feedback to the user's action during an input burst. In other cases, a max time between delayed updates may be better than limiting the # of times the task is postponed (i.e. different typing rates). For this situation, the user rarely needs to see the new formatted text until the end of a burst. Thus, IMO, having neither a limit on the # of times it's postponed, nor a minimum time between renders is the better choice.
    – Makyen Mod
    Commented Apr 6, 2017 at 21:37
  • 1
    @naomik, As with many situations, a solution that gets you 80%+ of the way to an ideal will get you the largest improvement for the effort. Just a basic delay of re-rendering until there is a predetermined time-gap between user input events will dramatically improve the situation. OTOH, the better solution would be to also restructure the code so that only the portion of the formatted text which has actually changed is re-rendered, instead of re-rendering the entirety of the post being edited. Doing that would allow the UI to maintain real-time updates under more conditions.
    – Makyen Mod
    Commented Apr 6, 2017 at 21:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .