283 JavaScript 事件处理机制，事件循环模型
Posted Keep going
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了283 JavaScript 事件处理机制，事件循环模型相关的知识，希望对你有一定的参考价值。
一、线程与进程
- 进程:
- 程序的一次执行, 它占有一片独有的内存空间 【独有】
- 可以通过windows任务管理器查看进程
- 线程:
- 是进程内的一个独立执行单元
- 是程序执行的一个完整流程
- 是CPU的最小的调度单元
- 关系
- 一个进程至少有一个线程(主)
- 程序是在某个进程中的某个线程执行的
1. 进程：程序的一次执行, 它占有一片独有的内存空间
2. 线程： CPU的基本调度单位, 是程序执行的一个完整流程
3. 进程与线程
* 一个进程中一般至少有一个运行的线程: 主线程
* 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
* 一个进程内的数据可以供其中的多个线程直接共享
* 多个进程之间的数据是不能直接共享的
4. 浏览器运行是单进程还是多进程?
* 有的是单进程
* firefox
* 老版IE
* 有的是多进程
* chrome
* 新版IE
5. 如何查看浏览器是否是多进程运行的呢?
* 任务管理器==>进程
6. 浏览器运行是单线程还是多线程?
* 都是多线程运行的二、浏览器内核模块组成
- 主线程
- js引擎模块 : 负责js程序的编译与运行
- html、css文档解析模块 : 负责页面文本的解析
- DOM/CSS模块 : 负责dom/css在内存中的相关处理
- 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
- 分线程
- 定时器模块 : 负责定时器的管理
- DOM事件模块 : 负责事件的管理
- 网络请求模块 : 负责Ajax请求
1. 什么是浏览器内核?
* 支持浏览器运行的最核心的程序
2. 不同的浏览器可能不太一样
* Chrome, Safari: webkit
* firefox: Gecko
* IE: Trident
* 360,搜狗等国内浏览器: Trident + webkit
3. 内核由很多模块组成
* html,css文档解析模块 : 负责页面文本的解析
* dom/css模块 : 负责dom/css在内存中的相关处理
* 布局和渲染模块 : 负责页面的布局和效果的绘制
* 布局和渲染模块 : 负责页面的布局和效果的绘制
* 定时器模块 : 负责定时器的管理
* 网络请求模块 : 负责服务器请求(常规/Ajax)
* 事件响应模块 : 负责事件的管理三、js线程
- js是单线程执行的(回调函数也是在主线程)
- H5提出了实现多线程的方案: Web Workers
- 只能是主线程更新界面
四、定时器问题
- 定时器并不真正完全定时
- 如果在主线程执行了一个长时间的操作, 可能导致延时才处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_定时器引发的思考</title>
</head>
<body>
<button id="btn">启动定时器</button>
<!--
1. 定时器真是定时执行的吗?
* 定时器并不能保证真正定时执行
* 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
2. 定时器回调函数是在分线程执行的吗?
* 在主线程执行的, js是单线程的
3. 定时器是如何实现的?
* 事件循环模型(后面讲)
-->
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var start = Date.now()
console.log('启动定时器前...')
setTimeout(function() {
console.log('定时器执行了', Date.now() - start) // 697
}, 200)
console.log('启动定时器后...')
// 做一个长时间的工作
for (var i = 0; i < 1000000000; i++) {
}
}
</script>
</body>
</html>以上是关于283 JavaScript 事件处理机制，事件循环模型的主要内容，如果未能解决你的问题，请参考以下文章