OT: and Out of Interest. HTML Token Sizes?

  • Thread starter Thread starter BotRot
  • Start date Start date
B

BotRot

Hello ASPNET Forum,

I have a question regarding HTML Tokens. I am unable to successfully query Google
for relevant results to my question. Is there anywhere I can find information on
HTML Tokens and their corresponding sizes, and render times. I understand that
there would be many factors that would determine size and draw/render times, but
is there any base standard.

That is; Which would be largest in size, and which would take longest to load (and
render)? Something like,

<div></div> is larger in size (bytes? something like that), than a <p></p>, and
takes longer to draw/render...???

<p></p> is larger that </ br>, and may take longer to render.


What would be the smallest token? Which would be that largest? OK the best I
have found is some websites stating that iframes are large, and (may) take longer
to render/redraw.


Thanks and regards,
- BotRot
 
What would be the smallest token? Which would be that largest? OK
the best I have found is some websites stating that iframes are large,
and (may) take longer to render/redraw.
Click to expand...

I am assuming, by the way you phrased this, you are worried about
rendering size?

As far as rendering size, images are going to outweigh any text you
might send. If you want to speed rendering of a page, reduce image size
by using the proper image algorithm to get the smallest size.

With Unicode, all characters are 2 bytes in length. This is true whether
it is <div>, which would be 10 bytes in length or <p>, which is 6 bytes.
As far as the comparison, the <p> would be shorter, but the div is more
flexible, as it allows you to use CSS for position, which can be a great
savings in size.

But rendering images is not a problem if you give a size to the image,
as the browser will save space and render around the image space. You
can "save space" for the image with absolute sizes in the image tag or
even CSS.

In addition, moving to CSS allows you to use lists for menus rather than
tables, which greatly reduces rendering size for the page. As far as
general rendering times, CSS versus tags, I am not sure. I have never
tested this, nor have I seen a site that has that information. CSS is
more a maintainability issue.

As far as rendering speed, there is not enough of a difference in most
of the "tokens" you mention here to opt for, let's say, <p> over <br/>.
If the difference in rendering is more than a millisecond difference, I
would be greatly surprised.

I don't know of a base standard for rendering times. And if there is
one, it is relative to browser, machine specifications (memory, CPU),
etc.

One of the biggest factors in rendering is the amount of data you are
attempting to send to the browser. With ASP.NET, it is often the size of
the ViewState that causes issue (especially if you have a lot of data in
a Grid set with ViewState on).

Hope this helps. And sorry I can't lead you to a page that has the
rendering times for <p> vreus <br/>, etc.

Peace and Grace,


--
Gregory A. Beamer (MVP)

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Gregory, thank you very much, and yes it does help. My intension is to have the
smallest (and common) token to clear floats, after floats are applied for
positioning elements within a page, div,...

After researching clearing floats, and all the different (clever) methods to do
so, I found (maybe just in my case), something like;

Method 1:
-------------------
..my-div {float: left; ....etc}

..my-div:after {clear: both; ....etc}

Doesn't work (maybe it's me and not the CSS???)

Method 2 (considered as the most clever way):
-----------------------------------------------------------------

Strategically placing, overflow: auto | hidden, attribute values in certain divs
(or other elements), seems to work, but one needs to be strategic in their
placement, otherwise a nice looking page turns to a dog's breakfast, while trying
to place an overflow attribute.

Method 3 (deemed to old inefficient way):
---------------------------------------------------------

Defining in CSS something like;

..float-clear {clear: both, display: block, height: 0px, width: 0px, visibility:
none;}

Always works, and for all browsers too.

So I want to use the smallest (common) element (in size, and render time), to
clear my floats after their application. At the moment I'm using,

<span id="Span1" class="float-clear"></span>
....
<span id="Span2" class="float-clear"></span>

....and so on

After my floated divs.


Nothing important really, and thanks again Gregory for your time and assistance.

Thanks and regards,
- BotRot
 
Back
Top