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

简介: 前端知识(九)------------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来写就要比用#写好,因为它是一起渲染的,而#是单独渲染每一个的,会耗费更多的性能。

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

相关文章
|
3月前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
37 0
|
5天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
18 4
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
41 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2月前
|
Web App开发 JavaScript 前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
15 2
前端基础(一)_初识JavaScript
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
51 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
23天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
113 0
|
23天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
2月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
40 2
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
56 0
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
34 0