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重新加载,浏览器会重新只执行文档,然后依次画出来。由于浏览器对渲染这方面技术已经很成熟,速度很快,所以你很难察觉它是重新绘制了一遍。