JS进阶知识——（四）线程机制与事件机制

最新推荐文章于 2024-12-12 15:08:19 发布

MQY_study

最新推荐文章于 2024-12-12 15:08:19 发布

阅读量380

点赞数

分类专栏： JS学习文章标签：开发语言 javascript

本文链接：https://blog.csdn.net/js_bbasic/article/details/127959212

版权

JS学习专栏收录该内容

7 篇文章

订阅专栏

一般属于操作系统这里简简单单水一篇文章。

文章目录

前言

不是特别重要操作系统会详学这个，这里就简简单单水一篇

一、进程与线程

<title></title>
		<!-- 
		 1.*线程是进程内的一个独立执行单元
		 *是程序执行的一个完整流程
		 *是CPU的最小调度单元
		 
		 2*应用程序必须运行在某个进程的某个线程上
		 *一个进程中至少有一个运行的线程：主线程，进程启动后自动创建
		 *一个进程中也可以同时运行多个线程，我们会说程序是多线程运行的。
		 *一个进程内的数据可以提供其中的多个线程直接共享
		 *多个进程之间的数据是不能直接共享的
		 *线程池： 保存多个线程对象的容器，实现线程对象的反复利用。
		 
		 多线程：一个进程内 同时有多个线程运行
		 多进程：一个应用程序可以同时启动多个实例运行。
		 
		 单线程与多线程的对比：
		 *多线程优点：能有效提升cpu的利用率  缺点  创建多线程开销  线程间切换开销  死锁与状态同步问题  （单核也可以多线程 来回切换进行）
		 *单线程优点：顺序编程简单易懂   缺点：效率低！。
		 
		 
		 JS是单线程的
		 浏览器的运行是多线程的
		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
			
		</script>

二、浏览器内核

		<title></title>
		<!--浏览器内核里的模块：
		 *js引擎模块：负责js程序的编译和运行          ——————————————————————
		 *html css文档解析模块：负责页面文本的解析                          |
		 *DOM/CSS模块：负责dom/csss在内存中的相关处理。                     |——主线程
		 *布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）———————————
		 *……
		 *定时器模块：负责定时器的管理  ——————|
		 *事件响应模块：负责事件的管理        |——分线程。
		 *网络请求模块：负责ajax请求——————————

		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
			
		</script>

三、关于定时器的思考

		<title></title>
	</head>
	<!-- 1.定时器的执行真的是准时的嘛？
	通过下面的代码 我们可以看到不是准时的。可能延迟一小点（可以接受）  也可能会延迟很久 （不能接受）在代码里加上一个大数值的循环。
	 
	 2.定时器的执行是在主线程执行的！  JS是单线程的
	 
	 3.定时器到底是怎么实现的？  涉及到事件循环模型————放在后面说
	 -->
	<body>
		<button type="button" id="btn1">启动定时器</button>
		<script type="text/javascript">
		document.getElementById('btn1').onclick = function(){
			var start = Date.now()
			console.log("启动定时器前……………………")
				setTimeout(function(){
					console.log('定时器执行了',Date.now()- start)
				},200)
			console.log("启动定时器后…………………………")
			
			
			
		}
		
		</script>

四、 JS单线程特性

<title></title>
		<!-- 
		 1.如何证明js执行单线程？
		 *settimeout 回调函数是在主线程执行的
		 *定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
		 
		 2.为什么JS要用单线程模式，而不是多线程模式？
		 *JS的单线程 与他的用途有关
		 *作为浏览器的脚本语言，js的主要用途是与用户互动，以及操作DOM
		 *这决定了它只能是单线程，否则会带来很复杂的同步问题
		 
		 3.代码的分类  * 初始化代码                                 *回调代码
		              启动定时器 绑定事件监听等                     
		 4.js引擎执行代码的基本流程
		 *先执行初始化代码：包含一些特别的代码  回调函数异步执行  在初始化代码执行后才可能得到执行
		 *设置定时器
		 *绑定监听
		 *发送ajax请求
		 *后面在某个时刻才会执行回调代码。
		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
		fn()//先输出fn 再输出两个定时器函数的输出。
		console.log("alert 之前")//先有fn 再有fn 然后弹出alert
		alert("________________")//弹出alert时 暂停主线程的执行行为。
		console.log("alert之后————")
			setTimeout(function (){
				console.log("timeout 2022")
			},2000)
			
			setTimeout(function (){
				console.log("timeout 1011")
			},4000)
			function fn (){
				console.log("fn")
			}
			
			
			
		</script>

五、事件的循环模型

		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	 1.所有代码分类：
	 *初始化执行代码（同步代码）：包含绑定dom事件监听，设置定时器，发送Ajax请求的代码
	 *回调执行代码（异步代码）：处理回调逻辑
	 
	 2.js引擎执行代码的基本流程
	 *初始化代码 ===> 回调代码
	 
	 3.模型的2个重要组成部分：
	 *事件（dom/定时器/ajax）管理模块
	 *回调队列
	 
	 4.模型的运转流程
	 *执行初始化代码，将事件回调函数交给对应的模块管理
	 *当事件发生时，管理模块会将回调函数及其数据添加到回调队列中
	 *只有当初始化代码执行完后，（可能要一定的时间）才会遍历读取回调队列中的回调函数执行。
	 
	 
	 一些概念
	 执行栈
	 浏览器内核
	 任务队列
	 消息队列
	 事件队列
	 事件轮询
	 事件驱动模型
	 请求响应模式
	 
	 -->
	 <button type="button" id="btn">TEST测试</button>
	<body>
		<script type="text/javascript">
		function fn1 (){
			console.log("fn1")
		}
		fn1()
		
			document.getElementById('btn').onclick = function(){
				console.log("点击了btn捏")//这些回调函数存储在待处理的回调队列中
			}
			setTimeout(function(){
				console.log("定时器执行了")
			},2000)
			function fn2(){
				console.log("fn2")
			}
			 fn2()
			 //先打印fn1  再 fn2  定时器和点击按钮视情况而定 
		</script>

六、H5_Webworkers 多线程

		<title></title>
		<!-- 
		 1.web workers 是HTML5提供的一个JavaScript多线程解决方案
		 我们可以将一些大计算量的代码交由 web workers来运行而不冻结用户界面
		 但是子线程完全受主线程控制，且不得操作DOM  所以这个新标准并没有改变js单线程的本质。
		 
		 使用：创建在分线程执行的js文件  
		 在主线程中的js中发消息并设置回调。 
		 
		 -->
	</head>
	<body>
		<script type="text/javascript">
			
			
		</script>