SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Temporarily disabling screen redraw in IE?

    I'm generating a very complicated page containing hundreds (perhaps even thousands sometimes) of text input fields which share some common attributes (i.e. size, maxlength, CSS class, etc.), and the document footprint is quite significant.

    Therefore, to reduce the bulk of the HTML sourcecode I am only specifying the CSS class of each input element as I generate it, then using client-side JavaScript (once the page has loaded) to loop through the DOM, find elements with that CSS class, and the apply the common properties dynamically.

    This is up and running and has reduced the document footprint significantly, but unfortunately this post-processing is rather slow, adding about 3 seconds to the page rendering time (on a fast PC). Having experimented with the attributes I'm setting dynamically, it seems that the cause of the slowdown is that IE is trying to re-render each element as it changes, which is what one would expect, but is rather inefficient.

    Instead, I would like to somehow disable page rendering before the loop, and then re-enable it afterwards. Anyone know how to do this, if it's possible at all? And it only needs to work in IE5+, not anything else...

    Answers on the back of a postcard to the usual address!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think there's any output-control-like mechanisms, even in IE's overstuffed DOM. This will be a DOM solution, however, if it exists. So, you'd better start crawling MSDN if you expect to find it -- but I'd be really surprised if you do.

    I'm curious if removing two attributes from each element is really more efficient than doing all this client-side. At a minimum, for each element, you're removing

    size="n" maxlength="n"

    And at most

    size="nn" maxlength="nnn"

    So, 22-25 characters, or, 22-25k for a 1000-element page. Barely 5 seconds on a 56k and negligble on any broadband connection. Since elements (any element) with hard-coded attributes will render faster than anything dynamic, my untested opinion is that the non-javascript way is better.

    Let me know what you think.

    Also, show me your JS, maybe I can speed it up.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    I don't think there's any output-control-like mechanisms, even in IE's overstuffed DOM. This will be a DOM solution, however, if it exists. So, you'd better start crawling MSDN if you expect to find it -- but I'd be really surprised if you do.

    I'm curious if removing two attributes from each element is really more efficient than doing all this client-side. At a minimum, for each element, you're removing

    size="n" maxlength="n"

    And at most

    size="nn" maxlength="nnn"

    So, 22-25 characters, or, 22-25k for a 1000-element page. Barely 5 seconds on a 56k and negligble on any broadband connection. Since elements (any element) with hard-coded attributes will render faster than anything dynamic, my untested opinion is that the non-javascript way is better.

    Let me know what you think.

    Also, show me your JS, maybe I can speed it up.
    I already reverted to hardcoded values a few days ago because I got fed up with the slow page rendering! However, since I'm actually shaving 69 characters from every INPUT element by applying the attributes dynamically, then the page bloat has gone back up again. It would be great to have the best of both worlds, but it's not really a priority since as you say the difference on broadband/local network connections is negligible, it would just be a "nice to have".

    The code I'm using is simply this:
    Code:
    var el, els = document.getElementsByTagName("input");
    for (var n = 0; n < els.length; n++)
    {
    	el = els[n];
    	
    	if (el.className == 'InputQuantity') 
    	{
    		el.size = 3;
    		el.maxLength = 5;
    		el.autocomplete = 'off';
    		el.validatepattern = '[0-9]';
    	}
    }
    I'd like to find a workaround anyway, because of an experimental script I've been working on, but I don't have the time to elaborate at present... just about to leave the office to grab my flight back to the UK!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about putting the whole page into a div, hiding the div ("display: none" or whatever) THEN do your javascript update of all and sundry, then reveal the div again. The browser thus gets to do all its reflow in one big hit, rather than attempting to do it piecemeal in between your JS.

    Not what you asked for, but it might speed things up.

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great idea, blufive. Wouldn't need to be a div either -- maybe a fieldset in the form or the entire form itself. Or a div =)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Great idea, blufive. Wouldn't need to be a div either -- maybe a fieldset in the form or the entire form itself. Or a div =)
    Yup, sounds like a plan... I'll give it a shot tomorrow if I get time.

    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    M@rco, you need to hook yourself up with a Xmas Avatar, that red-cross is getting stale

    Let us know how it goes
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •