From 3c33fe2611b7a002e75e1cdab66b3bd5bb4478ec Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Fri, 11 Aug 2023 00:19:59 +0530 Subject: [PATCH 01/11] creating garbage collector docs folder --- docs/Garbage Collector/Introduction.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 docs/Garbage Collector/Introduction.md diff --git a/docs/Garbage Collector/Introduction.md b/docs/Garbage Collector/Introduction.md new file mode 100644 index 00000000..e69de29b From 1934e90a9c9878b4cfaf59673af376332124916a Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 11:25:45 +0530 Subject: [PATCH 02/11] deletion of files --- docs/Garbage Collector/Introduction.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 docs/Garbage Collector/Introduction.md diff --git a/docs/Garbage Collector/Introduction.md b/docs/Garbage Collector/Introduction.md deleted file mode 100644 index e69de29b..00000000 From f51532f8e91b11d2d6c12c579c4422d269f333af Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:01:59 +0530 Subject: [PATCH 03/11] test commit --- docs/Deep Dive/DOM.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index ed694ad4..a64cb528 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -47,3 +47,6 @@ Because JavaScript can [open a new window](https://developer.mozilla.org/en-US/d under user gestures and have [access back to its opener](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener), multiple web pages across multiple tabs might be able to communicate with one another via JavaScript API such as [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). + + +# Inserting and Removing DOM Nodes \ No newline at end of file From c79f8cc3f0db3961a660faa55d431d4421160a87 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:06:09 +0530 Subject: [PATCH 04/11] adding prerequisites section --- docs/Deep Dive/DOM.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index a64cb528..b28e9cfb 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -49,4 +49,10 @@ multiple web pages across multiple tabs might be able to communicate with one an such as [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). -# Inserting and Removing DOM Nodes \ No newline at end of file +# Inserting and Removing DOM Nodes + +Document Object Model (DOM) manipulation is a crucial aspect of web development, allowing you to dynamically modify the structure and content of your web page. This documentation will guide you through the process of inserting and removing DOM nodes using JavaScript. + +### Prerequisites + +Before you start manipulating DOM nodes, you should have a basic undertanding of HTML,CSS and Javascript. \ No newline at end of file From 3fcc891436641cade711c26a552721753d53ecb8 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:12:54 +0530 Subject: [PATCH 05/11] adding insertion docs --- docs/Deep Dive/DOM.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index b28e9cfb..9d5e6940 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -55,4 +55,18 @@ Document Object Model (DOM) manipulation is a crucial aspect of web development, ### Prerequisites -Before you start manipulating DOM nodes, you should have a basic undertanding of HTML,CSS and Javascript. \ No newline at end of file +Before you start manipulating DOM nodes, you should have a basic undertanding of HTML,CSS and Javascript. + +## Inserting DOM Nodes + +`createElement` + +To insert a new DOM element, first create the element using `document.createElement` method. This method will create a new HTML element with +a specific tag name. Once the element is created, you can further modify its attributes and content. + +

Example:

+ +``` + const newElement = document.createElement('div'); + newElement.textContent = 'test text'; +``` \ No newline at end of file From 3e361f49b7692048871ca73c96dbef3bd432d712 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:14:33 +0530 Subject: [PATCH 06/11] test updation --- docs/Deep Dive/DOM.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index 9d5e6940..2b5fad4d 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -59,7 +59,7 @@ Before you start manipulating DOM nodes, you should have a basic undertanding of ## Inserting DOM Nodes -`createElement` +#### createElement To insert a new DOM element, first create the element using `document.createElement` method. This method will create a new HTML element with a specific tag name. Once the element is created, you can further modify its attributes and content. From b53b6f1b1caf47e986a55ee218c929bb712cb373 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:18:26 +0530 Subject: [PATCH 07/11] adding appendChild info --- docs/Deep Dive/DOM.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index 2b5fad4d..83611f82 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -59,7 +59,7 @@ Before you start manipulating DOM nodes, you should have a basic undertanding of ## Inserting DOM Nodes -#### createElement +### createElement To insert a new DOM element, first create the element using `document.createElement` method. This method will create a new HTML element with a specific tag name. Once the element is created, you can further modify its attributes and content. @@ -67,6 +67,18 @@ a specific tag name. Once the element is created, you can further modify its att

Example:

``` - const newElement = document.createElement('div'); - newElement.textContent = 'test text'; +const newElement = document.createElement('div'); +newElement.textContent = 'test text'; +``` + +### appendChild + +The `appendChild` method is used to add a child node to parent node. It appends the specified child node as the last child +of the parent node. + +

Example:

+ +``` +const parentElement = document.getElementById('parent'); +parentElement.appendChild(newElement); ``` \ No newline at end of file From a450bd0d0ac4d1b972fcf2ab019ca3fee0212204 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Mon, 14 Aug 2023 22:29:27 +0530 Subject: [PATCH 08/11] final updation --- docs/Deep Dive/DOM.md | 44 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index 83611f82..62bf2a4b 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -69,6 +69,7 @@ a specific tag name. Once the element is created, you can further modify its att ``` const newElement = document.createElement('div'); newElement.textContent = 'test text'; + ``` ### appendChild @@ -81,4 +82,45 @@ of the parent node. ``` const parentElement = document.getElementById('parent'); parentElement.appendChild(newElement); -``` \ No newline at end of file + +``` + +### insertBefore + +The `insertBefore` method allows you to insert a new node before an existing child node within a parent node. + +

Example:

+ +``` +const siblingElement = document.getElementById('sibling'); +parentElement.insertBefore(newElement, siblingElement); + +``` + +## Removing DOM Nodes + +### removeChild + +The `removeChild` method is used to remove a specified child node from its parent node. + +

Example:

+ +``` +parentElement.removeChild(childElement); + +``` + +### replaceChild + +The `replaceChild` method replaces an existing child node with a new node. It takes two arguments, the new node and the node to be replaced. + +

Example:

+ +``` +parentElement.replaceChild(newElement, oldElement); + +``` + +### References + * [Insertion and Removal](https://javascript.info/modifying-document) + \ No newline at end of file From 9764f72169f11f8684aace5627faf7e54fc921c4 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Tue, 15 Aug 2023 01:44:55 +0530 Subject: [PATCH 09/11] changed file --- docs/Deep Dive/DOM.md | 93 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 77 insertions(+), 16 deletions(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index 62bf2a4b..ffd1fcb6 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -53,13 +53,11 @@ such as [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/po Document Object Model (DOM) manipulation is a crucial aspect of web development, allowing you to dynamically modify the structure and content of your web page. This documentation will guide you through the process of inserting and removing DOM nodes using JavaScript. -### Prerequisites -Before you start manipulating DOM nodes, you should have a basic undertanding of HTML,CSS and Javascript. ## Inserting DOM Nodes -### createElement +### Creating New Nodes To insert a new DOM element, first create the element using `document.createElement` method. This method will create a new HTML element with a specific tag name. Once the element is created, you can further modify its attributes and content. @@ -68,11 +66,24 @@ a specific tag name. Once the element is created, you can further modify its att ``` const newElement = document.createElement('div'); -newElement.textContent = 'test text'; ``` +### Specifying Node Properties -### appendChild +Once the new node is created,you can set properties and attributes +``` +newParagraph.textContent = 'This is a new paragraph.'; +newParagraph.setAttribute('class', 'highlight'); + +``` +### Locating the Parent Node +Next, you'll need to locate the parent node where the new node will be inserted: + +``` +const parent = document.getElementById('parent'); +``` + +### Inserting New Node The `appendChild` method is used to add a child node to parent node. It appends the specified child node as the last child of the parent node. @@ -80,7 +91,6 @@ of the parent node.

Example:

``` -const parentElement = document.getElementById('parent'); parentElement.appendChild(newElement); ``` @@ -97,30 +107,81 @@ parentElement.insertBefore(newElement, siblingElement); ``` -## Removing DOM Nodes +### Updating Layout and Rendering -### removeChild +After insertion, the Webkit engine recalculates the layout and rendes the updated page.This involves reflowing the affected parts of the page to accommondate the new node. -The `removeChild` method is used to remove a specified child node from its parent node. +## Removal of Nodes -

Example:

+### Locating the Node to Remove +To remove an existing node from the DOM, locate the node using methods like `document.querySelector()`: + +``` +const nodeToRemove = document.querySelector('.remove-me'); ``` -parentElement.removeChild(childElement); + +### Removing the Node + +Remove the node using `.removeChild()` on its parent node: +``` +const parent = nodeToRemove.parentNode; +parent.removeChild(nodeToRemove); ``` -### replaceChild +### Updating Layout and Rendering -The `replaceChild` method replaces an existing child node with a new node. It takes two arguments, the new node and the node to be replaced. +Similar to insertion, removing a node triggers layout recalculations and updates in the rendering engine. -

Example:

+### Performance Considerations + +Efficient DOM manipulation is crucial for optimal user experience.Consider the following steps: + +### Batch Operations +Group multiple insertions/removals together to minimize layout recalculations: + +``` +const fragment = document.createDocumentFragment(); +//this will append nodes to the fragment +parent.appendChild(fragment); //Single layout recalculation +``` + +### Using DocumentFragment + +`DocumentFragment` helps with batch operations by allowing you to create node off-DOM before insertion: + +``` +const fragment = document.createDocumentFragment(); +// Append nodes to the fragment +parent.appendChild(fragment); // Single layout recalculation +``` + +### CSS Classes and Styling + +Apply CSS classes for styling changes instead of modifying properties individually: + +``` +newParagraph.classList.add('highlight'); ``` -parentElement.replaceChild(newElement, oldElement); + +### Debouncing and Throttling + +For performance sensitive DOM updates triggered by events, use techniques like debouncing or throttling to control frequency: +``` +function debounce(callback, delay) { + let timeoutId; + return function () { + clearTimeout(timeoutId); + timeoutId = setTimeout(callback, delay); + }; +} ``` ### References - * [Insertion and Removal](https://javascript.info/modifying-document) + * [WebKit Official Documentation](https://webkit.org/t) + *[MDN Web Docs - DOM Manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + \ No newline at end of file From 226be1157ad751c23ab5add8e22ba8f4812198d5 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Tue, 15 Aug 2023 01:46:26 +0530 Subject: [PATCH 10/11] reference fix: --- docs/Deep Dive/DOM.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Deep Dive/DOM.md b/docs/Deep Dive/DOM.md index ffd1fcb6..c945a1c7 100644 --- a/docs/Deep Dive/DOM.md +++ b/docs/Deep Dive/DOM.md @@ -182,6 +182,6 @@ function debounce(callback, delay) { ### References * [WebKit Official Documentation](https://webkit.org/t) - *[MDN Web Docs - DOM Manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + * [MDN Web Docs - DOM Manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) \ No newline at end of file From 9570a546c15fccfd30f544d0741efd3939f536d4 Mon Sep 17 00:00:00 2001 From: "Ronin@73" Date: Wed, 25 Oct 2023 15:42:01 +0530 Subject: [PATCH 11/11] wrote Garbage collection docs --- docs/Deep Dive/JSC/GarbageCollection.md | 38 +++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 docs/Deep Dive/JSC/GarbageCollection.md diff --git a/docs/Deep Dive/JSC/GarbageCollection.md b/docs/Deep Dive/JSC/GarbageCollection.md new file mode 100644 index 00000000..a3ba90bc --- /dev/null +++ b/docs/Deep Dive/JSC/GarbageCollection.md @@ -0,0 +1,38 @@ +# Garbage Collection + +The JavaScriptCore Garbage Collector (JSC GC) in WebKit utilizes the [Riptide algorithm](https://webkit.org/blog/7122/introducing-riptide-webkits-retreating-wavefront-concurrent-garbage-collector/), an advanced and efficient memory management technique. Riptide is designed to manage memory for JavaScript objects in a way that minimizes interruptions to the running JavaScript code, improving the performance of web applications. This algorithm employs a combination of generational and concurrent garbage collection strategies, where objects are classified into different generations based on their age and usage patterns. Riptide optimizes the collection process by prioritizing younger objects for faster cleanup and concurrently collecting older objects, thereby reducing the time spent on garbage collection, enhancing the overall responsiveness and reliability of web applications. The Riptide algorithm is a critical component of WebKit's memory management system, ensuring that JavaScript code runs smoothly while efficiently managing memory resources. + +## JavaScriptCore GC and C++ DOM Nodes + +The JSC GC does not do any reference counting. However, on the WebCore side, DOM nodes are ref counted.To manage the lifetimes of C++ DOM nodes, a reference counting mechanism is employed.When a C++ DOM node is created, its reference count is set to 1.When an external object or JavaScript code references a DOM node, its reference count is increased.When a reference is no longer needed, the reference count is decreased. When the reference count drops to 0, the DOM node is destroyed, freeing its associated memory. + +The interplay between C++ DOM nodes and GC cells (used for JavaScript objects) arises from the potential for JavaScript objects to hold references to C++ DOM nodes. This interplay can create complex scenarios, such as: + +### 1. JavaScript Objects Referencing DOM Nodes: + + When a JavaScript object holds a reference to a DOM node, it effectively prevents the DOM node from being destroyed as long as the JavaScript object is in scope. This can lead to memory leaks if not managed correctly. + + + + // JavaScript object referencing a DOM node + let button = document.getElementById('myButton'); + let jsObject = { element: button }; + + + + +### 2. DOM Nodes Releasing JavaScript Objects: + +The opposite situation is also possible. When a C++ DOM node is released by reference counting, it may result in JavaScript objects holding references to "dead" DOM nodes. Accessing these DOM nodes from JavaScript can lead to undefined behavior. + + +## JSC Debugging tools for the Garbage Collector + +### 1. The GC Verifier: + +enabled using the JSC_verifyGC and JSC_verboseVerifyGC options. This tool runs a normal GC cycle, and then stops the world and run an simple stupid full GC cycle for verification. And then the verifier compares the results of the 2 runs. Any live cells found by the GC Verifier must also be found live by the normal GC. OTOH, cells found live by the normal GC may be conservative, and is not actually live as seen by the GC Verifier. This tool is a turn key solution that documents found issues for the user to diagnose. + + +### 2. The Heap Verifier: + + enabled using the JSC_verifyHeap option. It implements hooks into the beginning and end of GC cycles, and performs custom analysis on the live cells found. The user can enhance and tweak the Heap Verifier to detect various forms of corruption or patterns in cells in the cell graph. The user can also use the Heap Verifier to detect which GC cycle a cell was born and died in for debugging liveness issues. This tool is NOT a turn key solution. It requires the user to know what they are looking for and building on the Heap Verifier as infrastructure / framework for debugging an issue.