每天一个前端知识点

Day 1

http请求：

Day 2

js闭包

特性：
①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

function f1(){
    name=647
    function f2(){
        console.log(name)
    }
    return f2;
}
var f3=new f1();
f3();

这使得在函数外部调用函数f1的时候可以获取到f1里的属性name
再看下一个例子：

function test(){
    var arr=[];
    for(var i=0;i<10;i++){
            arr[i]=function(){
            console.log(i)
        }
    }
    return arr
}
var myArr = test();
for (j=0;j<10;j++){
    myArr[j]();
}

运行上面代码，会输出10个10，因为在执行完test（）之后，test里的for循环里的i已经变成了10，因此外面的for循环获取的j也是10，无法获得预期的结果。
解决方法如下：

function test(){
    var arr=[];
    for(var i=0;i<10;i++){
        (function(j){
            arr[j]=function(){
            console.log(j)
        }
        }(i))
    }
    return arr
}
var myArr = test();
for (j=0;j<10;j++){
    myArr[j]();
}

在闭包里再添加闭包，这样可以在传j的参数的时候将test里面的函数分成十个j值不同的函数，因而可以输出0-9十个数字，闭包循环问题解决。
最后总结一下闭包的好处与坏处

好处：

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
③匿名自执行函数可以减少内存消耗

坏处：

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

Day3

display:none 和visibility:hidden

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
所以display:none才会产生reflow
visibility:hidden只会出发repaint

Day4

var name = 'global';
	var obj = {    
		name: 'local',    
		foo: function(){        
			this.name = 'foo';    
		}.bind(window)};
	var bar = new obj.foo();
	setTimeout(function() {    
		console.log(window.name);
	}, 0);
	console.log(bar.name);  
	var bar3 = bar2 = bar;
	bar2.name = 'foo2';
	console.log(bar3.name);

输出分别为什么？
foo，foo2，global
1.bar是obj的一个新对象，调用了构造函数foo，函数体中的this指向该对象（new的优先级高于bind）
2.复杂类型值地复制是引用复制，bar3、bar2和bar指向的都是同一个对象，所以bar2.name='foo2’对对象的数据进行修改时，bar3和bar的数据同样受影响，bar3.name就是foo2
3.setTimeout函数在队列的最后执行，因此调用的window.name是global

Day5

TCP的三次握手和四次挥手：

三次握手：

原理：
1）发送端首先发送一个带有SYN（synchronize）标志地数据包给接收方。
2）接收方接收后，回传一个带有SYN/ACK标志的数据包传递确认信息，表示我收到了。
3）最后，发送方再回传一个带有ACK标志的数据包，代表我知道了，表示’握手‘结束。

四次挥手：

原理：
1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。
2）第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。
3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
4）第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手

Day6

箭头函数和匿名函数的区别：
1.箭头函数没有prototype(原型)，所以箭头函数本身没有this。
2.箭头函数内部的this是词法作用域，由上下文确定，this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。
3.和带名函数相比，匿名函数需要讲地址赋值给另一个变量let a，然后再用a来调用函数。

Day7

回流和重绘：
在页面加载时，浏览器把获取到的HTML代码解析成一个DOM Tree，而DOM Tree加上CSS的渲染就形成Render Tree

回流：

render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)

重绘：

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

1.回流必重绘，重绘不回流；
2.当页面布局和几何属性改变时就需要回流