目录
1、常见的内存泄漏案例?
●意外的全局变量:由于使用未声明的变量,而意外的创建了一个全局变量,
而使这个变量一直在内存中无法被回收
● 被遗忘的计时器或回调函数: 设置了 setInterval 定时器,而忘记取消它,
如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收。
● 脱离 DOM 的引用: 获取一个 DOM 元素的引用,而后面这个元素被删除,
由于一直保留了对这个元素的引用,所以它也无法被回收。
● 闭包: 不合理的使用闭包,从而导致某些变量一直被留在内存当中
2、如何避免内存泄漏?
记住一个原则:不用的东西,及时归还。
1. 减少不必要的全局变量,使用严格模式避免意外创建全局变量。
2. 在你使用完数据后,及时解除引用(闭包中的变量,dom引用,定时器清除)。
3. 组织好你的逻辑,避免死循环等造成浏览器卡顿,崩溃的问题。
3、什么是回流和重绘?
回流(reflow):也叫做重排。当元素的尺寸或者位置发生了变化,就需要重新计算渲染树,
这就是回流,比如元素的宽高、位置,浏览器会重新渲染页面
,称为回流,又叫重排(layout)。
回流是影响浏览器性能的关键因素。因为一个元素的回流,可能会导致了其所有子元素以及紧随其后的节点、或祖先节点元素,或部分页面或整个页面的回流
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
重排也叫回流,简单的说就是重新生成布局,重新排列元素。
一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。
4、apply、call、bind三个方法的区别?
三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,
而是会返回this改变后的函数。
let obj = {
name:'张三',
age:18,
func:function(){
console.log(this.name + "年龄" + this.age);
}
}
let obj2 = {
name:'李四',
age:20
}
obj.func.call(obj2) //李四年龄20
obj.func.apply(obj2); //李四年龄20
obj.func.bind(obj2)(); //李四年龄20
这三个结果都一样 bind后面多一个括号是因为 bind返回值是一个函数加上()编程立即执行函数
apply、call、bind都可以为函数指定this
apply 和 call 就是传参方式不一样,apply 参数以一个数组的形式传入。
但是两个都是会在调用的时候同时执行调用的函数。bind则会返回一个绑定了this的函数。