Results 1 to 9 of 9

Thread: Browser freeze when manipulating the dom?

  1. #1
    Join Date
    Jul 2007

    Question Browser freeze when manipulating the dom?

    Hola all,
    I'm rather new to javascript and client side stuff in general so my apologies if this has been asked and answered a million times before (I did try a search here and on google).

    Basically I've got a form on which a user can either fill out everything or they can select from some stored forms that they have previously saved. If they select a stored form I iterate through the input fields in the existing form and remove them using parentelement.removeChild(this) and then add the new fields in. This works fine when the user's saved form only contains a handful of items (< 10) but when it contains 10+ items the browser freezes for 10 seconds as it adds the fields to the form. I tried adding a little loading gif while the form is being loaded but that freezes too.

    My general and sadly not specific question is: Is there a way to do this more efficiently? E.g., clone the existing form, operate on the clone and then replace the existing form with the now modified clone? (I'm not even sure that would provide any benefit and I'd try it out to test it but I'm not quite certain how that would work).

    Any insight is greatly appreciated.

  2. #2
    Join Date
    Sep 2006
    Copenhagen, Denmark
    Everytime you make (visible) changes to the DOM the browser has to re-render the page. It shouldn't be a problem though in your case - I have never run into performance problems like that unless manipulating a huge amount of nodes. Are you sure the your code for iterating is working as it should...the problem might lie in a loop not properly consrtucted...just a guess
    #define question (2B || !2B)
    HTMLElement and W3C Event Handling in IE
    My JavaScript Library

    Don't PM me about answers to questions. If I don't reply in a thread it's because:
    • You didn't read the message posting guidelines
    • Your code is too unstructured and/or formatted poorly - correcting it is too time consuming
    • I simply don't know the answer

  3. #3
    Join Date
    Jul 2007
    Thanks much - I appreciate the input. I don't *think* the issue lies in a poorly constructed loop; unfortunately I'm modifying an existing internal app and the modification of the dom that is slowing everything done is handled by code that came into existence prior to my tenure on the project. Basically what it is doing is using Prototype.js to serialize a form and then it takes that and deserializes it, iterating over the elements and replacing/attaching them to the dom. This looks to be what is consuming the vast majority of the time in the action.

    Sadly I know it isn't much to go on when providing guidance, I'm trying to dig through the code that handles this now but being a non js expert it'll take me awhile to actually notice if something is being handled in a less then efficient manner (I'd copy and paste but i'm at home).

    Is it possible to clone the form I'm trying to replace, modify the clone object and replace the existing form wholesale? Would that even provide any sort of performance benefit?

  4. #4
    Join Date
    Feb 2006
    It is more efficient to write a new value to a form element's value attribute than to remove/ replace childNodes using the DOM. But 10 replaceChilds should not cause a noticable delay- something else is going on.

    Are you using the childNode length attribute as a loop limit while you change the length by adding/deleting nodes?
    Last edited by mrhoo; 07-18-2007 at 03:18 PM.

  5. #5
    Join Date
    Sep 2006
    Copenhagen, Denmark
    I don't know about the perfomance of cloning. What you can do is build your new form without appending the elements until the form is complete.

    Create element 1
    Create element 2
    Create element n

    Append elements to the form and finally append the form to the document. Then the browser only has to re-render once.
    #define question (2B || !2B)
    HTMLElement and W3C Event Handling in IE
    My JavaScript Library

    Don't PM me about answers to questions. If I don't reply in a thread it's because:
    • You didn't read the message posting guidelines
    • Your code is too unstructured and/or formatted poorly - correcting it is too time consuming
    • I simply don't know the answer

  6. #6
    Join Date
    Jul 2007
    @mrhoo - I'll have to check that in the morning, I don't recall anything like that being done

    @Dok, I was thinking of something like that but it just seems so darned frustrating that something so trivial should be freezing the whole browser - replacing 25 odd dom elements doesn't seem like it should lock up the browser for 20 odd seconds (or whatever the exact time period was).

    I'll have to dig in to the existing code tomorrow and post back with some more questions...

  7. #7
    Join Date
    Jul 2007
    just realize as I was about to crash that it might be helpful to add some more context information.

    The form that is getting serialized can have a dynamic number of fields. Basically, users can add additional search constraints by clicking a button. The sticky wicket in the deserialization method written by my predecessors was dealing with the dynamic form elements. I'm not sure that provides anything useful towards fix suggestions but hey, it might clue someone in! (because it certainly hasn't clued me in ).

  8. #8
    Join Date
    Jul 2007
    well, still haven't yet found the spot causing the slow down, but i thought it was interesting to note that it's actually quicker to set a bunch of break points in the firebug debugger and then just "play" through all of them then it is to just let the script load all the elements out right.

    Is there any reason why this would be the case? Some sort of timing sensitivity in the script somewhere?

  9. #9
    Join Date
    Feb 2003
    Michigan, USA

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.15217 seconds
  • Memory Usage 2,925KB
  • Queries Executed 13 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (9)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (9)postbit
  • (9)postbit_onlinestatus
  • (9)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates