九：什么是事件委托 为什么要用事件委托
事件委托
事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件。
即：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处：
只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
对于新添加的元素也会有之前的事件

为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

原生js的 window.onload与jq的$(document).ready(function(){})的区别

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同 window.onload不能同时编写多个，如果有多个 window.onload 方法，只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法 window.onload没有简化写法 (document).ready(function())可以简写成 (document).ready(function(){})可以简写成(document).ready(function())可以简写成(function(){})；

十：positon有几种取值，分别是什么？

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。
四种取值中，除了static之外，其他属性都可通过z-index进行层次分级
十一：px,em,rem的区别
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
rem 是根据根元素定义字体大小 一般用来移动端布局
十一：清除浮动有哪些方式:
、使用 clear
clear : none | left | right | both

2、增加一个清除浮动的子元素

3、用:after 伪元素

4、父元素设置 overflow:hidden

5、父元素也设成 float

6、父元素设置 display:table。

第一种方法只适合相邻浮动元素清除浮动，后面三种是触发了 BFC，推荐使用第三种方法。
十一：css readonly和disabled的区别

disabled属性阻止对元素的一切操作，例如获取焦点，点击事件等等。disabled属性可以让表单元素的值无法被提交。
readonly属性只是将元素设置为只读，其他操作正常。readonly属性则不影响提交问题。
这个需要进行测试。。。
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 或 配合使用。
disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
disabled 属性无法与 一起使用。

十二：css优先级算法如何计算？
！important 特殊性最高

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type=“text”]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

十三：手写数组去重，多种方法
一、利用ES6中的 Set 方法去重

let arr = [1,0,0,2,9,8,3,1];
2           function unique(arr) {
3                 return Array.from(new Set(arr))
4           }
5           console.log(unique(arr));   // [1,0,2,9,8,3]
6　　　　　　console.log(...new Set(arr));　// [1,0,2,9,8,3]

二、使用双重for循环，再利用数组的splice方法去重（ES5常用）

var arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
             function unique(arr) {
                    for (var i = 0, len = arr.length; i < len; i++) {
                        for (var j = i + 1, len = arr.length; j < len; j++) {
                            if (arr[i] === arr[j]) {
                                arr.splice(j, 1);
                                j--;        // 每删除一个数j的值就减1
                                len--;      // j值减小时len也要相应减1（减少循环次数，节省性能）   
                                // console.log(j,len)

                            }
                        }
                    }
                    return arr;
                }
                console.log(unique(arr));       //  1, 5, 6, 0, 7, 3, 9

三、利用数组的indexOf方法去重
　注：array.indexOf(item,statt) 返回数组中某个指定的元素的位置，没有则返回-1

var arr =[1,-5,-4,0,-4,7,7,3];
2                 function unique(arr){
3                    var arr1 = [];       // 新建一个数组来存放arr中的值
4                    for(var i=0,len=arr.length;i<len;i++){
5                        if(arr1.indexOf(arr[i]) === -1){
6                            arr1.push(arr[i]);
7                        }
8                    }
9                    return arr1;
10                 }
11                 console.log(unique(arr));    // 1, -5, -4, 0, 7, 3

四、利用数组的sort方法去重（相邻元素对比法）
　注：array.sort( function ) 参数必须是函数，可选，默认升序

var arr =  [5,7,1,8,1,8,3,4,9,7];
                function unique( arr ){
                    arr = arr.sort();
                    console.log(arr);

                    var arr1 = [arr[0]];
                    for(var i=1,len=arr.length;i<len;i++){
                        if(arr[i] !== arr[i-1]){
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr))l;   //  1, 1, 3, 4, 5, 7, 7, 8, 8, 9

五、利用数组的includes去重

var arr = [-1,0,8,-3,-1,5,5,7];
2                 function unique( arr ){
3                     var arr1 = [];
4                     for(var i=0,len=arr.length;i<len;i++){
5                         if( !arr1.includes( arr[i] ) ){      // 检索arr1中是否含有arr中的值
6                             arr1.push(arr[i]);
7                         }
8                     }
9                     return arr1;
10                 }
11                 console.log(unique(arr));      //  -1, 0, 8, -3, 5, 7

十四：实现一个clone函数
实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
方法一

function clone(obj){  
    var o;  
    switch(typeof obj){  
    case 'undefined': break;  
    case 'string'   : o = obj + '';break;  
    case 'number'   : o = obj - 0;break;  
    case 'boolean'  : o = obj;break;  
    case 'object'   :  
        if(obj === null){  
            o = null;  
        }else{  
            if(obj instanceof Array){  
                o = [];  
                for(var i = 0, len = obj.length; i < len; i++){  
                    o.push(clone(obj[i]));  
                }  
            }else{  
                o = {};  
                for(var k in obj){  
                    o[k] = clone(obj[k]);  
                }  
            }  
        }  
        break;  
    default:         
        o = obj;break;  
    }  
    return o;     
}  

方法二：

function clone2(obj){  
    var o, obj;  
    if (obj.constructor == Object){  
        o = new obj.constructor();   
    }else{  
        o = new obj.constructor(obj.valueOf());   
    }  
    for(var key in obj){  
        if ( o[key] != obj[key] ){   
            if ( typeof(obj[key]) == 'object' ){   
                o[key] = clone2(obj[key]);  
            }else{  
                o[key] = obj[key];  
            }  
        }  
    }  
    o.toString = obj.toString;  
    o.valueOf = obj.valueOf;  
    return o;  
}  

方法三：

function clone3(obj){  
    function Clone(){}  
    Clone.prototype = obj;  
    var o = new Clone();  
    for(var a in o){  
        if(typeof o[a] == "object") {  
            o[a] = clone3(o[a]);  
        }  
    }  
    return o;  
}  

十五：浏览器是如何渲染页面的：
1.处理HTML标记并构建DOM树
2.处理CSS标记并构建CSSOM树
3.将DOM与CSSOM合并成一个渲染树
4.根据渲染树来布局，计算每个节点的布局信息
5.将各个节点绘制到屏幕上
渲染树构建、布局及绘制
CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
构建渲染树的步骤：

从DOM树的根节点开始遍历每个可见节点（display:none与visibility:hidden的区别）
对于每个可见节点，为其找到适配的CSSOM规则并应用它
1.生成渲染树
2.布局阶段：输出盒模型
3.绘制：输出到屏幕上的像素
CSS阻塞渲染
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
这就是为什么我们将外部样式的引入放在head标签中的原因，在body渲染前先把相对完整CSSOM Tree构建好。
对于某些CSS样式只在特定条件下叉用，添加媒体查询解决。
请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。无论哪一种情况，浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。

JavaScript阻塞渲染
JavaScript 会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能，可以让您的 JavaScript 异步执行，并去除关键渲染路径中任何不必要的 JavaScript。

JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行会阻止 CSSOM。
除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM。
如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。
简言之，JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系，从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟：

脚本在文档中的位置很重要
当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行将暂停，直至 CSSOM 就绪。
async属性：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。无顺序
defer属性： 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按顺序

十六：call ,apply,bind方法的作用分别是什么？
每个函数都包含两个非继承而来的方法: apply()和call(), 这两个方法的用途就是在特定的作用域中调用函数,实际上就是设置函数体内this对象的值。
apply()
apply()接受两个参数，

第一个就是指定运行函数的作用域(就是this的指向)
第二个是参数数组,
Array实例
arguments对象

function sum(sum1, sum2) {
   return sum1 + sum2
}
function sumApply1(sum1, sum2) {
    return sum.apply(this, arguments) // 传如arguments对象
}
function sumApply2(sum1, sum2) {
    return sum.apply(this, [sum1, sum2]) // 传入数组
}
console.log(sumApply1(10,20)) // => 30
console.log(sumApply2(10,20)) // => 30

上面的例子, sumApply1()执行sum()的时候传入了this作为this值(因为是在全局作用域中调用的, 所以this指向window对象)和arguments对象, 而sumApply2()传入了this和一个参数数组, 返回的结果是相同的;
call()
call() 方法和apply() 方法作用相同, 区别在于接收参数的方式不同, call() 需要列举所有传入的所有参数

function sum(sum1, sum2) {
  return sum1 + sum2
}
function sumCall1(sum1, sum2) {
    return sum.call(this, sum1, sum2)
}
console.log(sumCall1(10,20)); // => 30

apply()和call() 的真正强大的地方是能扩充作用域

var color = 'red';
var o = {
    color: 'blue'
}
function sayColor() {
    console.log(this.color);
}
sayColor.call(this) // => red
sayColor.call(window) // => red
sayColor.call(o); // => blue
定义一个全局函数sayColor(), 一个全局变量color='red’和一个对象o, 第一个sayColor.claa(this)由于是在全局作用域调用的, 所以this指向window, this.color就转换成了window.color 所以就是red, 第二个同第一个, sayColor.call(o)把执行环境改成了o, 因此函数内的this就指向了对象o, 所以结果是blue;

使用call()或apply()扩充作用域最大的好处厹, 对象不需要与方法有任何耦合关系,
bind()
这个方法会创建一个函数实例, 其this的值指向传给bind()函数的值

window.color = 'red'
var o = {
    color: 'blue'
}
function sayColor() {
    console.log(this.color)
}
var bindSayColor = sayColor.bind(o);
bindSayColor() // => blue
这里sayColor()调用了bind()并传入了参数o, 创建了bindSayColor函数, bindSayColor() 的this就指向了o, 因此在全局作用域中调用这个函数, 也会指向o

十七：线程和进程的区别
首先来一句概括的总论：进程和线程都是一个时间段的描述，是CPU工作时间段的描述。

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位

在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。

所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）

内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而对线程而言，除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程的资源），线程组之间只能共享资源。

包含关系：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。

十八：eval是做什么的
eval()的作用
把字符串参数解析成JS代码并运行，并返回执行的结果；
例如：

eval("2+3");//执行加运算，并返回运算值。
eval("varage=10");//声明一个age变量

eval的作用域：

functiona(){
eval("var x=1"); //等效于 var x=1;
console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效
注意事项

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

其它作用

由JSON字符串转换为JSON对象的时候可以用eval，例如：

varjson="{name:'Mr.CAO',age:30}";
varjsonObj=eval("("+json+")");
console.log(jsonObj);

十九：那些操作会造成内存泄漏
1）意外的全局变量引起的内存泄露

function leak(){
leak="xxx";//leak成为一个全局变量，不会被回收
}

2）闭包引起的内存泄露

function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=function(){
//Even if it's a empty function
}
}

闭包可以维持函数内局部变量，使其得不到释放。 上例定义事件回调时，由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。
解决之道，将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

//将事件处理函数定义在外部
function onclickHandler(){
//do something
}
function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=onclickHandler;
}

//在定义事件处理函数的外部函数中，删除对dom的引用
function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=function(){
//Even if it's a empty function
}
obj=null;
}

3）没有清理的DOM元素引用

var elements={
button: document.getElementById("button"),
image: document.getElementById("image"),
text: document.getElementById("text")
};
function doStuff(){
image.src="http://some.url/image";
button.click():
console.log(text.innerHTML)
}
function removeButton(){
document.body.removeChild(document.getElementById('button'))
}

4）被遗忘的定时器或者回调

var someResouce=getData();
setInterval(function(){
var node=document.getElementById('Node');
if(node){
node.innerHTML=JSON.stringify(someResouce)
}
},1000)

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。
5）IE7/8引用计数使用循环引用产生的问题

function fn(){
var a={};
var b={};
a.pro=b;
b.pro=a;
}
fn();

fn()执行完毕后，两个对象都已经离开环境，在标记清除方式下是没有问题的，但是在引用计数策略下，因为a和b的引用次数不为0，所以不会被垃圾回收器回收内存，如果fn函数被大量调用，就会造成内存泄漏。在IE7与IE8上，内存直线上升。
IE中有一部分对象并不是原生js对象。例如，其内存泄漏DOM和BOM中的对象就是使用C++以COM对象的形式实现的，而COM对象的垃圾回收机制采用的就是引用计数策略。因此，即使IE的js引擎采用标记清除策略来实现，但js访问的COM对象依然是基于引用计数策略的。换句话说，只要在IE中涉及COM对象，就会存在循环引用的问题。

怎样避免内存泄露
1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的 ；

3）避免创建过多的对象 原则：不用了的东西要及时归还。

二十：什么是函数柯里化及使用场景
定义
柯里化指的是从一个多参数函数变成一连串单参数函数的变换。它描述的是变换的过程，不涉及变换之后对函数的调用。调用者可以决定对多少个参数实施变换，余下的部分将衍生为一个参数数目较少的新函数。这个新的函数接收剩下的参数，其内部则指向原始函数。当提供的参数完整了才会最终执行原始函数。

语法


//普通函数定义

func mutiply(x:Int,y:Int)->Int{

return x*y

}

//柯里化形式

func mutiply(x:Int)(y:Int)->Int{

return x*y

}

使用如下：


let twice=mutiply(2)

let result=twice(y: 5) //result等于10

//如果直接在一行里调用就这样写

let result2=mutiply(2)(y: 6)

例子里的twice的类型是一个闭包，可以粗暴的理解为mutiply的两个参数第一个参数x已经有了个默认值2，twice的参数就是剩下的另一个参数y。
两个细节
只有一个参数，并且这个参数是该函数的第一个参数。必须按照参数的定义顺序来调用柯里化函数。
柯里化函数的函数体只会执行一次，只会在调用完最后一个参数的时候执行柯里化函数体

js单线程和浏览器多线程

js单线程
js运作在浏览器中，是单线程的，js代码始终在一个线程上执行，此线程被称为js引擎线程。

ps：web worker也只是允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。

但是如果单线程，任务都需要排队。排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
浏览器多线程
1.js引擎线程(js引擎有多个线程，一个主线程，其它的后台配合主线程)
作用：执行js任务(执行js代码，用户输入，网络请求)

2.ui渲染线程
作用：渲染页面(js可以操作dom，影响渲染，所以js引擎线程和UI线程是互斥的。js执行时会阻塞页面的渲染。)

3.浏览器事件触发线程
作用：控制交互，响应用户

4.http请求线程
作用：ajax请求等

5.定时触发器线程
作用：setTimeout和setInteval

6.事件轮询处理线程
作用：轮询消息队列，event loop
所以异步是浏览器的两个或者两个以上线程共同完成的。比如ajax异步请求和setTimeout
同步任务和异步任务
同步任务：在主线程排队支持的任务，前一个任务执行完毕后，执行后一个任务,形成一个执行栈，线程执行时在内存形成的空间为栈，进程形成堆结构，这是内存的结构。执行栈可以实现函数的层层调用。注意不要理解成同步代码进入栈中，按栈的出栈顺序来执行。
异步任务会被主线程挂起，不会进入主线程，而是进入消息队列，而且必须指定回调函数，只有消息队列通知主线程，并且执行栈为空时，该消息对应的任务才会进入执行栈获得执行的机会。

主线程执行的说明: 【js的运行机制】
（1）所有同步任务都在主线程上执行，形成一个执行栈。
（2）主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

二十一：微任务与宏任务

首先，JavaScript是一个单线程的脚本语言。
所以就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用alert()以后进行疯狂console.log，如果没有关闭弹框，控制台是不会显示出一条log信息的。
亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。

所以如果全部代码都是同步执行的，这会引发很严重的问题，比方说我们要从远端获取一些数据，难道要一直循环代码去判断是否拿到了返回结果么？就像去饭店点餐，肯定不能说点完了以后就去后厨催着人炒菜的，会被揍的。
于是就有了异步事件的概念，注册一个回调函数，比如说发一个网络请求，我们告诉主程序等到接收到数据后通知我，然后我们就可以去做其他的事情了。
然后在异步完成后，会通知到我们，但是此时可能程序正在做其他的事情，所以即使异步完成了也需要在一旁等待，等到程序空闲下来才有时间去看哪些异步已经完成了，可以去执行。
比如说打了个车，如果司机先到了，但是你手头还有点儿事情要处理，这时司机是不可能自己先开着车走的，一定要等到你处理完事情上了车才能走。
微任务与宏任务的区别
这个就像去银行办业务一样，先要取号进行排号。
一般上边都会印着类似：“您的号码为XX，前边还有XX人。”之类的字样。

因为柜员同时职能处理一个来办理业务的客户，这时每一个来办理业务的人就可以认为是银行柜员的一个宏任务来存在的，当柜员处理完当前客户的问题以后，选择接待下一位，广播报号，也就是下一个宏任务的开始。
所以多个宏任务合在一起就可以认为说有一个任务队列在这，里边是当前银行中所有排号的客户。
任务队列中的都是已经完成的异步操作，而不是说注册一个异步任务就会被放在这个任务队列中，就像在银行中排号，如果叫到你的时候你不在，那么你当前的号牌就作废了，柜员会选择直接跳过进行下一个客户的业务处理，等你回来以后还需要重新取号

而且一个宏任务在执行的过程中，是可以添加一些微任务的，就像在柜台办理业务，你前边的一位老大爷可能在存款，在存款这个业务办理完以后，柜员会问老大爷还有没有其他需要办理的业务，这时老大爷想了一下：“最近P2P爆雷有点儿多，是不是要选择稳一些的理财呢”，然后告诉柜员说，要办一些理财的业务，这时候柜员肯定不能告诉老大爷说：“您再上后边取个号去，重新排队”。
所以本来快轮到你来办理业务，会因为老大爷临时添加的“理财业务”而往后推。
也许老大爷在办完理财以后还想 再办一个信用卡？或者 再买点儿纪念币？
无论是什么需求，只要是柜员能够帮她办理的，都会在处理你的业务之前来做这些事情，这些都可以认为是微任务。

这就说明：你大爷永远是你大爷
在当前的微任务没有执行完成时，是不会执行下一个宏任务的。
所以就有了那个经常在面试题、各种博客中的代码片段：

setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)

setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务，上述代码的执行顺序就是按照序号来输出的。
所有会进入的异步都是指的事件回调中的那部分代码
也就是说new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注册的回调才是异步执行的。
在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。
所以就得到了上述的输出结论1、2、3、4。

+部分表示同步执行的代码

+setTimeout(_ => {
-  console.log(4)
+})

+new Promise(resolve => {
+  resolve()
+  console.log(1)
+}).then(_ => {
-  console.log(3)
+})

+console.log(2)

本来setTimeout已经先设置了定时器（相当于取号），然后在当前进程中又添加了一些Promise的处理（临时添加业务）。

所以进阶的，即便我们继续在Promise中实例化Promise，其输出依然会早于setTimeout的宏任务：

setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
  Promise.resolve().then(_ => {
    console.log('before timeout')
  }).then(_ => {
    Promise.resolve().then(_ => {
      console.log('also before timeout')
    })
  })
})

console.log(2)

当然了，实际情况下很少会有简单的这么调用Promise的，一般都会在里边有其他的异步操作，比如fetch、fs.readFile之类的操作。
而这些其实就相当于注册了一个宏任务，而非是微任务。

二十二:Event-Loop是个啥
上边一直在讨论 宏任务、微任务，各种任务的执行。
但是回到现实，JavaScript是一个单进程的语言，同一时间不能处理多个任务，所以何时执行宏任务，何时执行微任务？我们需要有这样的一个判断逻辑存在。

每办理完一个业务，柜员就会问当前的客户，是否还有其他需要办理的业务。（检查还有没有微任务需要处理）
而客户明确告知说没有事情以后，柜员就去查看后边还有没有等着办理业务的人。（结束本次宏任务、检查还有没有宏任务需要处理）
这个检查的过程是持续进行的，每完成一个任务都会进行一次，而这样的操作就被称为Event Loop。(这是个非常简易的描述了，实际上会复杂很多)

而且就如同上边所说的，一个柜员同一时间只能处理一件事情，即便这些事情是一个客户所提出的，所以可以认为微任务也存在一个队列，大致是这样的一个逻辑：

const macroTaskList = [
  ['task1'],
  ['task2', 'task3'],
  ['task4'],
]

for (let macroIndex = 0; macroIndex < macroTaskList.length; macroIndex++) {
  const microTaskList = macroTaskList[macroIndex]

  for (let microIndex = 0; microIndex < microTaskList.length; microIndex++) {
    const microTask = microTaskList[microIndex]

    // 添加一个微任务
    if (microIndex === 1) microTaskList.push('special micro task')

    // 执行任务
    console.log(microTask)
  }

  // 添加一个宏任务
  if (macroIndex === 2) macroTaskList.push(['special macro task'])
}

// > task1
// > task2
// > task3
// > special micro task
// > task4
// > special macro task

之所以使用两个for循环来表示，是因为在循环内部可以很方便的进行push之类的操作（添加一些任务），从而使迭代的次数动态的增加。
以及还要明确的是，Event Loop只是负责告诉你该执行那些任务，或者说哪些回调被触发了，真正的逻辑还是在进程中执行的。

九：什么是事件委托 为什么要用事件委托
事件委托
事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件。
即：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处：
只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
对于新添加的元素也会有之前的事件

为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，
举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

原生js的 window.onload与jq的$(document).ready(function(){})的区别

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同 window.onload不能同时编写多个，如果有多个 window.onload 方法，只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法 window.onload没有简化写法 (document).ready(function())可以简写成 (document).ready(function(){})可以简写成(document).ready(function())可以简写成(function(){})；

十：positon有几种取值，分别是什么？

static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。
四种取值中，除了static之外，其他属性都可通过z-index进行层次分级
十一：px,em,rem的区别
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
rem 是根据根元素定义字体大小 一般用来移动端布局
十一：清除浮动有哪些方式:
、使用 clear
clear : none | left | right | both

2、增加一个清除浮动的子元素

3、用:after 伪元素

4、父元素设置 overflow:hidden

5、父元素也设成 float

6、父元素设置 display:table。

第一种方法只适合相邻浮动元素清除浮动，后面三种是触发了 BFC，推荐使用第三种方法。
十一：css readonly和disabled的区别

disabled属性阻止对元素的一切操作，例如获取焦点，点击事件等等。disabled属性可以让表单元素的值无法被提交。
readonly属性只是将元素设置为只读，其他操作正常。readonly属性则不影响提交问题。
这个需要进行测试。。。
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 或 配合使用。
disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
disabled 属性无法与 一起使用。

十二：css优先级算法如何计算？
！important 特殊性最高

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type=“text”]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

十三：手写数组去重，多种方法
一、利用ES6中的 Set 方法去重

let arr = [1,0,0,2,9,8,3,1];
2           function unique(arr) {
3                 return Array.from(new Set(arr))
4           }
5           console.log(unique(arr));   // [1,0,2,9,8,3]
6　　　　　　console.log(...new Set(arr));　// [1,0,2,9,8,3]

二、使用双重for循环，再利用数组的splice方法去重（ES5常用）

var arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
             function unique(arr) {
                    for (var i = 0, len = arr.length; i < len; i++) {
                        for (var j = i + 1, len = arr.length; j < len; j++) {
                            if (arr[i] === arr[j]) {
                                arr.splice(j, 1);
                                j--;        // 每删除一个数j的值就减1
                                len--;      // j值减小时len也要相应减1（减少循环次数，节省性能）   
                                // console.log(j,len)

                            }
                        }
                    }
                    return arr;
                }
                console.log(unique(arr));       //  1, 5, 6, 0, 7, 3, 9

三、利用数组的indexOf方法去重
　注：array.indexOf(item,statt) 返回数组中某个指定的元素的位置，没有则返回-1

var arr =[1,-5,-4,0,-4,7,7,3];
2                 function unique(arr){
3                    var arr1 = [];       // 新建一个数组来存放arr中的值
4                    for(var i=0,len=arr.length;i<len;i++){
5                        if(arr1.indexOf(arr[i]) === -1){
6                            arr1.push(arr[i]);
7                        }
8                    }
9                    return arr1;
10                 }
11                 console.log(unique(arr));    // 1, -5, -4, 0, 7, 3

四、利用数组的sort方法去重（相邻元素对比法）
　注：array.sort( function ) 参数必须是函数，可选，默认升序

var arr =  [5,7,1,8,1,8,3,4,9,7];
                function unique( arr ){
                    arr = arr.sort();
                    console.log(arr);

                    var arr1 = [arr[0]];
                    for(var i=1,len=arr.length;i<len;i++){
                        if(arr[i] !== arr[i-1]){
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr))l;   //  1, 1, 3, 4, 5, 7, 7, 8, 8, 9

五、利用数组的includes去重

var arr = [-1,0,8,-3,-1,5,5,7];
2                 function unique( arr ){
3                     var arr1 = [];
4                     for(var i=0,len=arr.length;i<len;i++){
5                         if( !arr1.includes( arr[i] ) ){      // 检索arr1中是否含有arr中的值
6                             arr1.push(arr[i]);
7                         }
8                     }
9                     return arr1;
10                 }
11                 console.log(unique(arr));      //  -1, 0, 8, -3, 5, 7

十四：实现一个clone函数
实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
方法一

function clone(obj){  
    var o;  
    switch(typeof obj){  
    case 'undefined': break;  
    case 'string'   : o = obj + '';break;  
    case 'number'   : o = obj - 0;break;  
    case 'boolean'  : o = obj;break;  
    case 'object'   :  
        if(obj === null){  
            o = null;  
        }else{  
            if(obj instanceof Array){  
                o = [];  
                for(var i = 0, len = obj.length; i < len; i++){  
                    o.push(clone(obj[i]));  
                }  
            }else{  
                o = {};  
                for(var k in obj){  
                    o[k] = clone(obj[k]);  
                }  
            }  
        }  
        break;  
    default:         
        o = obj;break;  
    }  
    return o;     
}  

方法二：

function clone2(obj){  
    var o, obj;  
    if (obj.constructor == Object){  
        o = new obj.constructor();   
    }else{  
        o = new obj.constructor(obj.valueOf());   
    }  
    for(var key in obj){  
        if ( o[key] != obj[key] ){   
            if ( typeof(obj[key]) == 'object' ){   
                o[key] = clone2(obj[key]);  
            }else{  
                o[key] = obj[key];  
            }  
        }  
    }  
    o.toString = obj.toString;  
    o.valueOf = obj.valueOf;  
    return o;  
}  

方法三：

function clone3(obj){  
    function Clone(){}  
    Clone.prototype = obj;  
    var o = new Clone();  
    for(var a in o){  
        if(typeof o[a] == "object") {  
            o[a] = clone3(o[a]);  
        }  
    }  
    return o;  
}  

十五：浏览器是如何渲染页面的：
1.处理HTML标记并构建DOM树
2.处理CSS标记并构建CSSOM树
3.将DOM与CSSOM合并成一个渲染树
4.根据渲染树来布局，计算每个节点的布局信息
5.将各个节点绘制到屏幕上
渲染树构建、布局及绘制
CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
构建渲染树的步骤：

从DOM树的根节点开始遍历每个可见节点（display:none与visibility:hidden的区别）
对于每个可见节点，为其找到适配的CSSOM规则并应用它
1.生成渲染树
2.布局阶段：输出盒模型
3.绘制：输出到屏幕上的像素
CSS阻塞渲染
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
这就是为什么我们将外部样式的引入放在head标签中的原因，在body渲染前先把相对完整CSSOM Tree构建好。
对于某些CSS样式只在特定条件下叉用，添加媒体查询解决。
请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。无论哪一种情况，浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。

JavaScript阻塞渲染
JavaScript 会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能，可以让您的 JavaScript 异步执行，并去除关键渲染路径中任何不必要的 JavaScript。

JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行会阻止 CSSOM。
除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM。
如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。
简言之，JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系，从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟：

脚本在文档中的位置很重要
当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
JavaScript 可以查询和修改 DOM 与 CSSOM。
JavaScript 执行将暂停，直至 CSSOM 就绪。
async属性：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。无顺序
defer属性： 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按顺序

十六：call ,apply,bind方法的作用分别是什么？
每个函数都包含两个非继承而来的方法: apply()和call(), 这两个方法的用途就是在特定的作用域中调用函数,实际上就是设置函数体内this对象的值。
apply()
apply()接受两个参数，

第一个就是指定运行函数的作用域(就是this的指向)
第二个是参数数组,
Array实例
arguments对象

function sum(sum1, sum2) {
   return sum1 + sum2
}
function sumApply1(sum1, sum2) {
    return sum.apply(this, arguments) // 传如arguments对象
}
function sumApply2(sum1, sum2) {
    return sum.apply(this, [sum1, sum2]) // 传入数组
}
console.log(sumApply1(10,20)) // => 30
console.log(sumApply2(10,20)) // => 30

上面的例子, sumApply1()执行sum()的时候传入了this作为this值(因为是在全局作用域中调用的, 所以this指向window对象)和arguments对象, 而sumApply2()传入了this和一个参数数组, 返回的结果是相同的;
call()
call() 方法和apply() 方法作用相同, 区别在于接收参数的方式不同, call() 需要列举所有传入的所有参数

function sum(sum1, sum2) {
  return sum1 + sum2
}
function sumCall1(sum1, sum2) {
    return sum.call(this, sum1, sum2)
}
console.log(sumCall1(10,20)); // => 30

apply()和call() 的真正强大的地方是能扩充作用域

var color = 'red';
var o = {
    color: 'blue'
}
function sayColor() {
    console.log(this.color);
}
sayColor.call(this) // => red
sayColor.call(window) // => red
sayColor.call(o); // => blue
定义一个全局函数sayColor(), 一个全局变量color='red’和一个对象o, 第一个sayColor.claa(this)由于是在全局作用域调用的, 所以this指向window, this.color就转换成了window.color 所以就是red, 第二个同第一个, sayColor.call(o)把执行环境改成了o, 因此函数内的this就指向了对象o, 所以结果是blue;

使用call()或apply()扩充作用域最大的好处厹, 对象不需要与方法有任何耦合关系,
bind()
这个方法会创建一个函数实例, 其this的值指向传给bind()函数的值

window.color = 'red'
var o = {
    color: 'blue'
}
function sayColor() {
    console.log(this.color)
}
var bindSayColor = sayColor.bind(o);
bindSayColor() // => blue
这里sayColor()调用了bind()并传入了参数o, 创建了bindSayColor函数, bindSayColor() 的this就指向了o, 因此在全局作用域中调用这个函数, 也会指向o

十七：线程和进程的区别
首先来一句概括的总论：进程和线程都是一个时间段的描述，是CPU工作时间段的描述。

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位

在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。

所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）

内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而对线程而言，除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程的资源），线程组之间只能共享资源。

包含关系：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。

十八：eval是做什么的
eval()的作用
把字符串参数解析成JS代码并运行，并返回执行的结果；
例如：

eval("2+3");//执行加运算，并返回运算值。
eval("varage=10");//声明一个age变量

eval的作用域：

functiona(){
eval("var x=1"); //等效于 var x=1;
console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效
注意事项

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

其它作用

由JSON字符串转换为JSON对象的时候可以用eval，例如：

varjson="{name:'Mr.CAO',age:30}";
varjsonObj=eval("("+json+")");
console.log(jsonObj);

十九：那些操作会造成内存泄漏
1）意外的全局变量引起的内存泄露

function leak(){
leak="xxx";//leak成为一个全局变量，不会被回收
}

2）闭包引起的内存泄露

function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=function(){
//Even if it's a empty function
}
}

闭包可以维持函数内局部变量，使其得不到释放。 上例定义事件回调时，由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。
解决之道，将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

//将事件处理函数定义在外部
function onclickHandler(){
//do something
}
function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=onclickHandler;
}

//在定义事件处理函数的外部函数中，删除对dom的引用
function bindEvent(){
var obj=document.createElement("XXX");
obj.οnclick=function(){
//Even if it's a empty function
}
obj=null;
}

3）没有清理的DOM元素引用

var elements={
button: document.getElementById("button"),
image: document.getElementById("image"),
text: document.getElementById("text")
};
function doStuff(){
image.src="http://some.url/image";
button.click():
console.log(text.innerHTML)
}
function removeButton(){
document.body.removeChild(document.getElementById('button'))
}

4）被遗忘的定时器或者回调

var someResouce=getData();
setInterval(function(){
var node=document.getElementById('Node');
if(node){
node.innerHTML=JSON.stringify(someResouce)
}
},1000)

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。
5）IE7/8引用计数使用循环引用产生的问题

function fn(){
var a={};
var b={};
a.pro=b;
b.pro=a;
}
fn();

fn()执行完毕后，两个对象都已经离开环境，在标记清除方式下是没有问题的，但是在引用计数策略下，因为a和b的引用次数不为0，所以不会被垃圾回收器回收内存，如果fn函数被大量调用，就会造成内存泄漏。在IE7与IE8上，内存直线上升。
IE中有一部分对象并不是原生js对象。例如，其内存泄漏DOM和BOM中的对象就是使用C++以COM对象的形式实现的，而COM对象的垃圾回收机制采用的就是引用计数策略。因此，即使IE的js引擎采用标记清除策略来实现，但js访问的COM对象依然是基于引用计数策略的。换句话说，只要在IE中涉及COM对象，就会存在循环引用的问题。

怎样避免内存泄露
1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的 ；

3）避免创建过多的对象 原则：不用了的东西要及时归还。

二十：什么是函数柯里化及使用场景
定义
柯里化指的是从一个多参数函数变成一连串单参数函数的变换。它描述的是变换的过程，不涉及变换之后对函数的调用。调用者可以决定对多少个参数实施变换，余下的部分将衍生为一个参数数目较少的新函数。这个新的函数接收剩下的参数，其内部则指向原始函数。当提供的参数完整了才会最终执行原始函数。

语法


//普通函数定义

func mutiply(x:Int,y:Int)->Int{

return x*y

}

//柯里化形式

func mutiply(x:Int)(y:Int)->Int{

return x*y

}

使用如下：


let twice=mutiply(2)

let result=twice(y: 5) //result等于10

//如果直接在一行里调用就这样写

let result2=mutiply(2)(y: 6)

例子里的twice的类型是一个闭包，可以粗暴的理解为mutiply的两个参数第一个参数x已经有了个默认值2，twice的参数就是剩下的另一个参数y。
两个细节
只有一个参数，并且这个参数是该函数的第一个参数。必须按照参数的定义顺序来调用柯里化函数。
柯里化函数的函数体只会执行一次，只会在调用完最后一个参数的时候执行柯里化函数体

js单线程和浏览器多线程

js单线程
js运作在浏览器中，是单线程的，js代码始终在一个线程上执行，此线程被称为js引擎线程。

ps：web worker也只是允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。

但是如果单线程，任务都需要排队。排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
浏览器多线程
1.js引擎线程(js引擎有多个线程，一个主线程，其它的后台配合主线程)
作用：执行js任务(执行js代码，用户输入，网络请求)

2.ui渲染线程
作用：渲染页面(js可以操作dom，影响渲染，所以js引擎线程和UI线程是互斥的。js执行时会阻塞页面的渲染。)

3.浏览器事件触发线程
作用：控制交互，响应用户

4.http请求线程
作用：ajax请求等

5.定时触发器线程
作用：setTimeout和setInteval

6.事件轮询处理线程
作用：轮询消息队列，event loop
所以异步是浏览器的两个或者两个以上线程共同完成的。比如ajax异步请求和setTimeout
同步任务和异步任务
同步任务：在主线程排队支持的任务，前一个任务执行完毕后，执行后一个任务,形成一个执行栈，线程执行时在内存形成的空间为栈，进程形成堆结构，这是内存的结构。执行栈可以实现函数的层层调用。注意不要理解成同步代码进入栈中，按栈的出栈顺序来执行。
异步任务会被主线程挂起，不会进入主线程，而是进入消息队列，而且必须指定回调函数，只有消息队列通知主线程，并且执行栈为空时，该消息对应的任务才会进入执行栈获得执行的机会。

主线程执行的说明: 【js的运行机制】
（1）所有同步任务都在主线程上执行，形成一个执行栈。
（2）主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

二十一：微任务与宏任务

首先，JavaScript是一个单线程的脚本语言。
所以就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用alert()以后进行疯狂console.log，如果没有关闭弹框，控制台是不会显示出一条log信息的。
亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。

所以如果全部代码都是同步执行的，这会引发很严重的问题，比方说我们要从远端获取一些数据，难道要一直循环代码去判断是否拿到了返回结果么？就像去饭店点餐，肯定不能说点完了以后就去后厨催着人炒菜的，会被揍的。
于是就有了异步事件的概念，注册一个回调函数，比如说发一个网络请求，我们告诉主程序等到接收到数据后通知我，然后我们就可以去做其他的事情了。
然后在异步完成后，会通知到我们，但是此时可能程序正在做其他的事情，所以即使异步完成了也需要在一旁等待，等到程序空闲下来才有时间去看哪些异步已经完成了，可以去执行。
比如说打了个车，如果司机先到了，但是你手头还有点儿事情要处理，这时司机是不可能自己先开着车走的，一定要等到你处理完事情上了车才能走。
微任务与宏任务的区别
这个就像去银行办业务一样，先要取号进行排号。
一般上边都会印着类似：“您的号码为XX，前边还有XX人。”之类的字样。

因为柜员同时职能处理一个来办理业务的客户，这时每一个来办理业务的人就可以认为是银行柜员的一个宏任务来存在的，当柜员处理完当前客户的问题以后，选择接待下一位，广播报号，也就是下一个宏任务的开始。
所以多个宏任务合在一起就可以认为说有一个任务队列在这，里边是当前银行中所有排号的客户。
任务队列中的都是已经完成的异步操作，而不是说注册一个异步任务就会被放在这个任务队列中，就像在银行中排号，如果叫到你的时候你不在，那么你当前的号牌就作废了，柜员会选择直接跳过进行下一个客户的业务处理，等你回来以后还需要重新取号

而且一个宏任务在执行的过程中，是可以添加一些微任务的，就像在柜台办理业务，你前边的一位老大爷可能在存款，在存款这个业务办理完以后，柜员会问老大爷还有没有其他需要办理的业务，这时老大爷想了一下：“最近P2P爆雷有点儿多，是不是要选择稳一些的理财呢”，然后告诉柜员说，要办一些理财的业务，这时候柜员肯定不能告诉老大爷说：“您再上后边取个号去，重新排队”。
所以本来快轮到你来办理业务，会因为老大爷临时添加的“理财业务”而往后推。
也许老大爷在办完理财以后还想 再办一个信用卡？或者 再买点儿纪念币？
无论是什么需求，只要是柜员能够帮她办理的，都会在处理你的业务之前来做这些事情，这些都可以认为是微任务。

这就说明：你大爷永远是你大爷
在当前的微任务没有执行完成时，是不会执行下一个宏任务的。
所以就有了那个经常在面试题、各种博客中的代码片段：

setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)

setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务，上述代码的执行顺序就是按照序号来输出的。
所有会进入的异步都是指的事件回调中的那部分代码
也就是说new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注册的回调才是异步执行的。
在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。
所以就得到了上述的输出结论1、2、3、4。

+部分表示同步执行的代码

+setTimeout(_ => {
-  console.log(4)
+})

+new Promise(resolve => {
+  resolve()
+  console.log(1)
+}).then(_ => {
-  console.log(3)
+})

+console.log(2)

本来setTimeout已经先设置了定时器（相当于取号），然后在当前进程中又添加了一些Promise的处理（临时添加业务）。

所以进阶的，即便我们继续在Promise中实例化Promise，其输出依然会早于setTimeout的宏任务：

setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
  Promise.resolve().then(_ => {
    console.log('before timeout')
  }).then(_ => {
    Promise.resolve().then(_ => {
      console.log('also before timeout')
    })
  })
})

console.log(2)

当然了，实际情况下很少会有简单的这么调用Promise的，一般都会在里边有其他的异步操作，比如fetch、fs.readFile之类的操作。
而这些其实就相当于注册了一个宏任务，而非是微任务。

二十二:Event-Loop是个啥
上边一直在讨论 宏任务、微任务，各种任务的执行。
但是回到现实，JavaScript是一个单进程的语言，同一时间不能处理多个任务，所以何时执行宏任务，何时执行微任务？我们需要有这样的一个判断逻辑存在。

每办理完一个业务，柜员就会问当前的客户，是否还有其他需要办理的业务。（检查还有没有微任务需要处理）
而客户明确告知说没有事情以后，柜员就去查看后边还有没有等着办理业务的人。（结束本次宏任务、检查还有没有宏任务需要处理）
这个检查的过程是持续进行的，每完成一个任务都会进行一次，而这样的操作就被称为Event Loop。(这是个非常简易的描述了，实际上会复杂很多)

而且就如同上边所说的，一个柜员同一时间只能处理一件事情，即便这些事情是一个客户所提出的，所以可以认为微任务也存在一个队列，大致是这样的一个逻辑：

const macroTaskList = [
  ['task1'],
  ['task2', 'task3'],
  ['task4'],
]

for (let macroIndex = 0; macroIndex < macroTaskList.length; macroIndex++) {
  const microTaskList = macroTaskList[macroIndex]

  for (let microIndex = 0; microIndex < microTaskList.length; microIndex++) {
    const microTask = microTaskList[microIndex]

    // 添加一个微任务
    if (microIndex === 1) microTaskList.push('special micro task')

    // 执行任务
    console.log(microTask)
  }

  // 添加一个宏任务
  if (macroIndex === 2) macroTaskList.push(['special macro task'])
}

// > task1
// > task2
// > task3
// > special micro task
// > task4
// > special macro task

之所以使用两个for循环来表示，是因为在循环内部可以很方便的进行push之类的操作（添加一些任务），从而使迭代的次数动态的增加。
以及还要明确的是，Event Loop只是负责告诉你该执行那些任务，或者说哪些回调被触发了，真正的逻辑还是在进程中执行的。