指针原来是套娃的博客 - 前端
type: channel
link: https://blog.imtwa.top/index.php/category/QD/
description: 前端相关文章
items: 一种曲折的uniapp接入第三方sdk方式
items: 手写系列一：实现防抖节流
items: vue项目commit自动格式化并提交
items: js工具函数大全
items: 详谈JavaScript发展史
items: 一篇搞定this指向问题！
items: 奇怪的HTTP状态码
items: 实体字符 entity
items: JS-什么是事件循环？

一种曲折的uniapp接入第三方sdk方式
type: item
date: 2026-06-01T10:17:10+08:00
description: uniapp当前痛点采用uniapp框架开发时，很多情况下会收到第三方原生生态的制约，一些第三方的服务可能只有安卓、ios、web的sdk，并不会单独对uniapp开发适配的sdk。如果想要用uts的方式进行接入，需要每个端都写一套适配的代码（安卓、ios或鸿蒙），这样带来的开发成本会很高。而且引入过多的sdk会提高app的内存大小，在云打包时安卓如果超过150MB，每打包一次都要收费。我们的项目就遇到了这样的问题，使用到的第三方服务没有提供uniapp版本的插件，需要手动的接入原生的sdk，非常复杂，而且sdk还有很多类型声明和官方文档上的不一致，成了开发的卡点。通过翻阅uniapp文档，我们发现了一种叫做renderjs的方式，可以在视图层运行的JS。renderjs介绍与使用官方文档：https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjsuniapp打包的app，其实是一种桥接技术，将原生能力和webview桥接起来，所以在官方文档的划分中，有逻辑层和视图层两个概念。我们编写的代码都会运行在逻辑层中，通过一种特定的通信来控制视图层，所以这样会有不少的性能损耗，也是代码里不能频繁的更新视图的原因。在逻辑层中，也没有dom相关的元素给我们使用，而视图层不一样。视图层由webview渲染，拥有dom和window，renderjs天然的处于webview环境中，可以直接操作视图dom，毫无通讯损耗。最关键的是它相当于在浏览器环境运行的代码，可以接入第三方的web端sdk，正常的获取dom和window元素，不会像逻辑层的代码一样，抛出各种不兼容。使用renderjs，需要先在template中挂载view标签，并单独写一个script。代码如下： agora可以自定义命名，rtmConfig是正常的逻辑层代码的变量，当rtmConfig绑定的数据发生改变后，会立即通知到agora的handleConfig中，这样我们就实现了逻辑层传递内容到renderjs中，函数有四个参数:newValue: 变化后的新值 oldValue: 变化前的旧值 ownerInstance: 组件实例对象，可以获取逻辑层的函数，ownerInstance.callMethod('handleRenderjsBridge', data); instance: 当前 renderjs 模块所在视图层的实例对象，通过 `instance.$el` 可以直接获取当前绑定的 DOM 元素通过document.createElement('script')挂载js，即可实现加载第三方sdk，当sdk处于本地时，h5与app上路径有些区别，app中路径为'static/js/xxx.js'，h5中使用'/static/js/xxx.js'。逻辑层通知renderjs，修改绑定的变量即可，但是renderjs通知给逻辑层就有一些曲折。因为renderjs当前只能支持vue2的代码，不支持调用setup形式中的函数，我们的处理方案是写一层vue2的script作为桥接，vue2与setup的业务逻辑中通过uni.$emit全局通讯的方式传递。这里有一个踩坑点需要注意：renderJs需要写在页面级别文件中，不能放在组件里嵌套，绑定的dom元素也需要在页面级别，不能嵌套，不然会报错Mt.setAttribute is not a function。当时排查了很久，发现从组件改到页面级文件就可以了。使用效果我们使用这套方案接入了声网RTM的sdk和国外的Stripe支付sdk，减少了很多的开发工作。在后续处理一个视频需求时，发现插件市场也有同样思路处理的视频组件，使用体验非常好，避免了很多原生video的问题：https://ext.dcloud.net.cn/plugin?id=19654以上。

手写系列一：实现防抖节流
type: item
date: 2025-03-26T21:38:00+08:00
description: 防抖和节流的区别 防抖是在指定时间内只执行一次，如果 再次触发则重新计时 ，即只处理 最后一次响应 。 节流是在指定时间内只执行一次，如果再次触发则不执行，也就是 只执行第一次，后面的触发不管，等到时间过去才再响应一次触发。 防抖常用在输入框搜索、滚动加载、表单提交等高频触发只用处理最后一次响应的地方。 节流常用在滚动监听、窗口变化等，在高频的变化中一段时间内只响应第一次变化，并给出多个中间态，以实现 平滑 的变化。手写实现防抖/** * 防抖在是指定时间内只执行一次，如果再次触发则重新计时 * 一段时间内只处理最后一次事件响应 * 定时器实现 */ function debounce(fn, delay) { let timer = null; return function (...args) { console.log(args); if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); }, delay); }; } const log = debounce((...args) => { console.log("防抖，只执行",args); }, 100); log(1, 2, 3); log(4, 5, 6); setTimeout(() => { log(7, 8, 9); }, 1000); 效果：手写实现节流/** * 节流是指定时间内只执行一次，如果再次触发则不执行 * 一段时间内只处理第一次事件响应 * 定时器实现 */ function throttle(fn, delay) { let timer = null; return function (...args) { console.log(args); // 当第一次获得定时器后，除非定时器到时清除，都会阻止后面的触发 if (!timer) { timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); } }; } /** * 时间戳实现 */ function throttle(fn, delay) { let last = 0; // 设置为0 确保第一次触发 return function (...args) { console.log(args); const now = Date.now(); // 下一次超过间隔时间才执行 if (now - last >= delay) { fn.apply(this, args); last = now; } }; } const log = throttle((...args) => { console.log("节流，只执行", args); }, 100); log(1, 2, 3); log(4, 5, 6); setTimeout(() => { log(7, 8, 9); }, 1000);效果：

vue项目commit自动格式化并提交
type: item
date: 2024-10-09T17:08:00+08:00
description: 在 Vue 项目中，全局格式化（通常指的是代码格式化、样式格式化、数据格式化等）是一个重要的实践，它有助于维护代码的一致性和可读性，促进团队协作，减少因格式不一致导致的合并冲突，以及提高代码质量。先看效果：如果出现错误的commit做到commit的时候自动格式化，需要一下几个步骤：一 配置prettier安装Prettier： npm install --save-dev prettier 或者使用yarn yarn add --dev prettier配置Prettier:项目根目录新建配置文件,配置包括.prettierrc, .prettierrc.json, 或者在package.json内的prettier字段。例如创建一个.prettierrc文件，并设置一些基本规则：基本规则:{ "eslintIntegration": true, //设置为true时，Prettier会尝试避免与ESLint中的格式化规则冲突。这意呀着，如果ESLint和Prettier在格式化代码时有不同的规则，Prettier会尽量遵循ESLint的规则（前提是你已经安装了ESLint并配置了相应的规则）。 "stylelintIntegration": true, //类似于eslintIntegration，但它是针对CSS的。设置为true时，Prettier会尝试避免与Stylelint中的格式化规则冲突。这对于Vue项目中的 部分特别有用，但请注意，Prettier对CSS的支持可能不如Stylelint全面。 "tabWidth": 2, //设置缩进时使用的空格数。在你的配置中，它被设置为2，意味着每次缩进将使用两个空格。 "printWidth": 120, //指定代码行的最大长度。Prettier会尝试将代码格式化为不超过这个宽度的行。在你的配置中，它被设置为120个字符。 "singleQuote": true, //设置为true时，Prettier将使用单引号（'）而不是双引号（"）来包裹字符串。 "semi": false, //设置为true时，Prettier会在语句末尾添加分号。这是JavaScript中常见的做法，尽管ESLint等工具可能允许在某些情况下省略分号。 "arrowParens": "avoid", //控制箭头函数参数周围的括号。在你的配置中，它被设置为"avoid"，这意味着Prettier会尽可能避免在箭头函数参数周围添加括号，除非这是必要的（例如，当参数是一个对象或数组时）。 "trailingComma": "none", //控制多行数组、对象字面量等末尾是否添加逗号。在你的配置中，它被设置为"none"，意味着Prettier不会在末尾添加逗号。 "bracketSpacing": true //设置为true时，Prettier会在对象字面量、数组字面量等的大括号{}或方括号[]内部添加空格。这有助于提高代码的可读性。 }详细版本:{ "printWidth": 200, // 指定行的最大长度 "tabWidth": 4, // 指定缩进的空格数 "useTabs": true, // 是否使用制表符进行缩进，默认为 false "singleQuote": true, // 是否使用单引号，默认为 false "quoteProps": "as-needed", // 对象属性是否使用引号，默认为 "as-needed" "trailingComma": "none", // 是否使用尾随逗号（末尾的逗号），可以是 "none"、"es5"、"all" 三个选项 "bracketSpacing": true, // 对象字面量中的括号是否有空格，默认为 true "jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐，默认为 false "arrowParens": "always", // 箭头函数参数是否使用圆括号，默认为 "always" "rangeStart": 0, // 指定格式化的范围的起始位置 "requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化，默认为 false "insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释，默认为 false "proseWrap": "preserve", // 是否保留 markdown 文件中的换行符，默认为 "preserve" "htmlWhitespaceSensitivity": "ignore", // 指定 HTML 文件中空格敏感度的配置选项，可以是 "css"、"…

js工具函数大全
type: item
date: 2024-10-09T15:30:00+08:00
description: 效验相关 /** * 手机号码 * @param val 当前值字符串 * @returns 返回 true: 手机号码正确 */ export function verifyPhone(val) { // false: 手机号码不正确 // if ( // !/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(16([0-3]|[5-9]))|(17([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test( // val // ) // ) { if (!/^1[3-9]\d{9}$/.test(val)) { return false } else { return true } } /** * 国内电话号码 * @param val 当前值字符串 * @returns 返回 true: 国内电话号码正确 */ export function verifyTelPhone(val) { // false: 国内电话号码不正确 if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false // true: 国内电话号码正确 else return true } /** * 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线) * @param val 当前值字符串 * @returns 返回 true: 密码正确 */ export function verifyPassword(val) { // false: 密码不正确 if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false // true: 密码正确 else return true } /** * 强密码 (字母+数字+特殊字符，长度在6-16之间) * @param val 当前值字符串 * @returns 返回 true: 强密码正确 */ export function verifyPasswordPowerful(val) { // false: 强密码不正确 if ( !/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test( val ) ) { return false } else { return true } } /** * 密码强度 * @param val 当前值字符串 * @description 弱：纯数字，纯字母，纯特殊字符 * @description 中：字母+数字，字母+特殊字符，数字+特殊字符 * @description 强：字母+数字+特殊字符 * @returns 返回处理后的字符串：弱、中、强 */ export function verifyPasswordStrength(val) { let v = '' // 弱：纯数字，纯字母，纯特殊字符 if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱' // 中：字母+数字，字母+特殊字符，数字+特殊字符 if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中' // 强：字母+数字+特殊字符 if ( /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test( val ) ) { v = '强' } // 返回结果 return v } /** * IP地址 * @param val 当前值字符串 * @returns 返回 true: IP地址正确 */ export function verifyIPAddress(val) { // false: IP地址不正确 if ( !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test( v…

详谈JavaScript发展史
type: item
date: 2024-09-26T14:09:00+08:00
description: JavaScript发展史 1995年Navigator公司为了可以控制浏览器行为，将某些不宜在服务端完成的操作放到客户端完成，开发了可以嵌入网页的脚本语言JavaScript，并在1996年将JavaScript正式内置在了他们的产品Navigator 2.0 浏览器中。同年，它的竞争对手微软公司，copy了JavaScript，改名叫做JScript，并搭载在IE3.0浏览器中。 Navigator为了抵制微软，规范JavaScript语言，决定将JavaScript提交给国际标准化组织ECMA（European Computer Manufacturers Association），希望为JavaScript定制一套国际标准。至此，我们熟悉的ES标准(ECMAScript)出现。 ES只是一套标准，理论上js可以运行在各种环境里，浏览器只是它的一种环境，但是具体运行还要靠各大厂商实现。ES1.0 ES1.0在1997年发布，基于JavaScript和Jscript制定了一些规范。主要规定了ECMAScript的以下组成部分： 语法， 类型， 语句， 关键字， 保留字， 操作符， 对象；ES2 ES2在1998年发布，对ES1进行了一些小的修订和澄清，但未引入重大新功能。ES3 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。可以说这一版才是对该标准第一次真正的修改，新增了对正则表达式、新控制语句、try-catch异常处理的支持，并围绕标准的国际化做出了一些小的修改，修改内容包括字符串处理、错误定义和数值输出；第3版也标志着ECMAScript成为了一门真正的编程语言，所有的现代浏览器完全支持 ECMAScript 3。 主要更新和新增功能如下：正则表达式：ES3引入了正则表达式支持，这是处理字符串的一个非常强大的工具。 新的控制语句：switch 和 try...catch 语句，提供了更复杂的控制流选项。 错误处理：引入了try...catch和throw语句，用于异常处理。 新的字符串方法：例如charAt(), charCodeAt(), concat(), indexOf(), lastIndexOf(), slice(), substring(), toLowerCase(), toUpperCase(), 和split()。 新的数组方法：例如concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), 和unshift()。 国际化支持：增加了对Unicode的基本支持，以及一些国际化相关的函数。 更严格的错误检查：ES3对某些类型错误进行了更严格的检查，例如在赋值时类型不匹配。 行为一致性：对一些语言特性进行了规范，以确保不同实现之间的行为一致性。 保留字：ES3规范定义了更多的保留字，以避免在未来版本的JavaScript中出现命名冲突。ES4阶段 在ES3发布后的十年里，web开发逐渐兴起，各种更新讨论踊跃而出，ECMA TC39重新召集相关人员共同谋划，结果，出台后的标准几乎是在第3版的基础上完全定义了一门新语言；第4版不仅包含了强类型变量、新语句和新的数据结构、真正的类和经典继承，还定义了与数据交互的新方式。 技术专家委员会成员包括 Microsoft、Mozilla、Google 等大公司；各方对于是否通过这个标准，发生了严重分歧；以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案； 由于各方意见不统一，ES4未能成为正式标准，在ES3发布后的10年里，ES标准并未做大更新。ES5 2009年12月3日，ECMAScript 5.0版正式发布；第5版力求澄清第3版中已知的歧义并添加了新的功能，包括原生JSON对象、继承的方法和高级属性定义，以及严格模式；随着时间的推移，所有的现代浏览器已经完全支持 ES5； 除了ECMAScript的版本，很长一段时间中，Netscape公司（以及继承它的Mozilla基金会）在内部依然使用自己的版本号，这导致了JavaScript有自己不同于ECMAScript的版本号；1996年3月，Navigator 2.0内置了JavaScript 1.0；JavaScript 1.1版对应ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0； JavaScript 1.5版完全兼容ECMA…

一篇搞定this指向问题！
type: item
date: 2024-09-13T11:33:00+08:00
description: 大佬说，要搞定this指向问题就要理解谁有this，this又指向什么东西。重点记住一句话：this是存在执行上下文中的 指向的是一个对象执行上下文 分三种 全局执行上下文 函数执行上下文 和 eval执行上下文即this只有全局、函数（箭头函数不存在this）、eval中存在，指向一个对象，在浏览器环境下全局this指向window对象请理解上面内容，尝试做一下下面几道题（浏览器环境 非严格模式）1a = 100; const obj = { a: 1, b: () => { const a = 10; console.log(this.a); }, }; obj.b();2a = 100; function b() { var a = 1000; const c = () => { var a = 1; console.log(this.a); }; c(); } b();3a = 100; function b() { const c = () => { var a = 1; console.log(this.a); }; c(); } const obj = { a: 1000, m: b, }; obj.m();4a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); }, }; const m = b.c; m();5a = 100; const b = { a: 1, c: function () { var a = 1000; console.log(this.a); (function () { console.log(this.a); })(a); }, }; b.c(); const m = b.c; m();6a = 100; const b = { a: 1, c: () => { var a = 1000; console.log(this.a); }, }; const m = b.c; m();请思考一下我们再解释哦！这里的难度是循序渐进的，因为浏览器环境和Node环境内全局this有些不一样，所以我们先讨论浏览器环境下的输出。看一下第一题：a = 100; const obj = { a: 1, b: () => { const a = 10; console.log(this.a); }, }; obj.b();还记的一开始说的话吗？this存在于执行上下文中，只有全局和函数还有eval拥有this，他指向的是一个对象。同时，箭头函数是没有自己的this的。先说答案：在浏览器环境下输出为100b是一个箭头函数，没有自己的this，所以再往外找，是obj调用的b()函数，但是对象也没有this，再向外找，obj.b()是在全局下调用，所以这里打印的this是全局的this，浏览器环境下，全局this指向全局window对象，所以打印的this.a实际是window.a 值为100。这里的重点就是，对象是没有this的。我们把这六道题一一对一下，就会清楚整个的执行原理了。第二题和第一题由有一些区别，不过只有搞清楚谁的this，指向哪个对象，也很简单。a = 100; function b() { var a = 1000; const c = () => { var a = 1; console.log(this.a); }; c(); } b();this是谁的？最内层的c函数是箭头函数没有this，外面b函数拥有this，所以不用再往外找了。第一点，当前打印的this是b函数的。this指向的谁？b函数是在全局下调用的，所以指向的对象是全局的window对象，这里打印的this.a也是全局的window.a不清楚的话我们再看第三题！a = 100; function b() { const c = () => { var a = 1; console.log(this.a); }; c(); } const obj = { a: 1000, m: b, }; obj.m();this是谁的？在b函数内调用的c函数，因为c是箭头函数没有this，所以向上层寻找，b是一个函数，拥有this。找到了，打印的this是b函数所拥有的this。一开始说过，this指向一个对象，这个对象就是调用该函数的对象，在这里是obj调用的，所以b函数的this指向obj对象，打印的this.a是obj.a，值为1000。这三道题看完是不是清晰一些了？请带着你的理解再思考一下第四题！a = 100; const b = { a: 1, c: function () { var a = 1000; console.l…

奇怪的HTTP状态码
type: item
date: 2024-09-06T11:57:00+08:00
description: 此文记录一下开发中遇到的状态码400系列401 请求未授权 没有权限405 请求方法不对 本来是post请求 但是后端自己测试的时候改成了接收get请求 导致返回405413 请求实体过大 上传超过服务器所能处理范围的数据时，服务器会拒绝处理该请求，并返回413状态码。在调试上传Excel大文件时，报错413。422 请求格式不对 与后端约定请求参数不符 服务器收到请求但无法处理500系列502 网关错误发生在服务器作为网关或代理，从上游服务器接收到了无效的响应时503 服务器不可用 服务器维护ing 无法处理请求504 网关超时 前方服务器（例如代理服务器或者负载均衡服务器）在等待后端服务器处理请求时，没有在预期的时间内得到响应，因此无法完成请求

实体字符 entity
type: item
date: 2024-08-19T18:06:00+08:00
description: 实体字符指需要在页面上显示的特殊字符写法：&字母; 或 &数字;常用字符举例：& & U+00026 < < U+0003C > > U+0003E " " U+00022 ' ' U+00027 U+000A0 – – U+02013 — — U+02014 © © U+000A9 ® ® U+000AE ™ ™ U+02122 ≈ ≈ U+02248 ≠ ≠ U+02260 £ £ U+000A3 € € U+020AC ° ° U+000B0MDN解释：https://developer.mozilla.org/en-US/docs/Glossary/Character_reference全部实体：https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

JS-什么是事件循环？
type: item
date: 2024-07-24T18:30:35+08:00
description: 首先，浏览器是一个多进程多线程的应用程序浏览器内部工作极其复杂，为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。可以在浏览器的任务管理器中查看当前的所有进程其中，最主要的进程有：浏览器进程主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。网络进程负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。渲染进程渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。在渲染进程上会执行js代码，为了防止发生冲突，JavaScript被设计成了单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环。这是一个非常巧妙的方法：在最开始的时候，渲染主线程会进入一个无限循环每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务这样一来，就可以让每个任务有条不紊的、持续的进行下去了。若干解释何为异步？代码在执行过程中，会遇到一些无法立即处理的任务，比如：计时完成后需要执行的任务 —— setTimeout、setInterval网络通信完成后需要执行的任务 -- XHR、Fetch用户操作后需要执行的任务 -- addEventListener如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」渲染主线程承担着极其重要的工作，无论如何都不能阻塞！因此，浏览器选择异步来解决这个问题使用异步的方式，渲染主线程永不阻塞面试题：如何理解 JS 的异步？参考答案：JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。任务有优先级吗？任务没有优先级，在消息队列中先进先出但消息队列是有优先级的根据 W3C 的最新解释:每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法在目前 chrome 的实现中，至少包含了下面的队列：延时队列：用于存放计时器到达后的回调任务，优先级「中」交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」微队列：用户存放需要最快执行的任务，优先级「最高」添加任务到微队列的主要方式主要是使用 Promise、MutationObserver例如：// 立即把一个函数添加到微队列 Promise.resolve().then(函数)浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑面试题：阐述一下 JS 的事件循环参考答案：事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调…