libretic/etherpad-lite
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Speed up line numbering of huge pads. Tested on chrome and firefox. Pad with more than 6000 lines will be loaded fast. It refresh first all current line numbers, then creates new with DocumentFragment and style.height info. Reflow(rebuild and rendering of dom) will be reduced to one for new ones, instead for each ones.

Browse source
This commit is contained in:
ryrun 2011-12-07 14:23:28 +01:00
parent a444f11900
commit 9616d5631f
1 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
static/js/ace2_inner.js
View file

@ -5657,31 +5657,17 @@ function OUTER(gscope)
{
var newNumLines = rep.lines.length();
if (newNumLines < 1) newNumLines = 1;
if (newNumLines != lineNumbersShown)
{
var container = sideDivInner;
var odoc = outerWin.document;
while (lineNumbersShown < newNumLines)
{
lineNumbersShown++;
var n = lineNumbersShown;
var div = odoc.createElement("DIV");
div.appendChild(odoc.createTextNode(String(n)));
container.appendChild(div);
}
while (lineNumbersShown > newNumLines)
{
container.removeChild(container.lastChild);
lineNumbersShown--;
}
}
//update height of all current line numbers
if (currentCallStack && currentCallStack.domClean)
{
var a = sideDivInner.firstChild;
var b = doc.body.firstChild;
var n = 0;
while (a && b)
{
if(n > lineNumbersShown) //all updated, break
break;
var h = (b.clientHeight || b.offsetHeight);
if (b.nextSibling)
{
@ -5695,10 +5681,42 @@ function OUTER(gscope)
if (h)
{
var hpx = h + "px";
if (a.style.height != hpx) a.style.height = hpx;
if (a.style.height != hpx) {
a.style.height = hpx;
}
}
a = a.nextSibling;
b = b.nextSibling;
n++;
}
}
if (newNumLines != lineNumbersShown)
{
var container = sideDivInner;
var odoc = outerWin.document;
var fragment = odoc.createDocumentFragment();
while (lineNumbersShown < newNumLines)
{
lineNumbersShown++;
var n = lineNumbersShown;
var div = odoc.createElement("DIV");
//calculate height for new line number
var h = (b.clientHeight || b.offsetHeight);
if (b.nextSibling)
h = b.nextSibling.offsetTop - b.offsetTop;
if(h) // apply style to div
div.style.height = h +"px";
div.appendChild(odoc.createTextNode(String(n)));
fragment.appendChild(div);
b = b.nextSibling;
}
container.appendChild(fragment);
while (lineNumbersShown > newNumLines)
{
container.removeChild(container.lastChild);
lineNumbersShown--;
}
}
}