FCKeditor 3.x/Design and Architecture/DOM Abstraction - Revision history

Fredck at 08:58, 28 February 2008

2008-02-28T08:58:05Z

Fredck at 12:52, 20 February 2008

2008-02-20T12:52:49Z

Fredck at 12:41, 20 February 2008

2008-02-20T12:41:10Z

Fredck at 12:40, 20 February 2008

2008-02-20T12:40:36Z

Fredck at 12:34, 20 February 2008

2008-02-20T12:34:01Z

Fredck: New page: The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively". For ...

2008-02-20T12:33:30Z

New page: The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively". For ...

New page

The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".

For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element and text node. Those are the typical objects used by our application.

The following example demonstrates what we mean with DOM abstraction:
<pre>// Create and element object based on its ID. var element = new Element( "element_id" ); // Get the element name (always lowercase). element.getName(); // Get next sibling node. element.getNext(); // Set the class attribute. element.setAttribute( 'class', 'myClass' ); // Get the element document (instance of our Document class) var doc = element.getDocument(); // Set the inner HTML for the first child element of body. doc.getBody().getFirstChild().setInnerHtml('');''</pre>
== Benefits ==

* Rich and easy to use API.
* Consistency among all browsers.
* Memory leak free code.

== Performance ==

A simple test page has been created to measure the performance impact of using a simple DOM abstraction set of classes, instead of direct DOM calls.

The following are the test results (in ms) in a Pentium 4 2GHz. The first value is the DOM abstraction results, while the second is the native times:

* IE : 1051 / 541
* Firefox : 921 / 561
* Safari : 200 / 90

So we can note a performance degradation in a factor between 2 and 3 times over the native DOM.

But, we can also take in consideration that this test executes 1.000 calls to a function that does around 10 DOM specific calls. So, we have potentially 10.000 calls being executed. So, the real impact we could have by using the DOM abstraction classes is definitely inferior to the benefits we have with it.

@@ Line 3: / Line 3: @@
 The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".
-For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element and text node. Those are the typical objects used by our application.
+For each of the basic DOM objects, we'll have a dedicated class, including: window, document, element, text node and event. Those are the typical objects used by our application.
 The following example demonstrates what we mean with DOM abstraction:

@@ Line 1: / Line 1: @@
 The V3 API core code will include a rich set of classes to manipulate the DOM. Actually, all DOM interactions in the entire codebase will be done through these classes "exclusively".
@@ Line 21: / Line 23: @@
 // Set the inner HTML for the first child element of body.
 doc.getBody().getFirstChild().setInnerHtml('');</pre>
 == Benefits ==
 * Rich and easy to use API.
 * Consistency among all browsers.
-* [[FCKeditor_3.x/Design_and_Architecture/Memory_Leak|Memory leak free]] code.
+* [[FCKeditor 3.x/Design and Architecture/Memory Leak|Memory leak free]] code.
 == Performance ==
-A [[FCKeditor_3.x/Design_and_Architecture/DOM_Abstraction/TestDomAbstraction.html|simple test page]] has been created to measure the performance impact of using a simple DOM abstraction set of classes, instead of direct DOM calls.
+A [[FCKeditor 3.x/Design and Architecture/DOM Abstraction/TestDomAbstraction.html|simple test page]] has been created to measure the performance impact of using a simple DOM abstraction set of classes, instead of direct DOM calls.
 The following are the test results (in ms) in a Pentium 4 2GHz. The first value is the DOM abstraction results, while the second is the native times:

@@ Line 4: / Line 4: @@
 The following example demonstrates what we mean with DOM abstraction:
-<pre>// Create and element object based on its ID. var element = new Element( "element_id" ); // Get the element name (always lowercase). element.getName(); // Get next sibling node. element.getNext(); // Set the class attribute. element.setAttribute( 'class', 'myClass' ); // Get the element document (instance of our Document class) var doc = element.getDocument(); // Set the inner HTML for the first child element of body. doc.getBody().getFirstChild().setInnerHtml('');''</pre>
+<pre>// Create and element object based on its ID.
 == Benefits ==