5

I have a list of books and I want to store data against each book e.g. Price, Quantity, id, catergory id, size, weight etc.

I was looking at storing all this in the dom by extending the li elements representing each book in the list using data- attributes. This data could then be utilised directly with javascript.

However I have read that accessing data- attributes is slow in a performance sense. In addition I can have multiple instances of the same book so am a little concerened about bloat in the html.

An alternative would be to use a JS object to store data for each book.

So my question is what is the best practice for storing data in the frontend, DOM or Javscript?

Thanks in advance

user502014
  • 2,241
  • 5
  • 24
  • 32
  • 2
    I wouldn't use data- attributes unless the data is somehow related to the DOM nodes it's attached to. I'd go with JS object to keep data separate from presentation. – pawel Jan 13 '13 at 21:14

3 Answers3

6

The data- attributes are generally used more as a way to get data into your JavaScript (i.e. From your server-side template), and less a runtime place to store your data. A better place keep your active data is in a JavaScript object, especially if you will be accessing it or manipulating it frequently during the life of your script.

This is more in keeping with an MVC approach, where the data lives in your Model, but may be represented in your View. For this reason, some of the newer MVC frameworks like AngularJS provide automatic two-way binding between the two.

keithjgrant
  • 12,421
  • 6
  • 54
  • 88
  • 1
    I will confess though, I don't always follow my own advice here when the script is small (< 40 lines) and separation of Model and View is overkill. – keithjgrant Jan 13 '13 at 23:02
2

The choice is really dependant on your application architecture and type of functionality in your application. If you are building a single page app I found that using a well constructed json object in conjunction with a good templating plugin gives you much more flexibility in terms of functionality.

I found that indexing your data on an id in your json and then storing that id in the "data-" element gives you a nice way of reacting to browser events (clicks etc) without having to search through JSON structure. Having a JSON structure also makes it a bit easier to do operations such as sorting lists and other global operations that you might want to do without having to rebuild your data from DOM. This method is also better when you work with MVC like frameworks or implement your own "observable" data structures.

On the other hand if you are working with mostly server side code and have only basic functionality in your page that utilizes your "data-" data (such as display book details on click or something simple like that), it is probably simpler to just use the "data-" attribute to store additional details.

Michal
  • 13,439
  • 3
  • 35
  • 33
1

The difference between storing that in the DOM elements and keeping data as JavaScript objects is that in the first case you have the data and the DOM element directly related, while in the second case you need to somehow keep similar data and DOM structures in order to keep the data related to the DOM. The second case is, as it sounds, more error prone, because you have to make sure that every change in the DOM is reflected in the data (adding/removing/modifying elements) and every change in the data is reflected in the DOM (adding/removing/modifying data members).

In the case of data-* attributes data is directly accessed from the DOM so the two are already tied together and is, at least in my opinion, a much better practice. However, as mentioned in comments, there is a DOM retrieval overhead which comes with data-* attributes.

In terms of performance both require the data to be stored in memory, be it as DOM element attributes or as JavaScript objects. Retrieving a DOM element attribute is actually more expensive but it's more convenient. Rendering is not affected by data-* attributes as they do not have any functional meaning.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
  • 2
    -1. `data-*` attributes absolutely incur a massive performance overhead. Rule number one of web development: **DOM manipulation is slow.** Using the DOM to store and access data is [up to **30 times** slower](http://calendar.perfplanet.com/2012/efficient-html5-data-attributes/) than storing data in native JS objects. – josh3736 Jan 13 '13 at 21:35
  • @josh3736 My answer was related to getAttribute/setAttribute or jQuery attr more so than to HTML5 dataset retrieval. Yes it is slower as provided by your example but not as bad as dataset. – Konstantin Dinev Jan 13 '13 at 21:45
  • `getAttribute` is the yellow bar on the performance graphs, which is still at least an order of magnitude slower than a native option. In addition, the perf tests I linked to completely miss the cost of DOM element retrieval, which is also extremely expensive. – josh3736 Jan 13 '13 at 22:04
  • @josh3736 You're bringing some good points. I have reworked my answer accordingly. – Konstantin Dinev Jan 14 '13 at 07:19