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

news2024/11/18 23:47:43

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1298467.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

课堂练习3.3:进程的调度

3-6 课堂练习3.3:进程的调度 在内存中一般存放着数目远大于计算机 CPU 个数的进程,进程调度的作用是选择合适的进程来使用CPU,进程调度器对系统性能有重要影响。本实训分析Linux 0.11的进程调度算法,该操作系统采用了一种时间片与…

redis主从复制【面试必看】

在分布式系统中,希望使用多个服务器来部署redis,存在以下几种redis的部署方式 主从模式主从哨兵集群模式 主从模式 在若干个redis节点中,有的是主节点,有的是从节点 假设有三个物理服务器(称为是三个节点&#xff…

MongoDB中的$type操作符和limit与skip方法

本文主要介绍MongoDB中的$type操作符和limit与skip方法。 目录 MongoDB的$type操作符MongoDB的limit方法MongoDB的skip方法 MongoDB的$type操作符 MongoDB中的$type操作符用于检查一个字段的类型是否与指定的类型相匹配。它可以用于查询和投影操作。 $type操作符可以与以下数…

2.2 网络多线程(私聊、群发、发送文件、推送新闻、离线留言)

文章目录 一、私聊1.1 分析1.2 客户端1.2.1 MessageClientService 私聊类1.2.2 ClientConnectServerThread 线程类 1.3 服务端1.3.1 ServerConnectClientThread 线程类 1.4功能演示 二、群发消息2.1 分析2.2 客户端2.2.1 MessageClientService类2.2.2 ClientConnectServerThrea…

★102. 二叉树的层序遍历

102. 二叉树的层序遍历 很巧妙的,又学习了一种层次遍历的方法,就是说根据当前的队列的长度去遍历,遍历的当前队列的长度就是该层次的节点个数。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* Tr…

基于JavaWeb+SSM+Vue童装商城小程序系统的设计和实现

基于JavaWebSSMVue童装商城小程序系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 Lun文目录 目 录 摘 要 III Abstract 1 1 系统概述 2 1.1 概述 3 1.2课题意义 4 1.3 主要内容 5…

GoldWave注册机 最新中文汉化破解版-安装使用教程

GoldWave是一个功能强大的数字音乐编辑器,是一个集声音编辑、播放、录制和转换的音频工具。它还可以对音频内容进行转换格式等处理。它体积小巧,功能却无比强大,支持许多格式的音频文件,包括WAV、OGG、VOC、 IFF、AIFF、 AIFC、AU…

Temu卖家如何获取流量?Temu新手卖家流量来源哪里?——站斧浏览器

流量对于每个平台来说都是很重要的,那么Temu卖家如何获取流量?流量来源哪里? Temu卖家如何获取流量? 1、优化产品标题和描述:在Temu平台上,买家通常通过搜索关键词来寻找他们感兴趣的产品。因此&#xff…

curl 18 HTTP/2 stream

cd /Users/haijunyan/Desktop/CustomKit/KeepThreadAlive/KeepThreadAlive //Podfile所在文件夹 git config --global https.postBuffer 10485760000 git config --global http.postBuffer 10485760000 pod install https://blog.csdn.net/weixin_41872403/article/details/86…

(七)Python 命令模式

文章目录 1 命令模式简介2 命令模式的特点和目的2.1 命令模式通常使用以下术语:2.1.1 命令模式的UML类图 2.2 命令模式的主要目的如下2.3 命令模式可用于以下各种情景: 3 命令模式python代码示例4 命令模式的优点和缺点4.1 优点4.2 缺点 1 命令模式简介 正如我们在上一章中所看…

【Com通信】Com模块详细介绍

目录 前言 1. Com模块功能介绍 2.关键概念理解 3.功能详细设计 3.1 Introduction 3.2 General Functionality 3.2.1 AUTOSAR COM basis 3.2.2 Signal Values 3.2.3 Endianness Conversion and Sign Extension 3.2.4 Filtering 3.2.5 Signal Gateway 3.3 Normal Ope…

Jenkins入门手册

目录 第一章、Jenkins是什么? 1、Jenkins的由来 1.1 、Jenkins 的目标 第二章、Jenkins安装与配置 2、Jenkins 安装 3、Jenkins 配置 3.1 系统管理 3.1.1 、提示信息 3.1.1.1 、Utf-8 编码 3.1.1.2 、新的版本 3.1.1.3、安全设置 3.1.2、系统设置 3…

Go语言深度优先搜索(DFS)

Go 语言代码段实现了深度优先搜索(DFS)算法,该算法用于遍历图数据结构。以下是代码的主要要点和执行流程的总结: 深度优先搜索函数 (DFS): 接收图的邻接表 (map[int][]int)、访问记录 (map[int]bool) 和当前节点作为参数。将当前…

go sort.Search()

函数 func Search(n int, f func(int) bool) int {} 函数作用 通过二分法查找,找到已经排序好的数组[0,n)中第一个使f为true的索引,如果没有找到返回n 为什么要用二分查找? 因为二分查找相比普通依次遍历而言,速度能有巨幅提升…

延时消息+递归导致重复消费爆炸问题

背景 公司所用消息队列为RoucketMQ,版本为4.x。最近公司有业务需要,将某个处理延迟到第二天的白天再进行。由于4.x版本队列,默认延时时间是按等级来延时的,默认有18个等级,如下图: 默认的延时等级&#xff…

我对迁移学习的一点理解(系列2)

文章目录 我对迁移学习的一点理解 我对迁移学习的一点理解 源域和目标域是相对的概念,指的是在迁移学习任务中涉及到的两个不同的数据集或领域。 源域(Source Domain)通常指的是已经进行过训练和学习的数据集,它被用来提取特征、…

盒马补贴量价-2021KDD

概述: 电商商品定价三个关键问题: 在只有观测数据的时候,怎么构建价格弹性,现在来看这就是一个反事实推断的问题,不仅是如何做的问题,还有如何评估的问题。长周期的规划决策问题怎么建模 & 求解&#…

基于状态机的单片机编程

前言 在设计锂离子电池充电器时,对于以前的根据系统状态进行判断,置标志位的方法,会显得程序臃肿,且架构混乱,变量交错复杂,移植困难。 所以结合实际项目,给出了一种基于状态机的编程方法。 …

线程上下文切换

线程上下文切换 巧妙地利用了时间片轮转的方式, CPU 给每个任务都服务一定的时间,然后把当前任务的状态保存下来,在加载下一任务的状态后,继续服务下一任务,任务的状态保存及再加载, 这段过程就叫做上下文切换。时间片轮转的方式…

对String类的操作 (超细节+演示)

[本节目标] 1.认识String类 2.了解String类的基本用法 3.熟练掌握String类的常见操作 4.认识字符串常量池 5.认识StringBuffer和StringBuilder 1.String类的重要性 在C语言中已经涉及到字符串了,但是在C语言中要表示字符串只能使用字符数组或者字符指针&…