浏览器的运行机制

浏览器的组成结构
(1)呈现引擎:负责解析html/css内容，将解析内容呈现到屏幕上
(2)js引擎:解析和执行js的内容
(3)数据存储:持久层，浏览器在硬盘上保存的数据例如cookie
(4)网络:发送网络请求例如http
(5)用户界面:地址栏/书签菜单等
(6)浏览器引擎:在用户界面呈现引擎之间传送指令
(7)用户界面后端:绘制基本窗口小部件

一.关于呈现引擎: image.png

呈现引擎将开始解析html文档，并将各个标记逐个转化为内容树上的dom节点，同时会解析外部的css文件以及样式元素中的样式数据。html中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树(呈现树包含带有多个视觉属性如颜色和尺寸的矩形，这些矩形的排列的顺序就是它们将在屏幕上的显示顺序)，呈现树构建完毕后进入布局处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标，然后开始绘制，呈现引擎遍历呈现树，呈现引擎会尽力将内容显示在屏幕上，也就是不必等html文档解析完后就可以开始构建呈现树和设置布局

image.png
呈现引擎采用单线程，几乎所有的操作除了网络操作都采用的是单线程，该线程是浏览器的主线程，浏览器的主线程是事件循环，它是一个无限循环永远处于接受处理状态，并等待(事件和绘制事件的发生)，并进行处理

二.关于js引擎
1）js引擎与es：es规定了js的语法规则，而最终的js代码是要被解释成为计算机识别的语言，而js引擎就是根据es语法规定来翻译js语句
2）js引擎与浏览器：js引擎是浏览器的组成部分，既然是浏览器的组成部分也就是说js引擎是由浏览器厂商来开发的，所以在js引擎解析js语言的时候也会难免有些差异
3）js语言是单线程的：js脚本用于和用户直接交互，如果js语言为多线程，两个线程同时执行dom的添加和删除操作我们的页面将该如何渲染呢
4）单线程的缺点：
（1）计算量大时候会影响后面数据的渲染
（2）i/o执行 ajax发送请求网络数据，cpu闲置在js中解决这一问题引入了同步和异步。同步：在主线程中排队执行的任务，异步：很容易想到回调函数，这里要说清楚哦，异步并不等于回调函数，比如Ajax获取数据是个异步操作，当返回了数据或者结果，浏览器就将回调函数放进任务队列中等待主线程来读取，当主线程的执行栈的东西执行完之后，就从任务队列中读取回调函数，而异步通常就是搭配回调干活(例如Ajax请求),异步任务不进入主线程，而是先进入任务队列，只有任务队列通知主线程某个异步任务可以执行了，该异步任务进入主线程执行
5）事件和回调函数
任务队列是一个事件队列,i/o完成一项设备任务，就在任务队列中添加一个事件，表示相关异步任务可以进入执行栈了，主线程读取任务队列，就是读取里面的那些事件，任务队列中的事件，除i/o设备事件以外还有用户产生的事件比如点击事件，只要指定过回调函数这些事件发生时就会进入任务队列等待主线程读取
回调函数就是那些主线程挂起来的代码,异步任务必须指定回调函数，而主线程开始执行异步的任务其实就是在执行我们指定的回调函数

image.png

三.关于浏览器运行机制
浏览器运行机制：
(1)所有同步任务都在主线程执行，形成一个执行栈
(2)主线程之外还存在一个任务队列，只要异步任务有了结果，就在任务队列放置一个事件(比如回调函数)
(3)一旦执行栈中所有同步任务执行完毕，系统就会读取任务队列中的事件，该事件结束等待状态，进入执行栈，开始执行
(4)主线程不断重复以上步骤,，也就是说任务队列这个线程是浏览器开辟的，浏览器将js解析器解析的回调函数扔进任务队列中，等浏览器主线程js解析器解析完同步任务后，浏览器将任务队列中的任务拿回主线程扔给js解析器来继续执行

image.png

js学习（ECMAScript，DOM，BOM）https://www.jianshu.com/p/b7136540b379