js运行机制

Posted 后小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js运行机制相关的知识,希望对你有一定的参考价值。

都是引用大佬的,只是自己做一下复习,大神详解https://segmentfault.com/a/1190000012925872#articleHeader15

1 进程和线程  工厂和流水线的关系,厂址是内存分配的资源

2 浏览器 多进程

  * Browser进程,与用户页面交互

  * renderer进程  (浏览器渲染进程 浏览器内核 )dom树的解析+ css树形结构解析=render渲染,所以css加载不会影响dom渲染,但会影响render渲染进程

  * GPU 3D绘制

3 浏览器内核各线程之间关系

线程 :js引擎线程  GUI渲染线程   事件触发线程  定时触发器线程 异步http请求线程

  * js 引擎与GUI渲染互斥,这两条流水线只有一个供料口

  * 事件触发线程管理任务队列,一旦事件被触发,就被添加到任务队列,等待js 引擎执行

   * 定时触发器线程有setInterval 和setTimeout 两个函数,setInterval尽量不用,因为太精确了,js单线程注定不能太精确,时间间隔虽然是0,但系统默认最小是4ms

4 浏览器渲染

  * 简单图层和复合图层

    主要是硬件加速构造复合图层 

      1>opaicity,注意要用z-index,因为后续元素index层次等级比该元素高,默认为也是复合图层,耗费资源  2>translate 

5  事件循环

  

  事件触发线程管理task即宏事件,js引擎管理jobs,在一次task之间执行所有jobs

 

以上是关于js运行机制的主要内容,如果未能解决你的问题,请参考以下文章

浏览器Js运行机制

作为前端你了解JavaScript运行机制吗?

js运行机制 (包括宏任务微任务,同步异步,事件循环机制Event Loop)面试常问

试着讲清楚:js代码运行机制

浅谈js运行机制(线程)

js的异步运行机制