泉州网站制作报价,制作网站的要素,seo咨询推广找推推蛙,南宁手机平台网站建设其实在我们电脑的操作系统中#xff0c;每一个运行的程序都会由自己的进程#xff08;可能是一个#xff0c;也可能有多个#xff09;#xff0c;浏览器就是一个程序#xff0c;它的运行在操作系统中#xff0c;拥有一组自己的进程#xff08;主进程#xff0c;渲染进…其实在我们电脑的操作系统中每一个运行的程序都会由自己的进程可能是一个也可能有多个浏览器就是一个程序它的运行在操作系统中拥有一组自己的进程主进程渲染进程网络进程GPU进程....
浏览器各个进程之间是相互独立的这样不会因为一个进程的问题导致其他的进程奔溃不能使用而进程之间又是需要相互协作的。
01主进程
管理整个的浏览器窗口用户界面地址栏书签栏等等他还负责创建和销毁渲染进程并通过进程之间的IPC通信与渲染进程通信管理浏览器的各个组件
02渲染进程也成为页面进程每个独立的页面都有自己的独立渲染进程渲染引擎进行负责解析HTMLCSS,JS然后渲染到我们看到的视觉
★ 计时器和任务队列就是在该进程中该进程需要和主进程之间IPC相互通讯告诉主进程需要执行那些任务
03网络进程负责处理网络请求同时产生的跨域问题也是在网络进程中被拦截的一般浏览器中页面之间是共享一个网络进程的
04GPU进程 负责处理与图形相关的操作例如绘制网页内容、执行动画和视频解码。这可以减轻主进程和渲染进程的工作负担提高了性能。一般浏览器中页面之间是也是共享一个GPU进程
05插件进程其他进程 总结现代浏览器通常有一个主进程浏览器进程、多个渲染进程用于运行页面每个页面一个渲染进程、一个共享的网络进程处理网络请求以及一个共享的GPU进程处理图形渲染。其他进程如插件进程等也可能存在。 执行调度优先级一个进程下有多个子线程
由于渲染主线程主要分则解析js,css,html布局图层处理计时器等等操作非常繁忙
这里就有一个调度问题以前端角度
01: js执行一半的时候用户有了交互怎么处理
02js执行一半的时候有个定时器时间到了怎么处理
03js执行一半的时候请求回来了怎么处理
04...... 过程: 渲染主线程开始时循环状态每次都去任务队列查看是否有任务有任务的话就进入主线程没有进入休眠状态。 同时其他的线程的任务可以随时插入任务队列中(任务队列尾部); 有些操作(网络请求绑定事件 定时器。。。)无法立即执行的操作不能让其一致占有主线程导致其他的任务不能执行。于是渲染主线程分成了同步任务和异步任务。
当渲染主线程发生计时任务网络任务事件监听时会将任务交给对应的其他线程处理并结束当前的该任务继续后面的任务执行。
其他线程完成时将对应的回调函数包装成任务加入消息队列尾部等待执行
如图渲染主线程执行同步任务,发现该任务是计时器任务于是将该任务交给了对应的线程模块处理该任务然后继续任务队列中的其他任务然后计时线程结束后产生的任务排列到任务对列尾部 任务队列 消息队列组成消息队列先进先出 微队列: 优先级 最高 promise MutationObserver
交互队列: 优先级 高 点击
延迟队列: 优先级 中 计时器
目前浏览器我们用到的(事件循环从最高 高 中 以此执行读取)
在执行过程中一定是先把最高队列的完毕在一次后面的队列 function addDelay() {console.log(延迟1);setTimeout(() {console.log(延迟2);}, 100);delay(2000);};function addInteraction() {console.log(交互1);insectDOM.onclick () {console.log(交互2);};delay(2000);};startDOM.onclick function () {addDelay();addInteraction();console.log();};// 延迟1 交互1 交互2 延迟2// console.log(主线程: start)// setTimeout(() {// console.log( 宏任务 set1)// })// new Promise(function(onfull, onject) {// onfull(1)// setTimeout(() {// console.log( 宏任务 set2)// })// }).then(res {// console.log( 微任务 Pro1 )// })// // 异步: 宏任务 微任务// setTimeout(() {// console.log( 宏任务 set3)// new Promise(onfull {// onfull(1)// }).then(res {// console.log(------------宏任务 set3 : 嵌套 微任务-------------)// })// })// // 异步: 微任务 宏任务// new Promise(function(onfull, onject) {// onfull(1)// }).then(res {// setTimeout(() {// console.log(------------微任务 Pro2 : 嵌套 宏任务-------------)// })// })// console.log(主线程: end)
