/    Sign up×
Community /Pin to ProfileBookmark

SPA site – adding and removing elements vs show and hide

Copy linkTweet thisAlerts:
Nov 09.2015

I’m developing a single page app using jQuery, jQuery-ui (specifically the widget factory), and Handlebars. All markup is appended (including Home).

There are going to be enough pages to question whether the DOM can grow too big and effect performance.

Scenario: User navigates to page “Forms” from “Home”.

[LIST]

  • [*]

    “Home” is a common page so I keep it on the DOM when navigated away from


  • [*]

    “Forms”, which I attach a widget to after created from a template, is not a commonly visited page so I remove the page from the DOM when navigated away from

    [LIST]

  • [*]

    Are there any downsides to continuously adding and removing pages, with widgets being attached every time the page is added, to the DOM?


  • [*]

    Is there a way to capture and cache a page along with it’s widget so that re-appending the page doesn’t require re-creating the widget over and over?


  • [*]

    Is adding widgets such a small demand that it isn’t even an issue?


    • [/LIST]
    [/LIST]

    Hope that was clear enough for everyone

    Thanks for any advice

    to post a comment
    JavaScript

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @xelawhoNov 09.2015 — I guess the first question would be how big would the dom be if you hard coded the html? The browser parses html pretty quickly/efficiently (that's its job after all) whereas repainting the dom to add and remove elements can be an expensive process in terms of processing power.

    But as you say, if all we're talking about is a few kb it's irrelevant. You can do some speed tests to get an idea - without the actual code in question it would be hard to give you a more specific answer
    Copy linkTweet thisAlerts:
    @jsbensonauthorNov 09.2015 — I guess the first question would be how big would the dom be if you hard coded the html? The browser parses html pretty quickly/efficiently (that's its job after all) whereas repainting the dom to add and remove elements can be an expensive process in terms of processing power.

    But as you say, if all we're talking about is a few kb it's irrelevant. You can do some speed tests to get an idea - without the actual code in question it would be hard to give you a more specific answer[/QUOTE]

    Yeah, the pages themselves aren't big at all, but many of them will be for business functionality and will be used exclusively as ajax CRUD pages.

    I'm only a little way into development. I got to the point early on where I could see my code got too big to manage without a framework, so I'm currently migrating it over to a losely coupled MVC pattern and moving all my scripted DOMs to Handlebars templates.

    I didn't realize the DOM repainted itself when injecting elements or data via ajax. I've built some pages with Datatables and Jeditable (along with my own datatable management classes) and I haven't seen any performance issues with adding and removing many of the table's rows and asynchronous data. I just added some logic that will allow me to mark pages as "removable" or not upon instantiating. This should allow me to run some benchmarks.

    I just didn't know in-general if there was any big gotcha's with adding and removing pages compared to hiding them after load with the ability to show them again.
    Copy linkTweet thisAlerts:
    @xelawhoNov 09.2015 — The only gotcha really has to do with appending content in a loop. Browsers have got better at this now, but it still makes sense to, for example, append everything to a div then append the div to the dom once the loop has finished rather than append on every iteration, which may cause a repaint each time.

    Same if you're using innerHTML - create an empty string, add to the string inside the loop and set the target element's innerHTML once the loop has run instead of setting it on each iteration (which can trigger multiple repaints as well)
    Copy linkTweet thisAlerts:
    @jsbensonauthorNov 09.2015 — The only gotcha really has to do with appending content in a loop. Browsers have got better at this now, but it still makes sense to, for example, append everything to a div then append the div to the dom once the loop has finished rather than append on every iteration, which may cause a repaint each time.

    Same if you're using innerHTML - create an empty string, add to the string inside the loop and set the target element's innerHTML once the loop has run instead of setting it on each iteration (which can trigger multiple repaints as well)[/QUOTE]


    Good to know.

    Thanks
    ×

    Success!

    Help @jsbenson spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...