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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

国产化软件突围!怿星科技eStation产品荣获2023铃轩奖“前瞻优秀奖”

11月11日,2023中国汽车供应链峰会暨第八届铃轩奖颁奖典礼在江苏省昆山市举行。怿星科技凭借eStation产品,荣获2023铃轩奖“前瞻智能座舱类优秀奖”,怿星CEO潘凯受邀出席铃轩奖晚会并代表领奖。 2023铃轩奖“前瞻智能座舱类优秀奖” 铃轩奖&a…

Unity使用打成图集的Sprite作为模型贴图使用的问题

大家好,我是阿赵。   有时候用Unity引擎做项目的时候,会遇到这样的需求,美术做了一些模型或者特效,然后策划想在游戏运行的时候,读取一些游戏图标放在特效或者模型上面当做贴图使用。   这个需求实现起来很简单&am…

SAP UI5 walkthrough step6 Modules

在SAPUI5 中,资源通常用作Modules,这个我们将用Message Toast 来实现告警功能 修改controller.js webapp/controller/App.controller.js sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast" ], (Controller, Mes…

Qt优秀开源项目之十九:跨平台记事本Notes

官网:https://www.get-notes.com github:https://github.com/nuttyartist/notes 一.特性 1.完全基于Qt和C 2.完全开源和跨平台(Linux、macOS、Windows) 3.运行速度快,界面美如画 4.支持Markdown 5.支持使用嵌套文件夹…

几种排序的实现

直接插入排序 直接插入排序是一种简单的插入排序法,其基本思想是: 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中,直到所有的记录插入完为止,得到一个新的有序序列 。 实际中我们玩扑克牌时&#xff…

51单片机独立按键以及矩阵按键的使用以及其原理--独立按键 K1 控制 D1 指示灯亮灭以及数码管显示矩阵按键 S1-S16 按下后键值 0-F

IO 的使用–按键 本文主要涉及8051单片机按键的使用,包括独立按键以及矩阵按键的使用以及其原理,其中代码实例包括: 1.独立按键 K1 控制 D1 指示灯亮灭 2.通过数码管显示矩阵按键 S1-S16 按下后键值 0-F 文章目录 IO 的使用--按键一、按键消抖二、独立按…

Vue项目中实现浏览器标签页名字的动态修改

修改router/index.js文件 路由条目下面添加meta属性 meta:{title:DevOps运维平台 }示例 使用Vue的全局守卫函数beforeEach,在路由切换前动态修改浏览器标签页名字 router.beforeEach((to,from,next) > {document.title to.meta.titlenext() })

高项备考葵花宝典-项目进度管理输入、输出、工具和技术(上,很详细考试必过)

项目进度管理的目标是使项目按时完成。有效的进度管理是项目管理成功的关键之一,进度问题在项目生命周期内引起的冲突最多。 小型项目中,定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度计划等过程的联系非常密切,可以视为一…

MX6ULL学习笔记 (八) platform 设备驱动实验

前言: 什么是 Linux 下的 platform 设备驱动 Linux下的字符设备驱动一般都比较简单,只是对IO进行简单的读写操作。但是I2C、SPI、LCD、USB等外设的驱动就比较复杂了,需要考虑到驱动的可重用性,以避免内核中存在大量重复代码&…

玩转大数据13: 数据伦理与合规性探讨

1. 引言 随着科技的飞速发展,数据已经成为了现代社会的宝贵资产。然而,数据的收集、处理和利用也带来了一系列的伦理和合规性问题。数据伦理和合规性不仅关乎个人隐私和权益的保护,还涉及到企业的商业利益和社会责任。因此,数据…

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

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

SpringBoot项目静态资源默认访问目录

SpringBoot项目:静态资源默认访问目录 参考博客:https://blog.csdn.net/weixin_43808717/article/details/118281904

创建Vue2项目,引入chart.js,并生成柱形图、折线图、饼图

基础创建 1. 创建一个新的 Vue 2 项目 如果你还没有创建项目,可以使用 Vue CLI 来创建一个新项目。首先确保你已经安装了 Node.js 和 npm。然后安装 Vue CLI 并创建一个新项目。 npm install -g vue/cli vue create my-vue-chart-project在创建过程中选择 Vue 2 …

End-to-End Reconstruction-Classification Learning for Face Forgery Detection

一、研究背景 现有模型主要通过提取特定的伪造模式进行深度伪造检测,导致学习到的表征与训练集中已知的伪造类型高度相关,因此模型难以泛化到未知的伪造类型上使用。 二、研究动机 1.真实样本的特征分布相对更为紧凑,因此学习真实人脸之间的…

【GEE】时间序列多源遥感数据随机森林回归预测|反演|验证|散点图|完整代码

实验介绍 分类和回归之间的主要区别在于,在分类中,我们的预测目标是离散的类别,而在回归中,预测目标是连续的预测值。 本实验的研究区域位于佛蒙特州的埃塞克斯郡,使用训练数据来模拟土壤氧化还原深度,然…

Chart 7 内存优化

文章目录 前言7.1 Adreno GPU OpenCL内存7.1.1 内存声明周期7.1.2 Loacl Memory7.1.3 Constant memory(常量内存)7.1.4 Private Memory7.1.5 Global Memory7.1.5.1 Buffer Object7.1.5.2 Image Object7.1.5.3 Image object vs. buffer object7.1.5.4 Use of both Image and buf…

基于Python+Django+mysql图书管理系统

基于PythonDjangomysql图书管理系统 一、系统介绍二、功能展示三、其它系统四、获取源码 一、系统介绍 程序开发软件:Pycharm 数据库:mysql 采用技术: Django(一个MVT框架,类似Java的SSM框架) 人生苦短,我用Python&a…

【Vue】日常错误总结(持续更新)

日常遇到的小问题汇总, 内容小篇幅少的就全放这里了, 内容多的会在Vue专栏单独分享~ 目录 【Q】 el-form-item值为 null 或 undefined显示““ 【Q】dialog内组件数据刷新总是延迟慢一拍 问题背景描述 解决方案 代码简单模拟 JS 【Q】el-input 不能输入的解决办法 方法…

LeetCode008之字符串转换整数 (相关话题:状态机)

题目描述 请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C 中的 atoi 函数)。 函数 myAtoi(string s) 的算法如下: 读入字符串并丢弃无用的前导空格检查下一个字符(假设还…

TailwindCSS 支持文本文字超长溢出截断、文字文本省略号

前言 文本文字超长截断并自动补充省略号,这是前端日常开发工作中常用的样式设置能力,文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss 类设置两种基础方式来实现文字超长截断。 TailwindCSS 设置 单行文字超长…
最新文章