在网上发现了一篇很好的博客文章,对浏览器进程线程、Web Workers、Event Loop 等都解释得通俗易懂。在此,我根据其内容作了几张思惟导图,对照着文章看可加深理解。若有更好的理解,欢迎探讨。
博客地址是: http://www.dailichun.com/2018...css
在系统的任务管理器中能够查看当前正在运行的各类进程。
打开 chrome 的任务管理器,能够看到当前浏览器里的进程。在这里浏览器应该也有本身的优化机制,有时候打开多个tab页后,能够在Chrome任务管理器中看到,有些进程被合并了,以下图:html
请牢记,浏览器的渲染进程是多线程的chrome
本质上就是进程和线程的区别。SharedWorker由独立的进程管理,WebWorker只是属于render进程下的一个线程promise
简单版:浏览器
复杂版:网络
检验是否理解事件循环,不依靠控制台,猜一下下面的结果:数据结构
提示: async 会返回 Promise 对象; await 会等待 Promise 对象完成,期间会让出线程。
async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } async function async2(){ console.log('async2') } console.log('script start') setTimeout(function(){ console.log('setTimeout') },0) async1(); new Promise(function(resolve){ console.log('promise1') resolve(); }).then(function(){ console.log('promise2') }) console.log('script end')
再看看修改版的结果会是啥:多线程
async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } function async2(){ // 去掉了 async 关键字 console.log('async2'); } console.log('script start') setTimeout(function(){ console.log('setTimeout') },0) async1(); new Promise(function(resolve){ console.log('promise1') resolve(); }).then(function(){ console.log('promise2') }) console.log('script end')