10 minutes to get your JavaScript to the pinnacle

Javascipt is called the soul of the front, unable to use it flexibly, your front end is just a walk of dead meat. Most beginners can go through the div+css, and then fell in the JS embrace, immediately crossed this off, but also only use, its underlying principle is not known. Small series This takes everyone from the bottom of the principle of speaking, I believe that after reading this article, you will have a deeper understanding of JS.

The browser is the most basic display tool on the front end. When we open the browser, the computer system to run the memory ratio will give it a certain amount of space (assuming 100M), as we open more and more pages, the browser uses more and more space, more than the allocated space, there will be stuttering, or even die. And we open each page, that is, JS inside the Window object, each open a page, will create a Window object, independent of each other. I take a page (that is, a Window object, for example):

Example

First

Second

Memory diagram

A Web page is categorized in memory as three parts, stacks, heaps, and constant pools. The main variables defined in the stack (variable memory address), the heap inside the main storage Dom tree, and their properties, can also be understood as objects and object method properties, constant pool of all kinds of characters, numbers, symbols, text and so on. The browser gets an HTML document that is executed from top to bottom, from left to right, and then on the page in turn.

If we define a variable in JS: var a = 1; Then a bit of memory is allocated in the stack for storing 1 of the memory address in the constant pool. You can also interpret this as a pointer to 1 in a constant pool.

When we define a function, the function is also generated in the heap, and if the function is assigned to a variable, the variable will store the memory address of the function. Note that the function is special, it also has stacks and heaps. Inside the function, the created variable is stored in its own stack, and the function created is stored in its own heap, and if you want to use it, you can refer to it by defining a global variable in window and then by assigning (in fact, memory pointing).

In fact, JS is used to manipulate the DOM tree, change its structure or change the properties. When we change the property value of a DOM by JS, or add a DOM, it causes the entire DOM to reload, and the browser executes the document again and then draws it in turn. Since the browser is already very mature and fast in rendering this aspect, it is hard to notice that it is redrawn again.

10 minutes to get your JavaScript to the pinnacle