面试题day03

目录

1、常见的内存泄漏案例？

2、如何避免内存泄漏？

3、什么是回流和重绘？

4、apply、call、bind三个方法的区别？

---

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的函数。