阅读 64

【第1293期】浏览器之美,你知道多少?

原文链接: mp.weixin.qq.com

前言

用通俗的语言,结合图片巧妙的结合,让你理解知识无压力。今日早读文章由@longyu分享。

正文从这开始~

小弟初来乍到,路经宝地,希望留下一片云彩。其实我有个宏伟的,并为之付出一生的目标:我要成为现代化一枚最具有气质,最骚气的程序猿。。。

大家好,今日为大家带来‘作为前端应该具备的浏览器知识’。

目录

  • 进程和线程

  • 浏览器多进程架构

  • 浏览器渲染进程多线程

  • 浏览器事件环

进程和线程

很多童鞋对进程和线程区分不清楚,小编也经常傻傻小迷糊。在思考中,对于非科班出身,只要搞清楚两者是做什么的。对于底层的东西,有兴趣的童鞋可以去深究。

计算机的核心是CPU,它承担了所有的计算任务。它就像一座工厂,时刻在运行。

1.XX镇上,新开了一家婚姻介绍所’CPU’。(处对象程序猿的痛~~~呜)

2.婚介所要顺利运行,首先组织架构要清楚。

部门 — 进程

分配办公区域 —CPU分配资源,空间独立

假设当前只有老板一人,兼职每个部门。比如在客户部工作,然而在其他部门的工作必须放下。这就体现了,单个CUP只能运行一个进程。任何时候都这样。

3.随业务的增长,销售部招了几名新员工。

部门的员工—线程。

员工共享资源—共享分配资源

多人协作完成任务。—多个线程完成在进程中执行任务

其实我们打开任务管理器可以看到,进程的cup占有率和内存资源大小。

总之:

(1)进程是cpu分配资源的最小单位;

(2)线程是进程的最小调度单位;

(3)以多进程形式,允许多个任务同时运行;

(4)以多线程形式,允许单个任务分成不同的部分运行;

(5)提供协调机制,一方面防止进程之间和线程之间产生冲突,另一方面允许进程之间和线程之间共享资源

浏览器多进程架构

基于上面我们对进程和线程的理解,来学习浏览器的多层架构。

理解:

  1. 浏览器是多进程;

  2. 每个tab页面是新开一个进程;

浏览器包括哪些进程:

1.browser进程(主进程):负责协调和主控,只有一个。

2.第三方插件:每个类型一个进程。

3.GPU进程:3D绘制。

4.render渲染进程:浏览器渲染进程,每个tab页,单独一个进程,互不影响。

浏览器的多进程优势

  • 页面奔溃,浏览器不会奔溃。

  • 插件奔溃,浏览器不会奔溃。

  • 多进程充分利用多核优势。

  • 浏览器性能稳定

浏览器渲染进程多线程

重点来了,对于前端我需要了解的是浏览器内核的多线程。。。

牢记浏览器是多线程。

概念的东西是很空洞的,我们可以用一张图进行总结哈。

接线来我将解释哈,这些线程是如何构成的事件循环机制。

浏览器事件环

js引擎的运行机制分析,由两部分组成:执行栈和队列。

js的代码都在栈中执行,对于代码而言分为同步执行和异步执行。

异步代码只有在同步代码都执行完了之后,才会执行。

上述图说明:

  1. js先将执行栈的代码执行完;

  2. 执行代码的过程中,遇到事件,定时器,http请求时,会由相依线程进行监听,等待放入队列中。

  3. 当执行栈空闲时,将会从队列中拿出事件一个个循环执行。

事件任务分为:宏任务和微任务

宏任务: 主代码,setTimeout,setInterval,IE支持的setImmediate等微任务: es6的then,Object.observe(已废弃), MutationObserver

执行顺序:

每次执行完一个宏任务,都回去清除微任务队列。

    console.log('进入程序');    setTimeout(() => {        console.log('定时器1')    }, 0)
    setTimeout(() => {        Promise.resolve().then(() => {            console.log('then1');        })    }, 0)
    Promise.resolve().then(() => {        console.log('then2');    })    // 进入程序    // then2    // 定时器1    // then1复制代码

注意这里说的是浏览的事件循环,和node的执行方式是不同的。一定要注意分开。

小编今日带来的分享就到这里了。有什么问题欢迎大家多多指教,学术交流不分高低!!

我没有车,也没有房,但是我骚啊” ———— 送给龙老板

关于本文

作者:@longyu原文:https://juejin.cn/post/1

最后,为你推荐

【第993期】总是一知半解的Event Loop