1 线程与进程
- 进程:
- 程序的一次执行, 它占有一片独有的内存空间
- 可以通过windows任务管理器查看进程
- 线程:
- 是进程内的一个独立执行单元
- 是程序执行的一个完整流程
- 是CPU的最小的调度单元
- 关系
- 一个进程至少有一个线程(主)
- 程序是在某个进程中的某个线程执行的
2 浏览器内核模块组成
内核是什么？内核是比较大的程序，比较复杂的程序
国内的浏览器都是将国外的浏览器内核加个外壳
trident安全性高，一般是webkit
1 主线程 【由js引擎来管理】
- js引擎模块 : 负责js程序的编译与运行 【js代码运行在主线程】
- html,css文档解析模块 : 负责页面文本的解析 【页面的结构】
- DOM/CSS模块 : 负责dom/css在内存中的相关处理 【页面的展示】——>最终转换成对象
- 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的DOM对象) 【确定标签的位置坐标和尺寸】
理解一个页面是如何出来的？
2 分线程 异步执行，非初始化代码
【由浏览器来进行管理】
- 定时器模块 : 负责定时器的管理 》》指定一个回调函数
- DOM事件模块 : 负责事件的管理
- 网络请求模块 : 负责Ajax请求
监听
3 js线程
- js是单线程执行的(回调函数也是在主线程)
- H5提出了实现多线程的方案: Web Workers
- 只能是主线程更新界面
alert暂停当前主线程的执行, 同时暂停计时, 点击确定后, 恢复程序执行和计时
最开始js就是简单做个广告，弹窗等；
在浏览器处理和在服务器处理完全不一样，服务器处理事情负荷很大，在浏览器对数据进行处理，减轻服务器压力，js应用而生，产生js脚本，没有脚本也可以，但是有脚本，效果很好；
分线程用于处理大量的计算，主线程用于相应用户，想要多线程必须有分线程
HTML5包括HTML、css、js三个新的内容
1.如何证明js执行是单线程的?
-
setTimeout()的回调函数是在主线程执行的
-
定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
2.为什么js要用单线程模式, 而不用多线程模式?
-
JavaScript的单线程，与它的用途有关。
-
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题
比如对标签进行更新操作，如果多线程，可能造成写错误；
只能有一个线程去更新操作界面！
3.代码的分类
-
初始化代码
-
回调代码
4.js引擎执行代码的基本流程 【非常重要】
*先执行初始化代码: 包含一些特别的代码
【非常重要！！！】
回调函数(异步执行) 【所有的初始化代码被执行之后，才可能被执行】
-
设置定时器 【回调函数此时不执行】 setTimeout
-
绑定事件监听【回调函数事件触发时才执行，现在不执行】
-
发送ajax请求
* 后面在某个时刻才会执行回调代码
什么是回调函数？
<script type="text/javascript">
setTimeout( // 初始化代码
// 回调代码
function () {
console.log('timeout 2222')
alert('22222222')
}, 2000)
setTimeout(function () {
console.log('timeout 1111')
alert('1111111')}, 1000)
// 要等待初始化代码执行之后，才去执行
setTimeout(function () {
console.log('timeout() 00000')
}, 0)
// 初始化代码
function fn() {
console.log('fn()')
}
fn()
console.log('alert()之前')
alert('------')
// ！！暂停当前主线程的执行；同时暂停计时, 点击确定后, 恢复程序执行和计时
console.log('alert()之后')
</script>
</body>
</html>
定时器问题
- 定时器并不真正完全定时
- 如果在主线程执行了一个长时间的操作, 可能导致延时才处理
1.定时器真是定时执行的吗?
-
定时器并不能保证真正定时执行
-
一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
2.定时器回调函数（内部的函数）是在分线程执行的吗?
- 在主线程执行的, js是单线程的
- 回调函数和非回调函数都是在主线程执行的
3.定时器是如何实现的?
- 事件循环模型(后面讲)
3 事件处理机制(图)
- 代码分类
- 初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
- 回调执行代码: 处理回调逻辑
- 模型的运转流程
- 执行初始化代码, 将事件回调函数交给对应模块管理
- 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
- 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
事件驱动模型图
堆中是一个个对象
1.所有代码分类
-
初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
-
回调执行代码(异步代码): 处理回调逻辑
2.js引擎执行代码的基本流程:
- 初始化代码===>回调代码
3.模型的2个重要组成部分:
-
事件(定时器/DOM事件/Ajax)管理模块
-
回调队列
4.模型的运转流程
-
执行初始化代码, 将事件回调函数交给对应模块管理
-
当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
-
只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
初始化代码中两个特殊的代码：
- 启动定时器 set timeout将回调函数交给，都是分线程执行，是浏览器管理的，不是js主线程
- 绑定事件监听
4 H5 Web Workers
【实际开发很少用，面试会问】
为了不阻塞主线程，而采用的
-
可以让js在分线程执行
-
Worker
var worker = new Worker('worker.js'); // 异步执行，不用管顺序 // 2 收数据 worker.onMessage = function(event){event.data} : 用来接收另一个线程发送过来的数据的回调 // 1 发数据 worker.postMessage(data1) : 向另一个线程发送数据 -
问题:
- worker内代码不能操作DOM更新UI
- 不是每个浏览器都支持这个新特性
- 不能跨域加载JS
-
svn版本控制
-
svn server
1.H5规范提供了js分线程的实现, 取名为: Web Workers
2.相关API
* Worker: 构造函数, 加载分线程执行的js文件
* Worker.prototype.onmessage: 用于接收另一个线程的回调函数
* Worker.prototype.postMessage: 向另一个线程发送消息
3.不足 这是新特性
-
worker内代码不能操作DOM(更新UI) 【对象不是window，因此】
-
不能跨域加载JS 虚拟路径和真实路径
-
不是每个浏览器都支持这个新特性
-
慢，分线程慢
基本的DOM 操作一定会
递归的效率比较低，本质是函数嵌套
// 1 主线程
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
//创建一个Worker对象
var worker = new Worker('worker.js')
// 22 绑定接收消息的监听
worker.onmessage = function (event) {
console.log('主线程接收分线程返回的数据: '+event.data)
alert(event.data)
}
// 11 向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据: '+number)
}
// console.log(this) // window
// 2 分线程
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}
console.log(this)
// 22
this.onmessage = function (event) {
var number = event.data
console.log('分线程接收到主线程发送的数据: '+number)
var result = fibonacci(number)
// 11
postMessage(result)
console.log('分线程向主线程返回数据: '+result)
// alert(result) alert是window的方法, 在分线程不能调用
// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}
分线程中不能定义界面，alert也是界面；
线程中的全局对象不再是window, 所以在分线程中不可能更新界面
整理不易，关注和收藏后拿走！
欢迎专注我的公众号：AdaCoding
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
