JS高级04_进程与线程、浏览器模块、定时器、时间循环机制

1. 线程与进程

1). 进程:

(即打开一个程序)

程序的一次执行, 它占有一片独有的内存空间
可以通过windows任务管理器查看进程

2). 线程:

(即比如 一个程序里有负责渲染的、网络的 等等线程)

是进程内的一个独立执行单元
是程序执行的一个完整流程
是CPU的最小调度单元

进程 > 线程

3). 关系

一个进程中一般至少有一个运行的线程:主线程
一个进程中也可以同时运行多个线程,我们会说程序是多线程运行的
一个进程内的数据可以供其中的多个线程直接共享
多个进程之间的数据是不能直接共享的

2. 浏览器内核模块组成

内核由很多模块组成:

1). 主线程

js引擎模块 : 负责js程序的编译与运行
html,css文档解析模块 : 负责页面文本的解析
DOM/CSS模块 : 负责dom/css在内存中的相关处理
布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)

2). 分线程

定时器模块 : 负责定时器的管理
事件响应模块 : 负责事件的管理
网络请求模块 : 负责Ajax请求

3). js线程

js是单线程(所以可以叫主线程)执行的(回调函数也是在主线程)

单线程特点:
1.代码从上至下依次执行
2.同步&异步同步任务可能会导致阻塞
3.同步代表:alert( ) console.log() 赋值语句
4.异步代表:定时器,事件的回调

H5提出了实现多线程的方案: Web Workers —>Worker
只能是主线程更新界面

3. 定时器问题:

定时器并不 真正按照规定时间执行
如果在主线程执行了一个长时间的操作, 可能导致延时才处理,所以不要在定时器后放很耗资源的代码段

1
2
3
4
5
6
7
8
9
var oldTime = Date.now();
setTimeout(function () {
console.log('花费的时间: ', Date.now() - oldTime);
},2000)
//千万要注意不要在定时器的后边放置任务量特别大的代码段,不然花费的时间会很长很长

for (var i = 0; i < 10000000; i++) i
console.log(i);

4. 事件循环机制

事件循环机制:

1.js是单线程的
2.所有的js代码都会在主线程执行
3.同步任务加载即执行
4.异步任务不会立即执行,而是会交给对应的管理模块
5.管理模块一直在监视异步任务是否满足条件,如果满足条件会将对应的回调放入callback queue(回调队列)
6.主线程上的同步任务执行完以后 会通过event loop(事件轮询机制)询问callback queue:

  • 查看事件是否有可执行的回调函数,如果有将回调钩到主线程上执行
  • 如果没有待会再来问

image-20210823173030400

1). 代码分类

初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
回调执行代码: 处理回调逻辑

2). js引擎执行代码的基本流程:

初始化代码===>回调代码

3). 模型的2个重要组成部分:

事件管理模块
回调队列

4). 模型的运转流程

执行初始化代码, 将事件回调函数交给对应模块管理
当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!