4

Sometimes I'd like to put a decent amount of data on the page to avoid extra AJAX calls for dynamic content. I wonder while doing so if there is a performance penalty I should be cautious of.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
idbentley
  • 4,188
  • 3
  • 34
  • 50
  • Yeah, your page will be larger, taking longer to load. At least using AJAX will allow for using things like spin.js to keep the user from thinking the page isn't loading at all. – Stephen May 03 '13 at 22:09
  • Neat. So, there isn't a hard limit in html5. That's certainly a partial answer, but doesn't address the performance impact portion of the question. – idbentley May 03 '13 at 22:10
  • @Stephen That's true, but again, how much is too much. Adding a few kilobytes to a page probably won't affect page load time enough to matter, I would have thought. I was more interested in performance effects once the page had been loaded. – idbentley May 03 '13 at 22:11
  • http://browsercookielimits.x64.me/ – mike clagg May 03 '13 at 22:16
  • @mikeclagg html5 data attributes don't store in cookies, do they? – idbentley May 03 '13 at 22:17

2 Answers2

6

The HTML5 spec has no limit on the amount of data in an attribute :

...no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, text nodes, etc.

The time it takes to render a page is dependant on the length of the content, and as such any added content, like a lot of data stored in attributes will cause the page to load slower. Getting the data with javascripts getAttribute() will probably also be slower if the data is massive.

With ajax or/and a serverside storage solution, you could retrieve the data as needed, making it a lot faster in many cases than storing everything in the HTML.

How much is too much? That depends on what you're doing with the data, what kind of data etc. and is almost impossible to answer. You as a developer will have to decide that based on the use case etc.

adeneo
  • 312,895
  • 29
  • 395
  • 388
0

A clear answer: it depends ;) It depends mainly on how much data, you put on the page. You have to do the equation of initial pageload of a data-packed page vs. initial loading + another server-roundtrip. Sometimes it is better -perhaps for a better userexperience- to deliver some kind of basic/partial page fast, and load additional content afterwards, when needed (cf. lazy loading).

Performance tests will give you the right answer.

But besides: Why storing data in the dom? It's not the best place to store client-side data. Why not using Javascript variables?

Thomas Junk
  • 5,588
  • 2
  • 30
  • 43
  • Why store data in the dom? Because the data is available at template drawing time, not at javascript compilation time. – idbentley May 03 '13 at 22:18
  • you can use hidden elements to store the data instead of attributes, which should reduce the amount of escaping and quoting you need to expend compared with attributes. If you save a dozen small requests, it's better to transfer the information all at once while the caller is on the line; it also enables better gzip compression to have a common grouping of those dozen files from which to create a token pool. with bundled info, you get SEO benefits of in-page content that ajax doesn't provide, and it's better ux on spotty connections. – dandavis May 03 '13 at 22:37