浏览器的进程模型
什么是进程呢?
什么是线程呢?
浏览器有哪些进程和线程?
其中,最主要的进程有浏览器进程
、网络进程
、渲染进程
浏览器进程
:主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。网络进程
:负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。渲染进程
:渲染进程启动后,会开启一个渲染主线程,主线程负责执行 html、css、js
代码。默认情况下,浏览器会为每个标签页开启一个新的渲染进程,以保证不同的标签页之间不相互影响。将来还默认模式可能会有所改变。渲染主线程是如何工作的?
哎呀,要处理这么多的任务,这时候主线程遇到了一个前所未有的难题:如何调度任务
呢?
比如:
渲染主线程想出了一个绝妙的主意来处理这个繁琐复杂的问题:排队
这样一来,就可以让每个任务有条不紊的、持续的进行下去了。整个过程,被称之为事件循环
(w3c上称为 event loop) 或者 消息循环
(Google 上称为 message loop)。
什么是异步呢?
如果让渲染主线程等待这些任务的时机达到,就会导致主线程长期处于「阻塞」的状态,从而导致浏览器「卡死」。
渲染主线程承担着极其重要的工作,无论如何都不能阻塞! 因此,浏览器选择异步来解玦这个问题。
使用异步的方式,渲染主线程永不阻塞。
面试题: 如何理解JS的异步?
那js为何会阻塞渲染?
我们此代码为例子来分析
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js为何会阻塞渲染?</title>
</head>
<body>
<h1>Are you okay?</h1>
<button>点击换文字</button>
<script>
let h1 = document.querySelector('h1');
let btn = document.querySelector('button');
function delay(t) {
let start = Date.now();
while (Date.now() - start <= t) {
}
}
btn.onclick = function () {
h1.textContent = "你还好吗?";
delay(5000);
}
</script>
</body>
</html>
运行结果如下图
分析:为什么不是按照从上向下执行,先把英文变成中文,然后等待5s吗? 而是相反呢?
用事件循环去解释这段代码就非常明白了。
那你肯定会想,这些任务难道都没有优先级
吗?
但消息队列是有优先级的
。根据 W3C 的最新解释哈 :
在目前chrome 的实现中,至少包含了下面的队列 :
如何把任务添加到微队列呢?
例如
Promise.resolve().then(函数)
浏览器还有很多其他的队列,由于和我们开发关系不大,暂时不作考虑。
下面我们来具体看一些代码例子,来辅助理解 队列的优先级
问题。
代码例子1
setTimeout(function () {
console.log(1);
}, 0);
console.log(2);
结果
分析
console.log(2)
输出 2 。微队列 > 交互队列 >延时队列
, 微队列和交互队列为空,直接拉取延时队列的Fn执行,输出1。代码例子2
setTimeout(function () {
console.log(1);
}, 0);
Promise.resolve().then(function () {
console.log(2);
})
console.log(3);
结果
代码例子3
function a() {
console.log(1);
Promise.resolve().then(function () {
console.log(2);
});
}
setTimeout(function () {
console.log(3);
Promise.resolve().then(a);
}, 0);
Promise.resolve().then(function () {
console.log(4);
});
console.log(5);
结果
例2、3 自行分析运行结果,都是一个道理。
面试题: 阐述一下JS的事件循环?
面试题: JS中的计时器能做到精确计时吗? 为什么?