深入理解 JavaScript 代码执行机制

标签: 原理探讨  javascript  chrome  前端

深入理解 JavaScript 代码执行机制

前言

本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。

1、餐前甜品

如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。

let element = document.querySelector('.test');
    num = 0,
    start = null;

function step(timestamp) {
  console.log('requestAnimationFrame');
  if (!start) start = timestamp;
  var progress = timestamp - start;

  const p = new Promise((resolve, reject) => {
    resolve('then');
  }).then(() => {
    console.log('promise1111');
  });

  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 3000) {
    window.requestAnimationFrame(step);
  }
}

document.body.onscroll = function(ev) {
  console.log('我被滚动了');
}

window.requestAnimationFrame(step);

// 试试将 16改成18,在看看打印的代码顺序
setTimeout(() => {
  console.log('setInterval');
}, 16); 

const p = new Promise((resolve, reject) => {
  console.log('promise');
  resolve('then');
}).then(() => {
  console.log('then');
});

2、磨刀不误砍柴工(了解浏览器原理)

(1) 进程和线程

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

进程可以类比为工厂,线程就是工厂里面的工人,一个工厂可以包含一个或者多个工人,工人之间可以相互协作,并且共享工作空间

(2) 浏览器的多进程架构

现代的浏览器采用的都是多进程架构,主要包含以下三种进程:

1.Browser进程
浏览器的主线程,主要负责浏览器的页面管理、书签、前进后退、资源下载管理等,整个浏览器应用程序只有一个,对应上述浏览器组成中的浏览器引擎。

2.渲染进程
内核进程、负责页面渲染、JS执行,对应的是上述的渲染引擎和JS引擎,一个浏览器可以包含多个渲染进程,每个Tab窗口页对应一个渲染进程

3.GPU进程
负责GPU渲染,整个浏览器应用程序只有一个

4.插件进程
浏览器安装的插件(扩展程序),每个插件会创建一个进程

这种多进程浏览器架构主要有如下优势:

  • 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引擎如下:

浏览器 渲染引擎 JS引擎
IE Trident Chakra
Edge EdgeHTML Chakra
Firefox Gecko SpiderMonkey
Chrome Webkit -> Blink V8(著名的)
Safri Webkit Javascriptcore
Opera Presto->Blink Carakan

了解了浏览器的渲染进程之后我们再来看看JS引擎。

3、正餐(JS引擎)

javascript 是单线程执行,且是 **逐帧 **执行。这个时候有人就要抬杠了,说webWorker 不是可以支持多线程么?没错,webworker 是可以开启子线程,但是此线程并不能操作dom。

js 代码执行分同步任务和异步任务,异步任务在当前同步任务队列执行完成后在依次执行。在 ES6中,又将异步任务分为了宏任务(macrotask)和微任务(microtask)。

ps: node 环境的任务不在此文讨论

(1) 宏任务

分类:

  • setTimeout
  • setInterval
  • I/O
  • UI交互事件
  • postMessage
  • MessageChannel

(2) 微任务

分类:

  • Promise.then
  • MutationObserver

(3) event-loop (任务事件执行顺序)

js 主线程先执行同步任务,遇见微任务和宏任务就将其交给事件线程处理,进行堆栈。当当前同步任务执行完成后,会读取当前的微任务队列。如果有,则依次执行。如果没有,则寻找是否有异步队列。如果有,则执行当前异步任务。如此反复,直至任务完成。

图解:
在这里插入图片描述

(4) requestAnimationFrame 是属于宏任务还是微任务?

其实,requestAnimationFrame 既不属于宏任务也不属于微任务。那么它在何时执行呢?答案就是:浏览器会在下一帧开始的时候把它加入到 微任务(microtask) 队列的最前方。

答案解析

在这里插入图片描述
所以上方的代码的代码解析就是 js 代码在每一帧的执行,永远是同步任务执行,然后在执行异步操作的时候,先清空微任务队列,然后在根据浏览器策略来判断 requestAnimationFrame 在哪一帧开始执行,最后清空宏任务队列。

最后,有兴趣的童鞋可以将上方的代码拷贝到本地,将 setTimeout 的数值改一下,然后会出现不一样的现象。有什么疑问欢迎在评论去留言,也欢迎吐槽。

版权声明:本文为qq_37534923原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37534923/article/details/106499047

智能推荐

双路快速排序法

快速排序法的优化——双路快速排序 上一节我们自己动手写的一个快速排序的算法,在随机数测试中表现得非常好,然而,我们在用高度有序的数组进行测试的时候,发现快速排序的效率变得异常的低下,比归并排序的效率低得多了,近似退回了O(n^2)的复杂度,这是为什么呢?首先让我们来分析一下归并排序的算法思想,归并排序之所以能够达到O(logn)的复杂度,多亏了递归,递归使得把数组不断的二分...

android问题记录

Error: Cannot fit requested classes in a single dex file (# methods: 80441 > 65536) 解决办法: gradle文件的defaultConfig默认配置里面增加...

ROS机器人Diego 1# 利用人工智能 风格迁移技术拍摄不同画风的视频

风格迁移,就是将一种图片的风格迁移到其他图片上,改变其他图片的风格,很好玩的一个人工自能模型,github上已经有很多实现的方法,本文参考https://github.com/hzy46/fast-neural-style-tensorflow 的算法,利用Diego1#的平台实现实时视频的风格转换,先上两张图看效果: 是不是很酷呢,其实实现方法和上篇博文中的原理是一样的,只是把人工智能的算法包装...

猜你喜欢

数据分析学习总结笔记17:文本分析入门案例实战

文章目录 1 数据准备 2 分词 3 统计词频 4 词云 5 提取特征 6 用sklearn进行训练 1 数据准备 数据样例如下, 数据总量为7.7万+: 本节通过一个实战的例子来展示文本分析的最简单流程。首先设定因变量为原始数据中的"评分"。自变量是"评价内容",这里根据评价内容提取TF-IDF特征。之后,通过评价内容的特征建模预测下整体评分。 以上只是最...

LeetCode 150. 逆波兰表达式求值

题目描述 根据逆波兰表示法,求表达式的值。 有效的运算符包括 +, -, *, / 。每个运算对象可以是整数,也可以是另一个逆波兰表达式。 整数除法只保留整数部分。 给定逆波兰表达式总是有效的。 换句话说,表达式总会得出有效数值且不存在除数为 0 的情况。 示例 1: 输入:[“2”, “1”, “+”, “3&r...

并查集原理及应用

并查集 树形的数据结构,每个集合有其代表节点,代表节点相同的元素属于同一集合。 find:通过查找节点的代表节点,判断节点所属集合。 union:合并两集合,小集合合并到大集合,使用大集合的代表节点。 在find的递归过程中,让路过节点的父节点直接赋值为代表节点,节省下次查找时间,如图所示。 计算岛的个数 遍历二维数组,遇到1时就将所相连的1都改为2,看看遇到多少次1,就是岛的数量。改数时使用回溯...

linux nutch1.0安装配置

1,下载nutch1.0 下载地址:http://archive.apache.org/dist/nutch/,下载这个文件nutch-1.0.tar.gz   2,上传到服务器 上传位置:/home/www/,解压nutch-1.0.tar.gz #tar -xvf nutch-1.0.tar.gz 重命名 #mv nutch-1.0 nutch   3,修改配置文...

如何搭建自己的博客?附加美化

如何搭建自己的blog?附加美化 前言: 之前在腾讯云以学生优惠租了一年的服务器,还买了一年的域名,忽然觉得不能闲置着域名,所以搭建了个博客,过程也遇到了很多的问题,望在此阐述,予以他人帮助,祝好~ 准备工作:使用Xshell连接上Linux服务器,我的是centos系统,方便进行操作。使用Xftp连接上Linux服务器,方便传输文件。 安装apache服务器:yum install httpd ...