面经练习（十）

1.vuex和localstorage的区别以及cookie两个storage的区别

2.Vue.nextTick(callback) 使用原理：

Vue.nextTick(callback) 使用原理：

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

3.argument[0]（）的问题

        var length = 10;

        function fn() {
            console.log(this.length);
        }
        var obj = {
            length: 5,
            method: (...arguments) => {
                console.log(this);
                //箭头函数指向window
                console.log(this.length);
                fn();//指向window
                arguments[0]();//argument[0]指向fn，调用fn的是argument，所以this指向argument，参数有fn，1所以输出2
            }
        }
        obj.method(fn, 1)

输出 10 10 2

4.Canvas 与 SVG 的比较

1.canvas是html5新增的，是一块标量画布，就像一张图片一样，放大会失真。而svg是矢量图放大不会是真，百度地图放大缩小不会失真就是用svg做的

2.svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布，不能进行事件绑定，但是有特定的API；

3.可以在canvas中引入jpg或png这类格式的图片，svg则不可以

5.jsonp原理

1.script标签不受跨域同源策略限制影响
2.JSON数据格式还被js原生支持
3.允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

6.CSS3 JS 动画卡顿优化

1.尽量使用 transform 当成动画熟悉，避免使用 height,width,margin,padding 等；
2.要求较高时，可以开启浏览器开启 GPU 硬件加速。
CSS3 动画卡顿优化

7.彻底明白JS 线程

JS线程

浏览器有很多线程，例如：

1、GUI 渲染线程

2、JS 引擎线程

3、定时器触发线程 (setTimeout)

4、浏览器事件线程 (onclick)

5、http 异步线程

6、EventLoop轮询处理线程

7、…

其中，1、2、4为常驻线程

8.JS继承，JS设计模式

9.children 和childNodes的区别

childNodes

children 只返回html阶段

10.一道有关this的题

'use strict'
var a = 1;
var obj = {
    a: 2,
    b: function() {
        this.a = 3;
    },
    print: function() {
        console.log(this.a);
    }
};
obj.print();
var print = obj.print;
print();

print(); 如果没有严格模式的话 会输出1
但是’use strict’ 之后禁止this关键字指向全局对象。