Web Dev Streaks Day- 45 (Milestone 7: Browser & Debug
Module 37: How Javascript and Browser Works
1. How The Browser Works
Search google with these keywords and read some articles or watch a video or two to have some clear ideas behind it. Basically know that all of the websites have a unique domain address. When you go to that address that translates to a specific IP address using DNS Lookup. Thus the browser communicates to the right dedicated server for the specific website and fetches the data and displays it for you.
2. DOM, CSSOM & Render Tree
When a web page is loaded, the browser creates a Document Object Model of the page. Which is rendered and displayed in the next phases.
HTML DOM Tree: The HTML markup defines relationships between different tags (some tags are contained within other tags) the created objects are linked in a tree data structure that also captures the parent-child relationships defined in the original markup: the HTML object is a parent of the body object, the body is a parent of the paragraph object, and so on.
Every time the browser processes HTML markup, it goes through all of the steps above: convert bytes to characters, identify tokens, convert tokens to nodes, and build the DOM tree.
CSSOM Tree: As with HTML, we need to convert the received CSS rules into something that the browser can understand and work with. Hence, we repeat the HTML process, but for CSS instead of HTML:
The CSS bytes are converted into characters, then tokens, then nodes, and finally they are linked into a tree structure known as the “CSS Object Model” (CSSOM):
Render tree: The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the painting process that renders the pixels to the screen. Optimizing each of these steps is critical to achieving optimal rendering performance.
3. JavaScript Engine V8 Internal Mechanism
V8 is the name of the JavaScript engine that powers Google Chrome. It’s the thing that takes our JavaScript and executes it while browsing with Chrome. V8 provides the runtime environment in which JavaScript executes. The DOM and the other Web Platform APIs are provided by the browser. It is written in C++, and it’s continuously improved. It is portable and runs on Mac, Windows, Linux, and several other systems.
JavaScript is internally compiled by V8 with just-in-time (JIT) compilation to speed up the execution.
4. setTimeout simple Asynchronous JS using
The setTimeout() method calls a function after a number of milliseconds (1 second = 1000 milliseconds). The setTimeout() is executed only once.
setTimeout(function, milliseconds, param1, param2, …)
If you need repeated executions, use setInterval() [explained in 6] instead. Use the clearTimeout() method to prevent the function from starting. To clear a timeout, use the id returned from setTimeout():
myTimeout = setTimeout(function, milliseconds);
Then you can to stop the execution by calling clearTimeout():
clearTimeout(myTimeout);
5. Recognize fetch as an Asynchronous activity
You have used fetch() lots of times in the previous tasks. Like setTimeout(), fetch() also works asynchronously. If you write a program where fetch() is used in the middle, whenever the program will run it will not wait for the fetch() to be completed at once. Try it with an html file.
Rather it will execute the next lines and when the fetching will be completed the response will be shown afterward.
6. setInterval and clearInterval with x++ and ++x
The setInterval() method calls a function at specified intervals (in milliseconds). The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.
setInterval(function, milliseconds, param1, param2, …)
and using the variable increment (++x [preincrement] / x++ [postincrement]) you can keep track of the interval as you like.
7. (Advanced) JavaScript event loop and concurrency
The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, gives us the illusion of multi-threading.
For having a better understanding please have a look at this video,
and also peek through this article.
8. Integrate Chrome devtool Console with VS Code
As long as you are running a js file in the VS Code, It is fine because it will be executed. But whenever you will be connecting that js file with any HTML file and if that contains any statements like fetch() that will give you trouble. In that case, you have to shift to the browser console to observe the states of the file.
However, you can do the same in the VS Code too. Just click on the run and debug button on the left panel and the HTML file will be loaded in the browser. Now, you can click on the Debug Consol tab in the bottom window. What do you see?? Same as the browser console. Right? That is how you use it.
You can even add some breakpoints in the code and further proceed by pressing ‘F11’.
9. HTTP & HTTPS
The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load web pages using hypertext links.
HTTP is an application layer protocol designed to transfer information between networked devices and runs on top of other layers of the network protocol stack. A typical flow over HTTP involves a client machine making a request to a server, which then sends a response message.
Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure communication over a computer network, and is widely used on the Internet. In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS) or, formerly, Secure Sockets Layer (SSL). The protocol is therefore also referred to as HTTP over TLS, or HTTP over SSL.
