While HTML defines the structure of the document, it may also reference CSS Stylesheets to define the visual presentation of the document.
1. <link rel="stylesheet" />
2. inline <style>
Once the DOM and CSSOM are constructed, the browser can begin the next phase of the pipeline: Style. This phase is sometimes called Recalculate Style or a Render Tree Update.
A browser-internal C++ data structure that web developers don't directly modify.
It is a separate tree from the DOM but often mirrors its structure.
Each node typically references a DOM node and a Computed Style.
It's essentially composed of every DOM node that should be presented visually on the user's screen.
All the styles that applies to the element, even if there is no CSS specified for that element.
Although the Render Tree contains all the CSS declarations for widths, heights, colors, etc. for each visual element on the page, the browser has not assigned any geometry or coordinates to the elements.
The browser utilizes a computational graphics library to draw the Render Tree nodes programmatically as pixels.
The browser traverses the newly positioned Render Tree recursively, and executes instructions to draw each Render Tree node.
function functionName(parameters) {
// code to be executed
}
const x = function (a, b) {return a * b};
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
const x = function (a, b) {return a * b};
(function () {
let x = "Hello!!"; // I will invoke myself
})();
Using self-invoking functions we will perform the initialization work only once because after the execution we’ll loose the reference to the function.
(function () {
// body
}());
(function () {
// body
})();
var module = (function () {
// private
return {
// public
};
}());
Let's say we want to print from 0 to 5 by a timer. How to fix it?
https://medium.com/@samueldinesh/javascript-closures-in-2-mins-36d0f3817a0f
function
foo() {
var
x =
'Hello'
;
// local variable
function
bar() {
// local function
console.log(x);
// referring to local variable
};
return
bar;
}
var
func = foo();
// get the inner function
func();
// prints ‘Hello’
https://rahuldotout.wordpress.com/2011/05/15/professional-javascript-part-5-closures/
Closures are formed when the scope chain of an object survives outside its creation scope.
A closure gives you access to an outer function's scope from an inner function.
https://itnext.io/javascript-closure-for-privacy-8a40c274192e
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
// Initiate counter
let counter = 0;
// Function to increment counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
myFunction(5);
function myFunction(y) {
return y * y;
}
Let's move on!
Before we dive into hoisting, let's understand how does Call Stack work in JS.
When a JavaScript programme starts running, the engine creates a Global Execution Context (GEC) and pushes it onto the Call Stack.
https://medium.com/@dhr8v/understanding-javascript-call-stack-event-loop-and-asynchronous-patterns-c4a45f6c78fe
Guess the output.
var temp = 'hi';
function display() {
var temp;
console.log(temp);
temp = 'bye';
}
display();
It will work just like this way:
Guess the output.
https://medium.com/@mohdtalib.dev/scope-in-javascript-1cb380bba2a3
Tags that define the meaning of the content they contain.
https://www.azion.com/en/blog/what-is-http-caching-and-how-does-it-work
Advantages to Reusability:
The HTTP cache stores a response associated with a request and reuses the stored response for subsequent requests.
HTTP Header
1. Expires
2. cache-control
with If-None-Match
with If-Modified-Since
<script>
and onerror
on backend<
to <