前端知识(九)------------JavaScript底层知识

2023-12-14 06:19:09

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来写就要比用#写好,因为它是一起渲染的,而#是单独渲染每一个的,会耗费更多的性能。

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

文章来源:https://blog.csdn.net/2301_79265530/article/details/134898279
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。