进程到浏览器渲染机制(自用)

66 阅读4分钟

1.进程

举例理解:

- 进程是一个工厂,工厂有它的独立资源

- 工厂之间相互独立

- 线程是工厂中的工人,多个工人协作完成任务

- 工厂内有一个或多个工人

- 工人之间共享空间

下图所示,进程。

image.png

官方解释:

  • 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
  • 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程.

chrome为多进程,cpu为图中每个进程分配了资源。 image.png。 浏览器中的进程 image.png 从图中可以看到浏览器有多个进程。 浏览器进程,

进程作用
浏览器进程浏览器主页面显示(标签,交互按钮)网络下载,创建新标签页
第三方插件进程每种类型的插件对应一个进程,仅当使用该插件时才创建
GPU进程最多一个用于3D绘制
浏览器渲染进程用来做页面渲染的包含(渲染主线程,合成线程,光栅化线程等)

2.线程

单线程和多线程是指一个进程中有一个或者一个以上线程。 每个进程内,需要至少一个线程进行具体任务的执行(比如浏览器(页面的渲染线程,定时线程,合成线程,网络线程等等))

3.浏览器渲染主线程

浏览器网页的渲染和加载主要是渲染主进程来处理。(html,css,js解析等等) 本身渲染线程为单线程,所以它采用了一种执行任务机制(event/message-loop) 浏览器在开始运行后,渲染主线程会开启一个无限循环,每个循环结束就会从他的任务队列中获取最前面的任务放到主线程执行,循环往复直到任务队列中任务全部执行完成,进入休眠。 再此期间,其他线程随时可以往队列中添加新任务等待回调。主线程依次获取执行。 队列: 先进先出特性。

队列的种类

微队列,(交互队列,定时队列)宏队列

优先级

微队列先执行,主线程执行完所有的微任务后,才会调用宏队列中的第一个顺序执行。

示例代码:

(async () => {
// settimeout 属于宏任务(定时队列)优先级最低
setTimeout(function() {
    console.log('setTimeout 1');
    new Promise(function(resolve) {
        // new Promise中的代码为同步代码按照调用顺序执行。
        console.log('promise 1');
        resolve(); // 意味着可以执行then中的代码了。
    }).then(function() {
        console.log('promise then') //primise.then中的代码为微任务(微任务队列)优先级最高。
    })
})

async function async1() {
    console.log( 'async1 start' ) //同步代码
    await async2(); //正常情况下 await 后面是一个promise对象,这里是个普通函数,所以就会同步执行
    console.log( 'async1 end' ) 
    await async3(); //同理上面的
}

async function async2() {
    console.log( 'async2' )
}

async function async3() {
    console.log( 'async3' )
}

console.log('eventLoop'); // 外层作用域第一个被调用的同步代码先执行。
 async1(); //开始执行async1函数。拆分微任务放入相应队列。
 
new Promise(function(resolve) {
    console.log('promise 2'); //同上同步代码
    resolve(); // 意味着可以执行then中的代码了。
}).then(function() {
    console.log('promise2 then') //同上微任务
});

new Promise(function(resolve) {
    console.log('promise 4'); //同上面的new Promsie
    resolve();
}).then(function() {
    console.log('promise4 then')
});
})()

// node环境和浏览器环境的执行结果一致。

// eventLoop
// async1 start
// async2
// promise 2
// promise 4
// async1 end
// async3
// promise2 then
// promise4 then
// setTimeout 1
// promise 1
// promise then

当async1() 前加上 await执行顺序

await async1() 
// 如果使用了await后,(等同于.then())后面的代码 等于是全部加入到微队列中。
// 按照队列先进先出的特性,就会先执行前面的微任务async1中的微任务
// 就会先输出 async2 async end async3
ps:外层的自执行函数 是为了给async1()添加awit不报错使用。

面试复习(开卷)

新增加的:

关于定时器setTimeout和setInterval. 注意事项: 这个方法本身是放在定时队列中滞后执行。

1.setTimeout官方规定延后小于4ms执行都按最少4ms执行。

2.settimeOut的执行取决于主队列和微队列中什么时候任务清空,setInterval不同的在于每个一段时间都会推入一个是事件,但是执行时间不定(取决于主队列是否空闲)就会导致某段时间内setInterval代码被连续执行的问题。