同步与异步、JS任务、渲染互斥

JavaScript技术基本组成部分

Javascript的同步和异步

计算机中的同步和异步，与我们生活中的不一样，是相反的，同步是sync，异步是async 同步同步是两个任务有先后顺序，如果前一个任务没有执行完毕，下一个任务就不能执行，会对下一个任务的执行造成阻塞异步计算机中'同时'（但是还是有先后顺序）进行的两个任务叫做异步，所谓异步就是下一个任务的执行是在当前任务还没执行完毕的情况下就会执行，也就是说前一个任务的执行不会影响到下一个任务注意：两个任务之间是同步或异步的关系，如果前一个任务还没执行完后一个任务不能执行，我们就说前面那个任务是同步任务，否则前面那个任务是异步任务，而后一个任务是否是同步还是异步任务得看它后边的任务是如何执行的，下图中，左边的'等待更新'是同步任务，因为它的执行会阻塞'学习Javascript'任务的执行，右边的'等待更新'任务是异步任务，因为在它执行的时候'学习Javascript'任务也能执行。

同步异步问题 它们之间都是同步关系

js 复制代码

document.write('开始更新<br/>');
document.write('更新中<br/>');
document.write('更新完毕<br/>');
document.write('学习JavaScript<br/>');
document.write('玩<br/>');

异步任务

js 复制代码

const ps = new Promise((resolve)=>{
	document.write('开始更新<br/>');
	document.write('更新中<br/>');
});
//异步执行
p1.then(()=>{
	document.write('更新完毕<br/>');
}).then(()=>{
	p2.then(()=>{
		document.write('玩<br/>');
	})
})

const p2 = new Promise(()=>{
	document.write('学习JavaScript<br/>');
})

进程

CPU正在进行的一个任务的运行过程的调度单位进程是计算机调度的基本单位进程包含线程，每个进程里包含了多个线程运行，线程在进程中运行，线程是处理当前应用程序当中的各项任务的浏览器是一个多进程的应用程序，浏览器有一个主进程->用户界面，每一个tab各自有独立的渲染进程（浏览器内核Renderer,渲染引擎）、网络进程（处理网络请求）、GPU(动画与3D绘制)、插件进程（devtool）

前端三要素 HTML 网页视图的结构 CSS网页视图的结构布局与样式 JS 网页动态化脚本程序分离开发：方便开发过程中易于维护，可读性强前端一切基于HTML文件

script标签

内部脚本：HTML文件中嵌入脚本程序 为什么script标签一般写在body标签的最后 如果把script标签写在head标签中或者前面，script标签解析会阻塞后边标签的解析

script标签的特点

1、script标签必须要是闭合标签 2、script标签type多样性

type的值

typescript 复制代码

 默认值是text/javascript 
 application/json 可以存一些静态的JSON 数据
 type为module，脚本程序可以是一个模块程序（ES MODULE规范）而使用模块化脚本的条件首先就是要设置type=module，然后需要开启服务器对HTML进行访问，因为模块化的导入需要发起HTTP请求

那么如何启动一个服务 1、安装nodejs程序 2、npm init -y 3、npm i vite -D 4、package.json ->script->dev: "vite" 5、npm run dev 6、 3、内外部脚本一起写只解析执行外部脚本

脚本顺序问题

脚本与脚本之间是按顺序同步执行的，因为script脚本在解析执行期是有阻塞的内部脚本：解析执行程序，外部脚本：加载解析执行程序脚本与脚本之间的错误是隔离的 JavaScript运行三步骤 1、语法检查 2、预编译 3、执行代码

轮转时间片

为什么两个进度条同时动？ 当前回调函数执行需要同时执行两个，但实际上JS引擎的主线程，不能同时执行两个，又要达到同样的效果，所以需要通过轮转时间片 伪装（模拟多线程），就说把当前任务切分为多个任务，每一秒都会将这一秒要执行的两个任务切成无数个任务去执行，任务分割后，两个任务切片的顺序还是不变的，但是它们相互之间会混在一起

标识符

Identifier，标识符可以充当变量名，它是程序员可以自己决定命名的名字内容（变量名、常量名、函数名）

标识符能够包含 1、大小写字母 2、数字 3、下划线 4、$ 规则 1、不能以数字开头 2、严格区分大小写字母 3、不允许使用空格 4、不能使用ES关键字与保留字 5、语义化清晰完整且尽量简洁 6、驼峰及蛇形命名可以使用命名法 camelCase 驼峰命名也叫小驼峰函数名和变量名 PascalCase 帕斯卡命名法也叫大驼峰，类名、构造函数名 snack_case 蛇形命名例如hello_word用于常量 kebab-case 烤串命名法 hello-world 文件或文件夹名称可用 space case 空格命名法编程中不使用

变量与内存存储

变量是什么？ 内存中存储数据的最基本的单元标识 声明变量 1、用var关键字 2、将一个值赋值给这个变量 JS的动态性 JS的动态性：变量与值的数据类型无关 JS的弱类型：当值操作不匹配既定的数据类型时，系统会做隐式转换

js 复制代码

var a = 1;
var b = a + 'q';//1q

var a = 1;做了什么

1、开辟了一个64为的内存空间 2、将1存储到空间上 3、将a标识对应上该空间的地址

变量二要素： 变量名、变量值

编程语言的基本能力

1、指示开辟存储的内存空间的能力即变量声明 2、具备表达数据的不同能力即数据结构 3、具有对程序进行封装集成的能力即函数声明 4、完成算术与逻辑运算的能力即运算

25.125转二进制(十进制转二进制)

整数部分25

js 复制代码

25 / 2 = 12 | 1
12 / 2 = 6 | 0
6 / 2 = 3 | 0
3 / 2 = 1 | 1
1 / 2 = 0 | 1

正数部分逆向取，所以整数部分转为二进制为11001 小数部分0.125 0.125 * 2 = 0.25 | 0(取整数部分) 0.25 * 2 = 0.5 | 0 0.5 * 2 = 1.0 | 1（小数部分为0结束）小数部分正向取所以是001 因此25.125转换为二进制为11001.001

如何科学的表示11001.001

IEEE Institute of Electrical and Electtonics Engineers 电气和电子工程师协会 754 二进制浮点数算术标准

js 复制代码

V=(-1)^s * M *2^E
V=>二进制浮点数表示方法
s符号 0代表正数 1代表负数
M 有效数字 11001.001的有效数字是1.1001001，小数点必须往左移动四位，然后1.多少必须不写
E指数 （0-2047）

表示11001.001 s =>0 正数占1位 M => 1.1001001 占52位 E=>4占11位

js 复制代码

v = (-1)^0 * 1.1001001*2^4