Performance of CSS vs HTML

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

prino - 11 Sep 2007 14:00 GMT

I've written a bunch of REXX edit macros to convert JCL, PL/I, REXX
and SuperC output into a HTML format that very closely mimics the
display of the ISPF editor with "HILITE ON PAREN".

Initially I was quite happy that it would just display the data, but
then I thought "Why not add some ISPF like scrolling to it?" As a
complete novice to HTML, this was not very doable for me, but after
asking around, Derek Patteson of <http://
www.smallofficesolutions.co.uk/> was kind enough to produce something
for me for a pretty nominal amount.

Now, the original code works OK and the HTML loads in seconds, even
for the largest file (1.5Mb, 10965 lines) I could create. However, if
I slot the same data into Derek's skeleton, IE's CPU usage goes to
95-99% and rendering takes ages - I 've not even tried this big one.
Derek's code also scales the data to the browser window and a resize
of the window followed by a refresh will take horrible amounts of time
- a 3000 line page has been resizing itself for the past two hours...

I've done some investigating and it seems that the culprit is a 'white-
space:pre' CSS tag - using '<pre>...</pre>' HTML tags will speed up
things tremendously (only can test on IE6 right now), but the '</pre>'
tag insists on adding a space after it (again IE6) which screws up the
last line of the display.

My question is, is this difference between using CSS & HTML normal and
how, if possible, can I do something about it?

Robert

Reply to this Message

John Hosking - 11 Sep 2007 15:39 GMT

> Derek Patteson of <http://www.smallofficesolutions.co.uk/> was kind
> enough to produce something for me for a pretty nominal amount.

Well, without a URL to the page you're actually talking about, all I can
say is that based on *this* URL, I wouldn't get my hopes up for quality
coding. The page/site looks rather ... nominal.

> I've done some investigating and it seems that the culprit is a 'white-
> space:pre' CSS tag - using '<pre>...</pre>' HTML tags will speed up
> things tremendously (only can test on IE6 right now),

Well, you're ahead of us. ;-)

> but the '</pre>' tag insists on adding a space after it (again IE6)
> which screws up the last line of the display.

Even with pre {margin-bottom:0;} in the CSS?

> My question is, is this difference between using CSS & HTML normal and
> how, if possible, can I do something about it?

To be a bit pedantic, one doesn't use *either* HTML or CSS; the CSS is
nothing without some markup for it to apply to. It's possible to use
HTML with adding any CSS (although browsers may have a default
stylesheet), but it doesn't go the other way.

I've never seen any huge hit strictly from adding some necessary styles.
I _have_ seen some ridiculously large stylesheets which overspecify
things and create a burden on the whole process. Show us some URLs (you
said you had some original code and HTML, and then there's a new page
with CSS) so we can discuss in an informed way.

Signature

John
Pondering the value of the UIP: http://improve-usenet.org/

Reply to this Message

prino - 27 Sep 2007 14:46 GMT

On Sep 11, 4:39 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:

> > Derek Patteson of <http://www.smallofficesolutions.co.uk/> was kind
> > enough to produce something for me for a pretty nominal amount.
[quoted text clipped - 16 lines]
> > My question is, is this difference between using CSS & HTML normal and
> > how, if possible, can I do something about it?

OK, here is the code:

=== CUT ===
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>JCL: ROBERT.PLI(@FF)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body
{
margin:0px;
overflow:hidden;
background-color:black;
color:lime;
font:normal 48px/52px courier new;
}

.floatleft
{
float:left;
}

.rightheader
{
float:right;
text-align:right;
}

#headers
{
position:absolute;
top:0px;
left:0px;
width:500px;
}

#extra
{
width:100%;
overflow:hidden;
}

#fixed
{
width:100%;
overflow:hidden;
}

#leftarea
{
float:left;
overflow:hidden;
height:200px;
}

#mainarea
{
position:relative;
overflow:scroll;
height:2000px;
white-space:pre;
color:lime;
}

pre
{
margin-bottom:0;
}

#colto, #colfrom
{
color:aqua;
}

#topofdata
{
position:absolute;
white-space:pre;
color:#7890f0;
}

#bottomofdata
{
position:relative;
white-space:pre;
color:#7890f0;
}

#measure
{
position:absolute;
top:1px;
visibility:hidden;
}

#scrolltest
{
position:absolute;
overflow:hidden;
visibility:hidden;
}

em { font-style:normal; }
em.ispfblue { color:#7890f0; }
em.ispffuchsia { color:fuchsia; }
em.ispflime { color:lime; }
em.ispfred { color:red; }
em.ispfturq { color:aqua; }
em.ispfwhite { color:white; }
em.ispfyellow { color:yellow; }
</style>
</head>















<!-- along with this program. If not, see <http://www.gnu.org/licenses/

>. -->

<body scroll="no" onload="setwidth();">
<div id="scrolltest">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="measure">1234567890 This is a fixed 
80 characters width: do not change this text!
 4567890</div>
<div id="extra">
   File  Edit  Edit_Settings  Menu  Utilities  Compilers  Test  Help 
 ——————————————————————————————————————————————————————————————————————————————— 
</div>
<div id="fixed">
 VIEW       U96891.RAHP.PLI(@FF)

  Command ===> _________________________________________________
<br /

> Columns 00001 <span

id="colto">00072 Scroll ===> CSR 
</div>
<div id="leftarea">
 ****** 

<script>
seq = 7
var a = [];

z = '00  '
for (var i = 0; i < seq; i++)
a[i] = (i+10001).toString().substr(1);
document.write(' '+a.join(z)+'00 ');
</script>
 ******
</div>
 
<div id="mainarea" onscroll="scrollmain();">***************************** Top of Data
******************************
//U96891CL JOB (8370,8358),
// 'RAHP COMP/
LINK/GO',
// CLASS=M,
// MSGCLASS=X,
// MSGLEVEL=(2,0),
// NOTIFY=&SYSUID
//
*********************************************************************
**************************** Bottom of Data
****************************
</div>
<script language="javascript" type="text/javascript" defer="defer">
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
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)) //
iteratively reduce fs2 until 80 columns fits on-screen
{fs2-=1;document.body.style.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
}
</script>
</body>
</html>
=== CUT ===

It has 7 lines of text between the '...*** Top of Data ***'... and
'...*** Bottom of Data ***...' lines. Performance is excellent. Now
put 7000 lines between them (and adapt the script at the top to
generate 7000 sequence no's) and performance (using IE6 goes down
through the floor) after 50 inutes with 90+% CPU I just canclled
IE6...

Also note that there is _NO_ horizontal scrolling possible (which is
OK)

Now I've tried to use <pre>...</pre> tags,

- changed the 'white-space:pre;' in #mainarea to 'qwhite-space:pre',
effectively commenting it out
- added '<pre> at the end of the 'do NOT break this line' line and
- added '</pre>' on the line before the ''

Initial result is that the first line overlays the '...*** Top of Data
***...' line.

Corrected this by adding an extra linfeed after the '<pre>' tag.
Performance, even with 7000 lines is now OK, but now I can suddenly
scroll left/right...

What am I doing wrong, the data should NOT scroll left/right...

Robert
--
Robert AH Prins
prino on the .com domain of bigfoot

Reply to this Message

Jonathan N. Little - 27 Sep 2007 16:22 GMT

> On Sep 11, 4:39 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
> wrote:
[quoted text clipped - 21 lines]
> === CUT ===
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

<snip tons 'o code>

Incredible! It is amazing how the meaning of three little letters can
elude so many folks! Especially folks via GG that cannot seem to use
Google! Okay prino, I'll help you out.

http://www.google.com/search?hl=en&q=define%3AURL&btnG=Google+Search
define:URL - Google Search

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

prino - 28 Sep 2007 07:18 GMT

On Sep 27, 5:22 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

> > On Sep 11, 4:39 pm, John Hosking <J...@DELETE.Hosking.name.INVALID>
> > wrote:
[quoted text clipped - 27 lines]
> elude so many folks! Especially folks via GG that cannot seem to use
> Google! Okay prino, I'll help you out.

Ever thought about the fact that the poster may not have a personal
website and that the code shown comes from an intranet page? This code
has been dumped in my lap and whereas I've worked with PL/I & REXX for
about two decades, CSS and Javascript (and to a lesser extent) are
still mostly completely foreign to me.

FWIW, as I mentioned in the very first post of this thread, the code
posted works absolutely flawlessly in Firefox, on a slow (1.3 GHz)
notebook the largest page I can throw at it (almost 11,000 lines of
HTML'ised PL/I, around 1.5Mb) renders in around 10 seconds. The
problem is IE6, which seems incapable of handling 'white-space:pre'
and that's why I tried to use '<pre>...</pre>' instead, which works,
but messes up the display.

Robert

Reply to this Message

Rob - 28 Sep 2007 08:14 GMT

prino schreef:

> Ever thought about the fact that the poster may not have a personal
> website and that the code shown comes from an intranet page?

Maybe you could ask the folks in
comp.infosystems.intranet.authoring.stylesheets

Signature

Rob

Reply to this Message

Jonathan N. Little - 28 Sep 2007 13:43 GMT

> On Sep 27, 5:22 pm, "Jonathan N. Little" <lws4...@centralva.net>
> wrote:

>> Incredible! It is amazing how the meaning of three little letters can
>> elude so many folks! Especially folks via GG that cannot seem to use
[quoted text clipped - 5 lines]
> about two decades, CSS and Javascript (and to a lesser extent) are
> still mostly completely foreign to me.

We never heard that on before. Try Google again:

http://www.google.com/search?hl=en&q=free+web+hosting&btnG=Google+Search
free web hosting - Google Search

And put up a sample page, then list a URL! Don't post tons 'o code.

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message

Bergamot - 29 Sep 2007 00:56 GMT

> Ever thought about the fact that the poster may not have a personal
> website and that the code shown comes from an intranet page?

Ever thought that we haven't heard that story about a million times
already? What makes your situation different from any of them?

This isn't a help desk, but if you want to use it as one, then make it
as easy as possible for us to help you. Posting code is not the way.
Posting a URL is. That's the accepted convention of this group, like it
or not.

> This code has been dumped in my lap

Sorry, but that's not really our problem.

Signature

Berg

Reply to this Message

Andy Dingley - 27 Sep 2007 19:42 GMT

> font:normal 48px/52px courier new;

Just WT_F_ are you trying to do here?

These people are incompetents and their web design is worthless. Throw
it away.

Also learn what "post a URL means", lest we regard you as equally
clueless.

Reply to this Message

Andy Dingley - 27 Sep 2007 16:08 GMT

On 11 Sep, 15:39, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:

> Well, without a URL to the page you're actually talking about, all I can
> say is that based on *this* URL, I wouldn't get my hopes up for quality
> coding. The page/site looks rather ... nominal.

But, but,
"We are proud to be working toward Quality Certification to ISO9001
(2000) standard"
8-)

If I ever needed an example to support the "all valid CSS sites look
boring and boxy" canard, then I might use that site. Except that it's
not valid.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2007

Performance of CSS vs HTML