十分钟让你的javascript登峰造极

Posted 2020-08-24 丶不知

javascipt被称作前端的灵魂，没法灵活运用它，你的前端就只是一具行死走肉。大多初学者能顺利度过div+css，然后倒在了js怀抱，即时跨过了这一关，也只是会用，其底层原理一概不知。小编这就带大家从最底层的原理讲起，相信看完本篇，你对js一定会有更深刻的认识。

 

 

浏览器是前端最基本的展示工具。当我们打开浏览器，电脑系统运行内存比就会给它分配一定的空间（假设100M），随着我们打开的页面越来越多，浏览器所使用的空间也就越来越多，超过分配的空间，就会出现卡顿，甚至卡死。而我们打开的每一个页面，也就是js里面的window对象，每打开一个页面，就会创建一个window对象,彼此独立互不影响。我以一个页面（也就是一个window对象为例）：

示例

第一

第二

 

 

内存图

一个网页在内存中分类为三部分，栈、堆和常量池。栈里面主要定义的变量（变量内存地址）；堆里面主要存DOM树，以及它们的属性，也可以理解成对象以及对象方法属性；常量池中存各种字符、数字、符号、文字等。浏览器拿到一个html文档，是从上往下，从左往右进行执行，然后依次在页面上画出来。

假如我们在js里面定义一个变量：var a = 1; 那么栈中就会分配一点内存，供存储常量池中1的内存地址。也可以把这个a当做指针来理解，它指向常量池中的1。

 

 

当我们定义一个函数时，该函数也会产生在堆中，如果再把函数赋值给一个变量，这个变量就会存函数的内存地址。需注意的是函数比较特殊，它自己也有栈和堆。函数内部创建变量就保存在自己的栈里，创建的函数也是保存在自己的堆里，外面如果想用，只有通过在window定义个全局变量，然后通过赋值（其实就是内存指向），来引用。

 

 

其实js就是用来操作DOM树，改变它的结构或者改变属性。当我们通过js改变了某DOM的属性值，或者增加删除一个DOM，就会导致整个DOM重新加载，浏览器会重新只执行文档，然后依次画出来。由于浏览器对渲染这方面技术已经很成熟，速度很快，所以你很难察觉它是重新绘制了一遍。