JS笔记（三）

本文主要是介绍JS笔记（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

进程与线程

进程

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

线程

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

相关知识

• 应用程序必须运行在某个进程的某个线程上
• 一个进程中至少有一个运行的线程：主线程，进程启动后自动创建
• 一个进程中也可以同时运行多个线程，我们会说程序是多线程运行的
• 一个进程内的数据可以供其中的多个线程直接共享
• 多个进程之间的数据是不能直接共享的
• 线程池：保存多个线程对象的容器，实现线程对象的反复利用

相关问题

何为多进程与多线程

多进程：一应用程序可以同时启动多个实例运行
多线程：在一个进程内，同时有多个线程运行

比较单线程与多线程

多线程
优点：能有效提升CPU的利用率
缺点：

• 创建多线程开销
• 线程间切换开销（时间片轮转调度）
• 死锁与状态同步问题

单线程
优点：顺序编程简单易懂
缺点：效率低

JS是单线程还是多线程

• JS是单线程运行的
• 但使用H5中的Web Workers可以多线程运行

浏览器运行是单线程还是多线程

都是多线程运行的

浏览器运行是单进程还是多进程

有单进程也有多进程；单进程：老版的firefox,老版的IE。多进程：Chrome 新版的IE

浏览器内核

• 支撑浏览器运行的最核心的程序
• 不同的浏览器可能不一样
• 内核由多个模块组成

浏览器内核的模块组成

主线程

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

分线程

• 定时器模块：负责定时器的管理
• 事件响应模块：负责事件的管理
• 网络请求模块：负责ajax请求
• …

定时器的一些思考

定时器真是定时执行吗？

• 定时器并不能保证真正定时执行
• 一般会延迟一点，也有可能延迟很长时间

<button id = 'btn'>启动定时器</button>
document.getElementById('btn').onclick = function (){
	var start = Date.now();
	console.log('启动定时器前')
	setTimeout(function (){
		console.log('定时器执行了',Date.now() - start);
	},200)
	console.log('启动定时器后')
    //做长时间的工作
    for(var i = 0;i < 1000000000; i++){
    }
};

定时器回调函数是在哪个线程执行的

• 在主线程中执行的，JS是单线程的

定时器是如何实现的

事件循环模型

对JS是单线程执行的一些问题

如何证明js执行是单线程的

• setTimeout()的回调函数是在主线程执行的
• 定时器的回调函数只有在运行栈的代码全部执行完后才有可能执行

setTimeout(function (){
	console.log('timeout 2222')
},2000)
setTimeout(function (){
	console.log('timeout 1111')
},1000)
setTimeout(function (){
	console.log('timeout 0000')
},0)
function fun (){
	console.log('fn()')
}
fn()
console.log('alert()之前');
alert('-----');
console.log('alert()之后');

alert作用：暂停当前主线程的执行，同时暂停计时，点击确定后，恢复程序执行和计时

console.log(‘timeout 0000’)这条语句在console.log(‘alert()之前’);以及console.log(‘alert()之后’);之后输出

为什么JS要用单线程模式，而不用多线程模式？

• 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM
• 这决定了他只能是单线程，否则会带来很复杂的同步问题。
• 假如有多个线程，线程1想修改，线程2想删除；此时线程1正准备修改，结果时间片轮转到线程2，线程2将其删除，之后轮转到线程1，线程1 刚判断过数据的存在，就会直接进到下一步更新。数据已经没有了，此时就会报错

JS引擎执行代码的基本流程

先执行初始化代码，包含以下一些特别的代码 回调函数（异步执行）

• 设置定时器
• 绑定监听
• 发送ajax请求
  后面在某个时刻才会执行回调代码

事件循环模型

代码分类：

• 初始化执行代码（同步代码）：包含绑定DOM事件监听，设置定时器，发送ajax请求的代码
• 回调执行代码（异步代码）：处理回调逻辑

模型的2个重要组成部分：

• 时间（定时器/DOM事件/Ajax）管理模块
• 回调队列

模型的运转流程

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

Web Workers（多线程）

介绍

• Web Workers是HTML5提供的一个JavaScript多线程解决方案
• 我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面
• 但是子线程完全受主线程控制，且不得操作DOM（只能是主线程才能操作页面），所以这个标准并没有改变JavaScript单线程的本质

相关API

• Worker：构造函数，加载分线程执行的JS文件
• Worker.prototype.onmessage：用于接受另一个线程的回调函数
• Worker.prototype.postMessage：向另一个线程发送消息

不足

• 慢（使用它是因为它不阻塞页面）
• worker内代码不能操作DOM
• 不能跨域加载JS
• 不是每一个浏览器都支持这个新特性

小知识

alert是window的方法，console是浏览器的属性，在分线程中，看不见window，因此alert会报错，但是console.log不会，因为console是浏览器的属性。

分线程中的全局对象不再是window，所以在分线程中不能操作界面

这篇关于JS笔记（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！