Javascript

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笔记(三)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!