浏览器组成和各引擎工作原理
栏目: JavaScript · 发布时间: 5年前
内容简介：这里面最核心的就是渲染引擎和JS引擎，后面会详细介绍这两个引擎的相关内容。常见浏览器的渲染引擎和JS引擎如下：
1.浏览器的主要构成部分
- 1.用户界面
- 2.浏览器引擎(负责窗口管理、Tab进程管理等)
- 3.渲染引擎(有叫内核，负责HTML解析、页面渲染)
- 4.JS引擎(JS解释器，如Chrome和Nodejs采用的V8)
这里面最核心的就是渲染引擎和JS引擎，后面会详细介绍这两个引擎的相关内容。
常见浏览器的渲染引擎和JS引擎如下：
| 浏览器 | 渲染引擎 | JS 引擎 |
|---|---|---|
| IE | Trident | Chakra |
| Edge | EdgeHTML | Chakra |
| Firefox | Gecko | SpiderMonkey |
| Chrome | Webkit -> Blink | V8(著名的) |
| Safri | Webkit | Javascriptcore |
| Opera | Presto->Blink | Carakan |
注：新版本的Chrome采用的渲染引擎是Blink，Blink是由谷歌团队从Webkit衍生开发出来的引擎，主要有应用到Chrome和Opera浏览器。
2.从进程和线程的角度来理解浏览器工作
1）进程和线程
- 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
- 线程是cpu调度的最小单位（线程是建立在进程的基础上的一个程序运行单位，一个进程中可以有多个线程）
进程可以类比为工厂，线程就是工厂里面的工人，一个工厂可以包含一个或者多个工人，工人之间可以相互协作，并且共享工作空间
2）浏览器的多进程架构
现代的浏览器采用的都是多进程架构，主要包含以下三种进程：
1.Browser进程
浏览器的主线程，主要负责浏览器的页面管理、书签、前进后退、资源下载管理等，整个浏览器应用程序只有一个，对应上述浏览器组成中的浏览器引擎。
2.渲染进程
内核进程、负责页面渲染、JS执行，对应的是上述的渲染引擎和JS引擎，一个浏览器可以包含多个渲染进程，每个Tab窗口页对应一个渲染进程
3.GPU进程
负责GPU渲染，整个浏览器应用程序只有一个
4.插件进程
浏览器安装的插件(扩展程序)，每个插件会创建一个进程
当打开上面两个Tab时，Chrome任务管理器截图：主要包括
- 1个浏览器进程
- 1个GPU进程
- 1个网络进程
- 2个渲染进程(对应一个Tab一个进程)
- 4个扩展程序进程
MAC的活动监视器中的chorme进程，可以看到所有的渲染、扩展、GPU、网络进程都统一显示为Google Chrome Helper。
这种多进程浏览器架构主要有如下优势：
- 1.避免单个页面奔溃影响整个浏览器
- 2.避免第三方插件奔溃影响整个浏览器
- 3.充分利用多核优势
3）浏览器的渲染进程
- 浏览器有多个渲染进程、一个Tab页面一个(相同的Tab页面可能会被合并)
- 一个渲染进程包含多个线程
一个渲染进程主要包括如下线程：
1.GUI线程(主要负责解析HTML、CSS和渲染页面)
2.JS引擎线程(负责解析和执行JS代码)
3.事件线程(控制事件循环)
4.定时器线程(处理定时器相关逻辑)
5.异步请求线程(发起Ajax时会生成该线程)
线程规则：
1.GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起，页面的更新操作会 等到JS引擎空闲时 执行，涉及任务和微任务相关知识
2.一个渲染进程同时只有一个JS解析线程在运行
3.JS引擎线程不停的处理事件线程推送到事件队列中的任务
4.定时器和异步请求最终生成的回调事件也有事件线程来控制和管理
了解了浏览器的渲染进程之后我们再来看看JS引擎。
4）从事件循环的角度来理解JS引擎的工作过程
在理解什么是事件循环之前，我们先来了解下同步和异步的概念
1.同步和异步
同步是代码执行后就可以获得想要的结果，异步是指代码执行之后不能立即获得结果，
你打电话问书店老板有没有《Javascript权威指南》这本书，如果是同步通信机制，书店老板会说，你稍等，”我查一下"，然后开始查啊查，等查好了（可能是5秒，也可能是一天）告诉你结果（返回结果）。
而异步机制，书店老板直接告诉你我查一下啊，查好了打电话给你，然后直接挂电话了（不返回结果）。然后查好了，他会主动打电话给你。在这里老板通过“回电”这种方式来返回结果。
2.同步任务和异步任务
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而是由事件线程调度，在满足执行条件的时候放到事件队列中，等待主线程(JS线程)的执行。
3.为什么要有事件循环的概念
JS包含有异步操作(如：Ajax、定时器)，这些异步操作完成之后需要通知JS引擎来处理异步操作的返回，如Ajax的Callback。这些异步操作什么时候完成是不确定的，所以需要有一个事件队列，事件线程将已经完成的异步操作的回调任务加载到事件队列中，JS引擎在执行完当前的同步任务之后循环从事件队列中取事件执行。
异步任务：setTImeout、setInterval、Promise、process.nextTick(Node.js)、Ajax
同步任务：除以上异步任务
同步任务和异步任务的执行流程如下：
异步任务统一有事件线程管理，当异步任务完成的时候会被放入到事件队列中，JS在顺序执行完当前的代码之后会从事件队列中读取任务，再重复整个流程，判断该任务是同步还是异步。
4.异步任务的优先级
如果按照上述的简化理解，所有异步任务都按照满足执行条件的顺序放到事件队列中，世界很和平，先来先到，但是在ES6当中，引入了microtask的概念，microtask会在当前的任务执行完成之后立即执行。因为我们将异步任务分为task和microtask，我们又称为宏任务和微任务。
task:setTImeout、setInterval、ajax
microtask：MutationObserve、promise、process.nextTick(Node.js)
这样子加了优先级的话JS的执行又会变得再复杂一点，如下图所示，异步任务执行完成之后会判断他是task还是microtask，再分别加到不同的时间队列中，JS当前任务执行完成之后优先清空当前的microtask队列，而且在每次执行完宏任务的时候都会去清空微任务。
示例：
运行如下示例，就可以验证上述执行流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<script>
// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');
// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
});
// Here's a click listener…
function onClick() {
console.log('click');
setTimeout(function() {
console.log('timeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise');
});
outer.setAttribute('data-random', Math.random());
}
// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
</script>
</body>
</html>
5.UI渲染线程什么时候工作
UI渲染线程会在当前的Task执行完成之后，下一个Task执行之前执行，微任务会优先于UI渲染线程，这就意味着我们使用微任务更新的DOM能更快的被渲染出来。另外Vue.js最新版本数据变更的时候采用的是promise和MutationObserver创建微任务： https://github.com/vuejs/vue/...
Demo：用于理解任务和UI渲染之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue nextTick</title>
</head>
<body>
<!-- jsFiddle例子：http://jsfiddle.net/gkmzns9u/14/ -->
<div id="task">
<div id="msg">
{{msg}}
</div>
<div @click="greet">
click me!
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#task',
data: {
msg: 'hello'
},
methods: {
greet: () => {
// 修改model，触发set方法，调用update方法，添加DOM更新微任务
vm.msg = 'hello world';
vm.msg = 'hello world2';
// 查看DOM，由于是异步更新DOM，根据EventLoop原理可知，这里DOM还没有更新，
// hello
alert(document.getElementById('msg').innerHTML);
// nextTick使用promise,是个微任务，在当前greet方法执行完成之后会立即执行
vm.$nextTick().then(() => {
// 由于DOM更新微任务先被添加，先入先出，这里获取的DOM已经是更新好的
// hello world
alert(document.getElementById('msg').innerHTML);
// 直接修改DOM,同步任务
document.getElementById('msg').innerHTML = 'test'
// 立即生效
// test
alert(document.getElementById('msg').innerHTML);
/* 根据HTML Standard，一轮事件循环执行结束(包括微任务)之后，下轮事件循环执行之前开始进行UI render。即：macro-task任务执行完毕，接着执行完所有的micro-task任务后，此时本轮循环结束，开始执行UI render。UI render完毕之后接着下一轮循环。 */
});
// 由于setTimeout为宏任务，虽然延迟时间为0，但还是要晚于nextTick执行
// 而且可以明显看到在setTimeout回调执行之前页面上已经渲染上test,说明UI Render已经在setTimeout回调之前执行
setTimeout(()=>{
alert('setTimeout start')
document.getElementById('msg').innerHTML = 'setTimeout'
}, 0)
}
}
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
解构产品经理：互联网产品策划入门宝典
电子工业出版社 / 2018-1 / 65
《解构产品经理：互联网产品策划入门宝典》以作者丰富的职业背景及著名互联网公司的工作经验为基础，从基本概念、方法论和工具的解构入手，配合大量正面或负面的案例，完整、详细、生动地讲述了一个互联网产品经理入门所需的基础知识。同时，在此基础上，将这些知识拓展出互联网产品策划的领域，融入日常工作生活中，以求职、沟通等场景为例，引导读者将知识升华为思维方式。 《解构产品经理：互联网产品策划入门宝典》适合......一起来看看 《解构产品经理：互联网产品策划入门宝典》 这本书的介绍吧!
