JavaScript高级部分之线程机制与事件机制总结,如果有任何问题欢迎讨论或留言
35. 闭包终极面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun(n,o){
console.log(o)
return {
fun:function(m){
return fun(m,n)
}
}
}
var a = fun(0); //undifined
a.fun(1); //0 产生了新的闭包,但马上消失了,因为没有变量指向
a.fun(2); //0
a.fun(3); //0
var b = fun(0).fun(1).fun(2).fun(3)//undifined,0,1,2
var c = fun(0).fun(1); //undifined,0
c.fun(2); //1 产生了新闭包,但没使用,使用的仍为原c的闭包值1
c.fun(3);//1
</script>
</body>
</html>
【注意】每次调用内部函数都返回执行外部函数了,即此刻产生了新的闭包,注意是否使用新的闭包变量
36. 进程与线程
进程:
程序的一次执行,它占有一片独有的内存空间
可以通过windows任务管理器查看进程
线程:
是进程内的一个独立执行单元
是程序执行的一个完成流程
是CPU的最小的调度单元
关系:
一个进程至少有一个线程(主)
程序是在某个进程中的某个线程中执行的
相关知识:
应用程序代码必须运行在某个进程的某个线程上
一个进程中至少有一个运行的线程:主线程,进程启动后自定创建
一个进程中也可以同时运行多个线程,可以说程序是多线程运行的
一个进程内的数据可以提供其中的多个线程直接共享
多个进程之间的数据是不能直接共享的
线程池:保存多个线程对象的容器,实现线程对象的反复利用
问题:
何为多进程与多线程?
多进程运行:一应用程序可以同时启动多个实例运行
多线程在一个进程内,同时有多个线程运行
比较单线程和多线程:
多线程 优点:能有效提升CPU利用率
缺点:创建多线程开销,线程切换开销,死锁与状态同步问题
单线程 优点:顺序编程简单易懂
缺点:效率低
JS是单线程还是多线程:单线程,但是H5中的Web Workers可以多线程运行
浏览器运行是单线程还是多线程?都是多线程
浏览器是单进程还是多进程? 单进程:firefox,老版IE 多进程:chrome,新版IE
37. 浏览器内核
浏览器内核:支撑浏览器运行的最核心的程序,不同浏览器内核不一样,由很多模块组成
Chrome,Safari:webkit
firefox:Gecko
IE:Trident
360,搜狗等国内:Trident + webkit
内核由很多模块组成:
(主线程运行)JS引擎模块:负责JS程序的编译与运行
(主线程运行)html,css文档解析模块:负责页面文本的解析
(主线程运行)DOM/CSS模块:负责dom/css在内存中的相关处理
(主线程运行)布局和渲染模块:负责页面的布局和效果的绘制(内存中的对象)
。。。。。。
(分线程运行)定时器模块:负责定时器的管理
(分线程运行)时间响应模块:负责事件的管理
(分线程运行)网络请求模块:负责Ajax的请求
JS线程:
JS是单线程执行的(回调函数也是在主线程)
H5提供了实现多线程的方案:Web Workers Worker
只能是主线程更新界面(反例:一个分线程更新,一个分线程删除)
38. 定时器思考
定时器真实定时执行的吗?
定时器并不能保证真正定时执行
一般会延迟一丁点(可以接收),也有可能延迟很长时间(不能接收)
定时器回调函数是在分线程执行的吗?
在主线程执行的,JS是单线程的
定时器是如何实现的?
事件循环模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
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++){
}
}
</script>
</body>
</html>
39. JS单线程执行
如何证明JS是单线程的?
setTimeout()的回调函数是在主线程执行的
定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
为什么JS要用单线程模式,而不用多线程模式?
JavaScipt的单线程,与它的用途有关
作为浏览器脚本语言,JavaScript主要用途是与用户互动以及操作DOM
这决定了它只能是单线程,否则会带来很多负责的同步问题
代码的分类:
初始化代码
回调代码
JS引擎执行代码的基本流程:
先执行初始化代码:包含一些特别的代码 回调函数(异步执行)
设置定时器
绑定事件监听
发送ajax请求
后面在某个时刻才会执行回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
setTimeout(function(){
console.log('timeout 2222')
alert('2222222222')
},2000)
setTimeout(function(){
console.log('timieout 1111')
alert('11111111111')
},1000)
setTimeout(function(){
console.log('timeout() 0000')
})
function fun(){
console.log('fun()')
}
fun()
console.log('alert()之前')
alert('--------')//暂停当前主线程的执行,同时暂停计时,点击确定后,恢复程序执行和计时
console.log('alert()之后')
</script>
</head>
<body>
</body>
</html>
40. 事件循环模型
所有代码的分类
初始化执行代码(同步代码):包含绑定dom事件监听,设置定时器,发送ajax请求的代码
回调执行代码(异步代码):处理回调逻辑
JS引擎执行代码的基本流程:
初始化代码 --> 回调代码
模型的2个重要组成部分:
事件(定时器/DOM事件/ajax请求)管理模块
回调队列
模型的运转流程
执行初始化代码,将事件回调函数交给对于模块管理
当事件发生时,管理模块会将回调函数及其数据添加到回调队列中
只有当初始化代码执行完后(可能需要一定时间),才会遍历回调队列中的回调函数并依次执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
function fn1(){
console.log('fn1()')
}
fn1()
document.getElementById("btn").onclick = function(){
console.log('点击了btn')
}
setTimeout(function(){
console.log('定时器执行了')
},2000)
function fn2(){
console.log('fn2()')
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
41. H5 Web Workers多线程
H5规范提供了JS分线程的实现,取名为Web Workers
相关API:
Worker:构造函数,加载分线程执行的JS文件
Worker.prototype.onmessage:用于接收另一个线程的回调函数
Worker.prototype.postMessage:向另一个线程发消息
不足:
worker内代码不能操作DOM(更新UI)
不能跨域加载JS
不是每个浏览器都支持这个新特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="数值" id="number">
<button id="btn">按钮</button>
<script>
var input = document.getElementById('number')
document.getElementById('btn').onclick = function(){
var number = input.value
//创建一个worker对象
var worker = new Worker('workers.js')
//向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据'+number)
//接收worker传过来的数据
worker.onmessage = function(e){
console.log('主线程接收分线程返回的数据'+e.data)
alert(e.data)
}
}
</script>
</body>
</html>
workers,js代码:
function fibonacci(n){
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}
var onmessage = function(e){
var number = e.data
console.log('分线程接收到主线程发送的数据'+number)
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据'+result)
}
console.log('分线程的全局对象:'+this)
【注意】分线程中不能调用window方法alert,因为分线程全局对象不为window,则无法操作主界面