Evaluating IndexedDB Performance On Web Browsers
Evaluating IndexedDB Performance On Web Browsers
Abstract— HTML5 is the latest markup language that includes Hypertext Markup Language (HTML) is the language, or
features to allow developers to do most of the production work standard, used to develop web applications. According to W3C
throughout the browsers without relying too much on third- (the World Wide Web Consortium) "HTML is the standard
party add-ons. HTML5 is always accompanied with JavaScript markup language used to create web pages and its elements form
that gives those browsers the ability to perform the program the building blocks of all websites" [7]. HTML, HTML 2.0,
logic locally. IndexedDB is a NoSQL database supported by HTML +, HTML 3.0, HTML 4, and HTML 5 are all versions of
HTML5 that is capable of storing JSON objects. In this paper, HTML. However, the first version of HTML that is used as a
we conducted a comparative analysis of IndexedDB performance standard was HTML4 and hence HTML5. HTML5 comprises a
on four renowned browsers, these are namely: Google Chrome,
set of new features such as: (1) native support for audio and
Mozilla Firefox, Internet Explorer, and Opera. IndexedDB
video playback, which enables audio and video to be played by
operations are explored in each browser and a statistical analysis
is conducted to compare the performance of these operations on the browser itself without the need to install additional plugins,
each browser. Results show the lead for Internet Explorer with (2) file management and local storage, (3) client-side databases
an overall performance of 96.43%, followed by Mozilla Firefox and offline caching, (4) geolocation features, and (5) it adds
with an overall performance of 64.29%, then Opera with an some new semantic tags to give meaning to building blocks of
overall performance of 57.14%, and finally Google Chrome with documents rather than concentrating on the design and
32.14%. representation [8].
Along with HTML, JavaScript is always present. JavaScript
accompanies HTML development of webpages to make them
Keywords—IndexedDB; HTML5; Webpage Local Storage; dynamic. JavaScript is classified as a Dynamic Language, e.g.
Database Performance Analysis; Browser Databases; Client-Side runtime code generation and dynamic object behavior [9], that
Database gives developers the freedom to write code without any type
information or typing disciplines [10]. JavaScript is used in
I. INTRODUCTION several application areas in web applications such as: (1)
tracking statistics, (2) interface enhancements, and (3) social
Rich Internet Applications (RIAs) are of a great demand to integration [11]. In its basic form, HTML does not have the
users due to the diversity of functionality they provide [1]. computational power to do arithmetic and logic, it also does not
Along with cloud computing and mobile applications, it became have the ability to access disk files, interpret user inputs, and
ubiquitous to Internet users [2]. The term Rich Internet access databases. JavaScript is used along HTML to provide it
Applications was first introduced by Macromedia [3]. An RIA with the necessary power to do different types of operations and
transfers processing from being full-dependent on the server and perform a wide range of tasks.
specifies some parts of the web application to run on the client
machine by means of the browser [4]. Offline web client Because of the widespread of JavaScript and its popularity, it
(application) is a type of RIA, it supports users' operations started to gain attention in the research field, especially in the
without the need for the user to be connected to the Internet [5]. areas of security, correctness, and performance [12]. In this
Offline web client (applications) leads us to the term paper, our main concern is the performance analysis of
Intermittently-Connected Web Applications (ICWA). An ICWA accessing browser databases, IndexedDB specifically.
is a web application that reads and modifies data and keeps on
IndexedDB is the database equipped with HTML5 and
functioning even though there is no connection to the Internet
supported by some browsers. It is a low-level API that allows
[6].
client-side storage of data. IndexedDB is a W3C
recommendation, it performs data storage based on the key-
489
2017 8th International Conference on Information Technology (ICIT)
One of the advantages of using JSON rather than XML, is perform the CRUD (Create, Read, Update, and Delete)
that JSON is a text (string) representation that can be read by operations [29].
any programming language and parsed easily, while in the case
NoSQL has different data models:
of XML, there must be a parser to interpret XML.
Figure 2 shows a JSON example, in which three book 1) Key-Value Store: data is organized in objects, each has a
objects, each contains some data about a certain book, and all of unique key that identifies the record in the store. Key-Value is
them are contained in the JSON object called books. The three the simplest implementation amongst other types of NoSQL data
objects form an array; they are enclosed between opening and models [30].
closing square brackets ([ and ]) to denote the start and end of 2) Document-Oriented Storage: similar to or based on the
the array, while objects themselves are enclosed between key-value store, in which a document is a key-value collection
opening and closing curly braces ({ and }). The name of the of attributes and values. Each document has a unique key that
array in our example is books. identifies the whole document [31, 30].
{"books":[ 3) Graph Databases: store labelled nodes and edges to
{"title":"bk1","author":"at1","year":2016}, incorporate relationships between them [31]. Data that can be
{"title":"bk2","author":"at2","year":2013}, stored in this type may include maps, computer networks and
{"title":"bk3","author":"at2","year":2002} social networks [30, 32].
]} 4) Column Family Databases: they can be considered a
Fig. 2. JSON object example. database schema [31]. These are a mix between the key-value
stores and the classical relational model (row/column structure)
IV. METHODOLOGY [30].
In this paper, we compared the time required by each IndexedDB lies in the first type. It is a key-value store which
browser to execute some database operations, these are: (1) open stores objects of different structures, all of them are identified by
database, (2) create object store, (3) close database, (4) create a unique key that is used as an index to facilitate the retrieval of
record, (5) read record, (6) update record, and (7) delete record. a specific object [14]. IndexedDB uses object stores [33].
At the beginning, we generated a dataset that contains a number IndexedDB is built on a transactional database model [33].
of JSON objects. Most of the operations to be tested use the This is a powerful feature of IndexedDB. As long IndexedDB is
objects stored in the dataset. We executed each operation on the a local database that runs in the browser. Most today browsers
four browsers several number of times and recorded the time support multi-tabs; opening another instance of the database
elapsed to execute the operation. from another tab with the absence of transaction management
could cause the application to crash.
V. INDEXEDDB
IndexedDB comprises many useful features. First, it is local, Security is maintained by the same-origin policy [34]. The
i.e. it resides on the client machine; not only is it local to the same-origin policy is a security model used to protect web
client's machine, it is also local to the application itself, in the applications [35]. In this model, cookies, JavaScript, and
sense it is local to the website that created it. So, IndexedDBs recently IndexedDB from once site are not allowed to interact
created by one website are not accessible by other websites, and with each other even though they all exist in the same browser
therefore IndexedDBs created by the browser are not accessible on the same machine [36]. Databases are protected within the
to other programs even on the same machine. same-origin policy by controlling access to the same domain,
application-layer protocol, and port [34].
Another important feature of IndexedDB is that it is a
NoSQL (Not only SQL) database. The main properties of a Each browser has its own implementation of IndexedDB,
relational database are ACID (Atomicity, Concurrency, e.g. Internet Explorer uses the Extensible Storage Engine,
Isolation, and Durability), in the case of NoSQL availability and Firefox uses SQLite, and Chrome uses LevelDB [37].
scalability are of much concern, which led to the BASE IndexedDB is an object-oriented database rather than a
properties which are: Basically Available, Soft state, and relational database. Similar to the relational model where the
Eventually consistent [24, 25] (all access will return the same majority of database operations are concentrated around tables,
object if no updates are made to the object [26]). NoSQL in IndexedDB the concentration is around the object store.
databases are much concerned with availability and scalability, Object stores are created and JavaScript objects are persisted to
this demonstrates why they trade-off the ACID model for these those stores. In the store objects are referred to as records; each
properties [24, 27]. record has a key and a value (key-value pair) and records are
Unlike relational databases which has a common language of sorted according to the keys in an ascending order [34].
manipulation, namely the Structured Query Language (SQL), A key, which can be looked at as a primary key in relational
NoSQL has no common query language [28]. Each product has databases, is always associated with a value which is a JSON
its own proprietary language to access the data, basically to object that has no predefined structure. The key can be either
490
2017 8th International Conference on Information Technology (ICIT)
automatically generated in an ordered sequence, or extracted • Delete: The delete() method deletes the object whose
from the value (the JSON object) based on the key path [34, 38]. key is passed to the method as a parameter [43]. It is
In this paper, we classified the operations on IndexedDB into similar to the SQL delete statement.
Basic Operations and CRUD Operations: VI. EXPERIMENTAL RESULTS
1) Basic Operations: these are the operations that do not A. Testing Environment
directly affect the data, they affect the database itself, and they
must be executed to ensure a proper working scenario. These All tests are conducted on an Intel Core(TM) i5-3230M CPU
of 2.60 GHz and 3 MB cache with 4 cores. Memory size is 4 GB
operations include:
of RAM (2.87GB is only usable). The PC runs windows 7
• Open Database: this is the first and most essential Enterprise edition 64-bit.
operation when working with databases. It incorporates
establishing a connection to the database and returning an Datasets are generated using a Java application and saved to
instance to the database object. disk as JSON objects. Each JSON object (record) comprises a
number of fields; data in the fields are also generated randomly.
• Create Object Store: this operation is executed only once
just when opening the database for the first time. If the The browsers that have been chosen for the study are shown
database does not already exist, control moves to the in Fig. 3 each along with its version.
create object store routine to create an object store. After
the object store is created successfully, control moves
back to the open database routine to open the requested
database and return the requested database object.
• Close Database Connection: this is the last operation
called to close the database connection. The connection is
closed when all transactions are finished.
All of the previous operations are executed once; the open is
executed at the beginning of the working session with the
database, the same applies to create object store which only runs
if the database has not been created yet, and the close operation
is executed at the end of the database session. Fig. 3. Browsers in the study.
2) CRUD Operations: as mentioned earlier, there is no
Reasons of choosing these browsers are: (1) they all run on
common language, such as SQL, to support all NoSQL
PCs, (2) they are very well-known and the most used browsers
databases. Thus, each database has its own proprietary functions among Internet users, (3) they all support HTML5, (4) they all
(methods) as we will see soon. All of the following CRUD support IndexedDB, and (5) they all run under the Windows
operations are methods of the IDBObjectStore interface of operating system.
the IndexedDB API [39].
• Create: the create operation is represented by and add() Each operation is executed a sufficient number of times on
function. It creates new objects, in, i.e. add new objects, all four browsers. Each time, elapsed time is recorded, that is the
time required to execute the operation once. At the end, the
to the object store. If an object with the same key already
average elapsed time for an operation is calculated.
exists in the object store, the operation will break and an
error will be returned [40]. This operation is a counterpart
to the insert operation in SQL language.
• Read: get() method is used to read data from the object
store based on the key or index passed to the function as
a parameter [41]. The renowned select statement is the B. Results:
counterpart for this function. For simplicity, abbreviations are used as follows to denote
• Update: the SQL update statement is used to update the browsers: (1) GC: Google Chrome, (2) MF: Mozilla Firefox, (3)
values of the records. Things are different in IndexedDB IE: Internet Explorer, and (4) OP: Opera.
put() method; The same put() method can be used to Figure 4 summarizes the Open Database average times for
add new records or update existing ones in an object store different browsers showing the lead for the Opera browser.
[42].
491
2017 8th International Conference on Information Technology (ICIT)
Accordingly, IE shows the best performance over all other 2, and the fourth and weights 1. For a total of seven operations
browsers. GC has the worst performance over all in almost all experimented in this paper, the maximum score a browser can
CRUD operations. achieve is 28. We counted the number of times each browser fell
in each of the four ranks, multiplied that count by the weight of
Now, to measure the overall performance of IndexedDB on the rank, this calculates the total score of each browser. Then the
each browser, we calculated the rank for each browser in each total score is divided by 28 as shown in TABLE I.
operation. Since we have four browsers, then we only have four
ranks, the first weights 4, the second weights 3, the third weights
492
2017 8th International Conference on Information Technology (ICIT)
TABLE I. RANKING OF BROWSERS AND PERFORMANCE CALCULATION. Database. The second set of operations is the CRUD Operations
Rank Total
which include Create, Read, Update, and Delete records. Results
show the lead for Internet Explorer with an overall performance
First Second Third Fourth Score Overall
of 96.43%, followed by Mozilla Firefox with an overall
Browser (4) (3) (2) (1) (28) Performance performance of 64.29%, then Opera with an overall performance
GC 0 0 2 5 9 32.14% of 57.14%, and finally Google Chrome with 32.14%.
MF 0 5 1 1 18 64.29%
Further tests can be conducted on several other operations of
IE 6 1 0 0 27 96.43%
the IndexedDB as a future work. Also, the performance can be
OP 1 1 4 1 16 57.14% measured on different operating systems such as Linux, or on
mobile devices with different operating systems, such as
Figure 7 summarizes the overall performance of the four
Android or iOS. Another area of future work can be the
browsers, showing Internet Explorer in the lead, followed by
comparison between the performance of IndexedDB and SQLite
Mozilla Firefox, then Opera, and finally Google Chrome.
which is used in most mobile devices.
REFERENCES
[1] L. Philips, W. D. Meuter and C. D. Roover, "Poster: Tierless Programming
in JavaScript," in 2015 IEEE/ACM 37th IEEE International Conference on
Software Engineering (ICSE), 2015 .
[2] A. Al-Shaikh, H. Khattab, A. Sharieh and A. Sleit, "Resource Utilization in
Cloud Computing as an Optimization Problem," International Journal of
Advanced Computer Science and Applications (IJACSA), vol. 7, no. 6, pp.
336-342, 2016.
[3] P. Dolog and J. Stage, "Designing Interaction Spaces for Rich Internet
Applications with UML," in 7th International Conference, ICWE 2007
Como, Italy, July 16-20, 2007 Proceedings, Springer Berlin Heidelberg,
2007, pp. 358-363.
Fig. 7. Overall IndexedDB Performance on all browsers. [4] D. Woolston, "Rich Internet Applications," in Pro Ajax and the .NET 2.0
Platform, Apress, 2006, pp. 91-100.
The main observation we get from the results is that IE came [5] J. Song, G. Yu, D. Wang and T. Nie, "Offline Web Client: Approach,
Design and Implementation Based on Web System," in Web Information
in the first place due to conducting this research under the MS- Systems – WISE 2006, Springer Berlin Heidelberg, 2006, pp. 308-314.
Windows operating system environment. IE is the web browser [6] Leff, J. T. Rayfield, R. Konuru and R. Balasubramanian, "Untether:
equipped originally with MS-Windows and it is natively Middleware Components to Support Intermittently Connected Web
designed to work under that environment. The remaining Applications," in 2013 IEEE 20th International Conference on Web
browsers are cross-platform and their performance might be Services, 2013 .
platform dependent. We might obtain different results if the [7] W3C, "W3C HTML," W3C, [Online]. Available:
same research is conducted on different OS environments, https://www.w3.org/html/. [Accessed 29 April 2016.[
keeping in mind that IE works only under MS-Windows, which [8] "HTML5: A New Standard for the Web," Medical Reference Services
Quarterly, vol. 30, no. 1, pp. 50-55, 2011 .
dictates that it will not participate in any further investigations
under different platforms. [9] S. Wei and B. G. Ryder, "Taming the dynamic behavior of JavaScript," in
SPLASH '14 Proceedings of the companion publication of the 2014 ACM
Finally, we compared the results we obtained in this research SIGPLAN conference on Systems, Programming, and Applications:
Software for Humanity, 2014 .
to the ones in literature [14]. Only two browsers were
incorporated in the experiments in literature [14], these were [10] M. Pradel, P. Schuh and K. Sen, "TypeDevil: Dynamic Type Inconsistency
Analysis for JavaScript," in 2015 IEEE/ACM 37th IEEE International
namely: Mozilla Firefox and Google Chrome. The results in the Conference on Software Engineering (ICSE), 2015 .
literature showed that IndexedDB performs faster in Firefox [11] N. Nikiforakis, L. Invernizzi, A. Kapravelos, S. V. Acker, W. Joosen, C.
than Chrome [14]. This conforms to the results we obtained in Kruegel, F. Piessens and G. Vigna, "You Are What You Include: Large-
this research which also show higher performance for Firefox scale Evaluation of Remote JavaScript Inclusions," in CCS '12 Proceedings
than Chrome. Consequently, results of the two papers converge. of the 2012 ACM conference on Computer and communications security,
2012 .
VII. CONCLUSION AND FUTURE WORK [12] G. Richards, S. Lebresne, B. Burg and J. Vitek, "An Analysis of the
Dynamic Behavior of JavaScript Programs," in PLDI '10 Proceedings of
In this paper, we presented a performance analysis for the 31st ACM SIGPLAN Conference on Programming Language Design
IndexedDB on four browsers: Google Chrome, Mozilla Firefox, and Implementation, 2010 .
Internet Explorer and Opera. Seven operations were tested that [13] W3C, "Indexed Database API," W3C, [Online]. Available:
are classified into two sets of operations: Basic Operations https://www.w3.org/TR/IndexedDB/. [Accessed 29 April 2016.[
which include Open Database, Create Object Store, and Close
493
2017 8th International Conference on Information Technology (ICIT)
[14] S. Kimak and J. Ellman, "Performance Testing and Comparison of Client [34] Mozilla Developer Network and individual contributors, "Basic concepts -
Side Databases Versus Server Side," in 14th Annual Post-Graduate Web APIs | MDN," [Online]. Available: https://developer.mozilla.org/en-
Symposium on the Convergence of the Telecommunications, Networking US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB.
and Broadcasting (PGnet 2013), 2013 . [Accessed 29 April 2016].
[15] Intermec, "Does HTML5 Make Sense for Mobile Enterprise [35] H. Lampesberger, "Technologies for Web and cloud service interaction: a
Applications?," Honeywell International Inc., 2013. survey," Service Oriented Computing and Applications, pp. 1-40, 2015 .
[16] Z. Tahir, T. Inamoto, Y. Higami and S. Kobayashi, "The Analysis of [36] C. Jackson, A. Bortz, D. Boneh and J. C. Mitchell, "Protecting browser
Automated HTML5 Offline Services (AHOS)," in 2015 International state from web privacy attacks," in WWW '06 Proceedings of the 15th
Conference on Intelligent Informatics and BioMedical Sciences international conference on World Wide Web, Edinburgh, Scotland, 2006 .
(ICIIBMS), 2015 . [37] R. Shaw and P. Golden, "Taking entity reconciliation offline," Proceedings
[17] H. Al-Hasan, M. Qatawneh, A. Sleit and W. Almobaideen, "EAPHRN: of the American Society for Information Science and Technology, vol. 50,
Energy-Aware PEGASIS-Based Hierarchal Routing Protocol for Wireless no. 1, pp. 1-4, 2014 .
Sensor Networks," Journal of American Science, vol. 7, no. 8, pp. 753-758, [38] V. Kumar, "Local Data Access: I: IndexedDB," in Beginning Windows 8
2011 . Data Development, Apress, 2013, pp. 35-60.
[18] H. P. D. Purnamasari and N. Syifana, "Clickable and interactive video [39] Mozilla Developer Network and individual contributors, "IDBObjectStore
system using HTML5," in The International Conference on Information - Web APIs | MDN," Mozilla, 11 March 2016. [Online]. Available:
Networking 2014 (ICOIN2014), 2014 . https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore.
[19] C. Bouras, A. Papazois and N. Stasinos, "A Framework for Cross-Platform [Accessed 29 April 2016].
Mobile Web Applications Using HTML5," in 2014 2nd International [40] Mozilla Developer Network and individual contributors,
Conference on Future Internet of Things and Cloud (FiCloud), 2014 . "IDBObjectStore.add() - Web APIs | MDN," Mozilla, 11 March 2016.
[20] Sharieh, M. Qatawneh, W. Almobaideen and A. Sleit, "Hex-Cell: [Online]. Available: https://developer.mozilla.org/en-
modeling, topological properties and routing algorithm," European Journal US/docs/Web/API/IDBObjectStore/add. [Accessed 29 April 2016].
of Scientific Research, vol. 22, no. 2, pp. 457-468, 2008 . [41] Mozilla Developer Network and individual contributors,
[21] M. Taguinod, A. Doup, Z. Zhao and G.-J. Ahn, "Toward a Moving Target "IDBObjectStore.get() - Web APIs | MDN," Mozilla, 16 March 2016.
Defense for Web Applications," in 2015 IEEE 16th International [Online]. Available: https://developer.mozilla.org/en-
Conference on Information Reuse and Integration (IRI), San Francisco, US/docs/Web/API/IDBObjectStore/get. [Accessed 29 April 2016].
CA, USA, 2015 . [42] Mozilla Developer Network and individual contributors,
[22] G. Wang, "Improving Data Transmission in Web Applications via the "IDBObjectStore.put() - Web APIs | MDN," Mozilla, 16 March 2016.
Translation between XML and JSON," in CMC, 2011, Communications [Online]. Available: https://developer.mozilla.org/en-
and Mobile Computing, International Conference on, 2011 . US/docs/Web/API/IDBObjectStore/put. [Accessed 29 April 2016].
[23] K. Kumamoto, T. Amagasa and H. Kitagawa, "A System for Querying [43] Mozilla Developer Network and individual contributors,
RDF Data Using LINQ," in 2015 18th International Conference on "IDBObjectStore.delete() - Web APIs | MDN," Mozilla, 16 March 2016.
Network-Based Information Systems (NBiS), 2015 . [Online]. Available: https://developer.mozilla.org/en-
[24] J. R. Lourenço, B. Cabral, P. Carreiro, M. Vieira and J. Bernardino, US/docs/Web/API/IDBObjectStore/delete. [Accessed 29 April 2016].
"Choosing the right NoSQL database for the job: a quality attribute
evaluation," Journal of Big Data, vol. 2, no. 18, pp. 1-26, 2015 .
[25] A. Sleit, S. Abusharkh, R. Etoom and Y. Khero, "An enhanced semi-blind
DWT–SVD-based watermarking technique for digital images," The
Imaging Science Journal, vol. 60, no. 1, pp. 29-38, 2012 .
[26] S. Sakr, "Cloud-hosted databases: technologies, challenges and
opportunities," Cluster Computing, vol. 17, no. 2, pp. 487-502, 2014 .
[27] R. Catt, "Scalable SQL and NoSQL data stores," ACM SIGMOD Record,
vol. 39, no. 4, pp. 12-27, 2010 .
[28] J. Rith, P. S. Lehmayr and K. Meyer-Wegener, "Speaking in tongues: SQL
access to NoSQL systems," in SAC '14 Proceedings of the 29th Annual
ACM Symposium on Applied Computing, 2014 .
[29] C.-O. Truica, A. Boicea and I. Trifan, "CRUD Operations in MongoDB,"
in 2013 International Conference on Advanced Computer Science and
Electronics Information, 2013 .
[30] Sattar, T. Lorenzen and K. Nallamaddi, "Incorporating NoSQL into a
database course," ACM Inroads, vol. 4, no. 2, pp. 50-53, 2013 .
[31] V. Guimaraes, F. Hondo, R. Almeida, H. Vera, M. Holanda, A. Araujo, M.
E. Walter and S. Lifschitz, "A study of genomic data provenance in
NoSQL document-oriented database systems," in 2015 IEEE International
Conference on Bioinformatics and Biomedicine (BIBM), 2015 .
[32] W. Almobaideen, D. Al-Khateeb, A. Sleit, M. Qatawneh, K. Qadadeh, R.
Al-Khdour and H. A. Hafeeza, "Improved Stability Based Partially Disjoint
AOMDV," Int'l J. of Communications, Network and System Sciences, vol.
6, no. 5, pp. 244-250, 2013 .
[33] S. Kimak, D. J. Ellman and D. C. Laing, "An Investigation into Possible
Attacks on HTML5 IndexedDB and their Prevention," in 13th Annual
Post-Graduate Symposium on The Convergence of Telecommunications,
Networking and Broadcasting (PGNet 2012), 2012 .
494