LaTeX rendering delay

Question

I experience a delay of about 5-10 seconds when I edit a question with math markup in https://math.stackexchange.com/.

However, there is no such delay in https://mathoverflow.net/.

Is there any setting to reduce or eliminate this delay in the former site? If not in the settings, is there a greasemonkey userscript that I can use? (I may be wrong but it seems to me that the LaTeX rendering is done on the client side - if so, there will be no pressure on server if this is implemented.)

Answer 1

By default there is a 5-second delay before turning TeX code to equation, similar to Stack Overflow where the source code is syntax-colored.

You could use this userscript to reduce the waiting time to 0.5 seconds:

// ==UserScript==
// @name           Reduce equation preview time
// @namespace      http://networkpx.googlecode.com
// @description    Reduce equation preview time to 0.5 seconds on math.SE
// @include        https://math.meta.stackexchange.com/*
// @include        http://math.stackexchange.com/*
// ==/UserScript==

    unsafeWindow.$("#wmd-input").typeWatch({
      callback:unsafeWindow.styleCode,
      wait:500,
      captureLength:5,
      highlight:false
    });

Answer 2

I've been working on migrating MathOverflow to MathJax (from jsMath). One problem is that MathJax doesn't cache equations, which makes it slower for previews (where it has to re-render the same math many times). Here's a solution that I like much better than simply reducing the typeWatch wait time since it doesn't result in the annoying flickering of the math. You can permanently implement it by making it into a UserScript in the way KennyTM suggested.

wmdpreview     = document.getElementById('wmd-preview');
wmdpreview2    = document.createElement("div");
wmdpreview.id  = "wmd-preview-orig";
wmdpreview2.id = "wmd-preview"; // this is done to get the css right
document.getElementById("post-editor").insertBefore(wmdpreview2,wmdpreview);
$(wmdpreview).hide()
var running = false;
$("#wmd-input").typeWatch({highlight:false,wait:300,callback:function(){
  if (!running){ // don't do anything if MathJax is still working on the last one
    running = true;
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,wmdpreview],function(){wmdpreview2.innerHTML=wmdpreview.innerHTML;running=false});
  }
}});

This makes the preview a bit less responsive (a lot less responsive if you're writing a long post with lots of math), but it's much better than being responsive but visually distracting. Since you're just injecting the rendered math into the preview div after it's been processed, you don't get the MathJax control panel when you right click on math. It also messes up the rendering if you're using MathML instead of HTML-CSS for some reason.