前端知识（九）------------JavaScript底层知识

1.事件循环机制

在实际的编码过程中小伙伴们不知道有没有遇到过这样的问题，我们都知道js是单线程的。而且是一门解释型语言。那么正常来讲执行代码的顺序就是自上而下一句一句执行对吧

但是有的时候我们发现返回的结果并不是自上而下执行的。我们先写了一段代码

setTimeout(function() { console.log('我是先写的代码'); }, 0);

然后又写了两句：

console.log('我是中间写的代码');

console.log('我是最后写的代码');

你可以把这三句放在控制台执行以下，对，你惊奇的发现，先写的代码居然是后执行的。后写的代码居然先执行了。

这是因为在js中，对于事件的处理是分开来进行的。js中的事件分为两种一种是同步的，一种是异步的。同步事件就是没有经过延迟的，当下写就当下执行。异步正好相反，我现在写的代码

现在并不想执行或者说没办法当下执行。同步事件比较多，绝大多数普通的事件都是同步的，异步事件主要有类似于ajax的一些异步请求，还有setTimeout这样的过段时间再执行的代码

还有setInterval这样的间接性执行代码，这样的都是异步事件。

js对于同步事件的处理更加重视一些，会把他们放在主进程中首先去处理这些事件，不管你有多少同步事件，都会首先执行。全部的同步事件执行完以后，主执行栈会变为空，这时候发现

那些异步事件在另一个地方正在排队等待呢，那个地方叫作事件队列（event queue），然后他们一个一个的排好队进入到主执行栈里面开始执行。

其实这个事情很好理解，在我们日常生活中也经常见这种场景。就比如说我们去医院看病，病有轻重缓急，医生数量有限，只能排队来看病，那同步事件就是那些急病，必须赶快治疗

那些异步事件就是小病，不着急治疗。因此可以先等等。等到这些大病患者治疗完毕了，小病患者再慢慢进来逐步治疗。

那说了这么多，什么叫事件循环机制呢？事件循环说的就是上述过程的不断重复，这就是事件循环。

2.js中的事件冒泡与事件捕获

事件冒泡描述的是一件什么事呢？就是我们都知道dom是树形结构，有层级关系，假设有这么一个场景，一个div里面有一个button，点击button想让div的颜色变成红色，这件事的实现并不难，

但背后能够实现的原理是怎样的呢？

首先，点击按钮，按钮绑定了click事件我们在click里面写了一些让div背景变成红色的代码，然后执行这段代码，div就变红了。问题来了，div怎么知道自己要不要变红呢？

这就是因为当你按下按钮的时候，除了触发了click事件以外，js还将你写的事件传递给了div，让他知道你想干什么，这种事件由下而上逐级传播的现象就叫做事件冒泡

时间冒泡能够传递很多的层级，知道window对象为止，无论你嵌套了多少层，最底层的元素只要触发了事件，这个事件就会不断网上传递。

那么什么是事件捕获？正好相反，当一个父级元素绑定某个事件以后，js也会将这个事件传递给子元素，让它知道这个信息。

注意无论是事件冒泡还是事件捕获，传递的都只是事件而已，并不传递事件内部的函数。

3.js中闭包的概念与作用

首先明确一件事，js对于变量的作用域的划分可以分成全局变量和局部变量，全局变量大家都可以访问，局部变量则只有声明他的父函数，父代码块可以访问。

因此在js这门语言中，函数内部的局部变量只有函数内部其他成员可以访问，外部不可访问，例如
?

function f1()
{
 
var a='我是函数内部声明的变量';//在函数内部声明一个变量
}
 
console.log(a);//在函数外部访问
 
//另一个函数内访问
function f2(){
console.log(a);
}
f2();

执行这段代码你会看见

我们发现，在函数外部和另一个函数中都无法访问a的值。

那么怎么解决这个问题呢。那就是闭包

具体的操作就是

在声明变量的函数内部再声明一个函数，这个函数里面访问局部变量，然后再把整个函数返回，其他的地方再调用。代码如下：

function f1()
{
 
var a='我是函数内部声明的变量';//在函数内部声明一个变量
 
  function f3(){
      console.log(a);
  }
   return f3;
}
 
var co=f1();
co();

?执行这段代码的结果是

?

其实闭包不是什么难以理解的概念，就相当于一个技巧，当你以后想在别的地方访问函数内部变量的时候可以采用这种方式。

4.js中回流与重绘的概念

事实上，js引擎在渲染html的时候有这样一个细节。

第一步，解析dom树，确定标签之间的层级关系。

第二步，解析css文件，转换成标准的css规则

第三步，确定元素的位置，大小，在屏幕上的像素从父级到子级渲染

第四步，确定每个元素内部的着色样式，边框样式，图片填充等

细心的朋友会发现，当你的网速慢的时候打开网页并不是自上而下渲染的，而是先出来一个轮廓架构，慢慢的才会显示出里面的内容。

在上述过程中，第三步叫做排列dom，第四步叫做绘制dom

那么，当我们修改js或者css的时候就会触发js引擎更新dom

如果你更改了元素的大小和位置等参数，就会触发回流（reflow）机制。如果你改变了元素内部的颜色和填充图片，那就触发了重绘（repaint）的机制。

那么我知道这些有什么用呢？

当然是一些专家指出，在我们编程的时候应当尽量的减少触发这两种操作，避免过多的性能消耗。

比如说，我们写css的时候如果有class来写就要比用#写好，因为它是一起渲染的，而#是单独渲染每一个的，会耗费更多的性能。

再有就是，当你的代码出了问题的时候，帮助你更好的判断是哪一步，哪一个过程出了问题。
?