Certain files with looping javascript load very slow
I have a HTML page of approximately 11,000 lines. It represents a z/OS ISPF editor screen. To save space and make it a bit more fancy it's made up of several sections. One of them just contains generated sequence numbers using code like
// seq = 10992 var a = [];
if (seq <= 9999)
{
z = '00
'
for (var i = 0; i < seq; i++)
a[i] = (i+10001).toString().substr(1);
document.write(' '+a.join(z)+'00
');
}
else
{
z = '0
'
for (var i = 0; i < seq; i++)
a[i] = (i+100001).toString().substr(1);
document.write(' '+a.join(z)+'0
');
}
//]]>
The other javascript on the page is:
// var fs2=0; // the actual fs2 of the fixed-width text. var fs=0; // the actual number of pixels width of each character. var ss=0; // dimensions of a browser scrollbar (note: ss will be NEGATIVE)
function ge(x) {return document.getElementById(x);}
function gs(x) {return document.getElementById(x).style;}
function setwidth() { // do initial sizing calculations and layout
var thisContainer = document.getElementById('mainarea');
if (thisContainer)
{
var onClickAction = 'scrollmain();';
thisContainer.onscroll = new Function(onClickAction);
}
ss=ge('scrolltest').offsetHeight; // get the height of a single line div without scrollbars
gs('scrolltest').overflow='scroll'; // allow the scrollbars to show
ss-=ge('scrolltest').offsetHeight; // find the difference (i.e. the height of a scrollbar - assume height of horizontal bar = width of vertical bar!
var wh=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight;
var ww=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
// determine the actual window inner height+width
fs2=Math.floor(ww/40); // "Courier New" is twice as high as it is wide; we need 80 columns; this is an approximation only
while ((Math.floor(ge('measure').scrollWidth) > Math.floor(ww+ss)) && fs2>1) // iteratively reduce fs2 until 80 columns fits on-screen
{
fs2-=1;document.body.style.font='normal '+fs2+'px/'+(fs2+4)+'px "Courier New"';
gs('measure').font='normal '+fs2+'px/'+(fs2+4)+'px "Courier New"';
}
gs('fixed').width=ge('measure').scrollWidth+'px'; // set the width of the header area
fs=ge('measure').scrollWidth / 80; // get the width of a character
gs('headers').height=(4+fs2)+'px'; // limit the height of the headers
gs('fixed').height=(8+(2*fs2))+'px'; // fix the height of the header at just two rows
gs('fixed').width=ge('measure').scrollWidth+'px';
gs('headers').width=gs('fixed').width;
gs('mainarea').width=(ge('measure').scrollWidth-(fs*8)-ss)+'px'; // set the width of the main area
gs('mainarea').height=(8+(wh+ss)-(6*fs2))+'px'; // set the main area height
gs('leftarea').height=(8+(wh+ss)-(6*fs2)+ss)+'px'; // set the left area height
gs('measure').display='none'; // don't display our 80-character measure
gs('scrolltest').display='none'; // don't display the scrollbar measuring div
scrollmain(); // set up the initial column numbers
ge('mainarea').scrollLeft=0;
}
function scrollmain() { // update the column indicators
var main=ge('mainarea');
var col='0000'+Math.floor((fs+(fs/2)+main.scrollLeft)/fs); // get the leftmost column number
ge('colfrom').innerHTML=col.substr(col.length-5,5); // trim it and display
col='0000'+Math.floor((Math.floor(((fs/2)+main.scrollLeft)/fs)+Math.floor((Math.ceil(main.style.width.replace('px',))+ss)/fs)));
ge('colto').innerHTML=col.substr(col.length-5,5); // trim and display the rightmost column number
ge('leftarea').scrollTop=main.scrollTop; // scroll the left area in sync with the main area
gs('topofdata').left=main.scrollLeft+'px'; // reposition the top of data bar
gs('bottomofdata').left=main.scrollLeft+'px'; // reposition the bottom of data bar
}
//]]>
The code was never fast, but on FF4 is absolutely sucks! File can be provided on request, 56K .RAR, 71K .ZIP.
Robert
I have a HTML page of approximately 11,000 lines. It represents a z/OS ISPF editor screen. To save space and make it a bit more fancy it's made up of several sections. One of them just contains generated sequence numbers using code like
//<![CDATA[
seq = 10992
var a = [];
if (seq <= 9999)
{
z = '00<br /> '
for (var i = 0; i < seq; i++)
a[i] = (i+10001).toString().substr(1);
document.write(' '+a.join(z)+'00<br />');
}
else
{
z = '0<br /> '
for (var i = 0; i < seq; i++)
a[i] = (i+100001).toString().substr(1);
document.write(' '+a.join(z)+'0<br />');
}
//]]>
The other javascript on the page is:
//<![CDATA[
var fs2=0; // the actual fs2 of the fixed-width text.
var fs=0; // the actual number of pixels width of each character.
var ss=0; // dimensions of a browser scrollbar (note: ss will be NEGATIVE)
function ge(x) {return document.getElementById(x);}
function gs(x) {return document.getElementById(x).style;}
function setwidth() { // do initial sizing calculations and layout
var thisContainer = document.getElementById('mainarea');
if (thisContainer)
{
var onClickAction = 'scrollmain();';
thisContainer.onscroll = new Function(onClickAction);
}
ss=ge('scrolltest').offsetHeight; // get the height of a single line div without scrollbars
gs('scrolltest').overflow='scroll'; // allow the scrollbars to show
ss-=ge('scrolltest').offsetHeight; // find the difference (i.e. the height of a scrollbar - assume height of horizontal bar = width of vertical bar!
var wh=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight;
var ww=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
// determine the actual window inner height+width
fs2=Math.floor(ww/40); // "Courier New" is twice as high as it is wide; we need 80 columns; this is an approximation only
while ((Math.floor(ge('measure').scrollWidth) > Math.floor(ww+ss)) && fs2>1) // iteratively reduce fs2 until 80 columns fits on-screen
{
fs2-=1;document.body.style.font='normal '+fs2+'px/'+(fs2+4)+'px "Courier New"';
gs('measure').font='normal '+fs2+'px/'+(fs2+4)+'px "Courier New"';
}
gs('fixed').width=ge('measure').scrollWidth+'px'; // set the width of the header area
fs=ge('measure').scrollWidth / 80; // get the width of a character
gs('headers').height=(4+fs2)+'px'; // limit the height of the headers
gs('fixed').height=(8+(2*fs2))+'px'; // fix the height of the header at just two rows
gs('fixed').width=ge('measure').scrollWidth+'px';
gs('headers').width=gs('fixed').width;
gs('mainarea').width=(ge('measure').scrollWidth-(fs*8)-ss)+'px'; // set the width of the main area
gs('mainarea').height=(8+(wh+ss)-(6*fs2))+'px'; // set the main area height
gs('leftarea').height=(8+(wh+ss)-(6*fs2)+ss)+'px'; // set the left area height
gs('measure').display='none'; // don't display our 80-character measure
gs('scrolltest').display='none'; // don't display the scrollbar measuring div
scrollmain(); // set up the initial column numbers
ge('mainarea').scrollLeft=0;
}
function scrollmain() { // update the column indicators
var main=ge('mainarea');
var col='0000'+Math.floor((fs+(fs/2)+main.scrollLeft)/fs); // get the leftmost column number
ge('colfrom').innerHTML=col.substr(col.length-5,5); // trim it and display
col='0000'+Math.floor((Math.floor(((fs/2)+main.scrollLeft)/fs)+Math.floor((Math.ceil(main.style.width.replace('px',''))+ss)/fs)));
ge('colto').innerHTML=col.substr(col.length-5,5); // trim and display the rightmost column number
ge('leftarea').scrollTop=main.scrollTop; // scroll the left area in sync with the main area
gs('topofdata').left=main.scrollLeft+'px'; // reposition the top of data bar
gs('bottomofdata').left=main.scrollLeft+'px'; // reposition the bottom of data bar
}
//]]>
The code was never fast, but on FF4 is absolutely sucks! File can be provided on request, 56K .RAR, 71K .ZIP.
Robert