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

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

相关文章
|
22天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
38 5
|
23天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
57 1
|
27天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
33 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
51 4
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
116 0
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
48 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
Web App开发 JavaScript 前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
17 2
前端基础(一)_初识JavaScript
|
3月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
99 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)