CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

19 async await使用同步方式写异步代码

19 async await使用同步方式写异步代码 Promise 的缺点：处理流程复杂时，代码充斥了.then方法，语义化不明显 async/await ：底层转换成了 Promise 和 then 回调函数 —> 每次我们使用 await, 解释器都创建一个 promise 对象，然后把剩下的 async 函数中的操作放到 then 回调函数中。 JS 异步编程的重大改进 -...

Posted by CodingWithAlice on April 14, 2021

实现给定时间切换状态（拼多多面试题）

18-2 实现给定时间切换状态（拼多多面试题）实现 promiseSetTimeout（拼多多面试题）题目：实现一个promisesetTimeout方法，该方法接收两个参数：第一个参数为promise，第二个参数为number类型结果需满足： 1）若Promise在第二个参数给定的时间内处于pending状态，则返回一个rejected的Promise，其reason为new...

Posted by CodingWithAlice on April 13, 2021

18 Promise及其简易实现

18 Promise及其简易实现参考文章：这一次，彻底弄懂 Promise 原理 - 对 Promise 源码进行了解析 - 没看完 30分钟，让你彻底明白Promise原理 - 真的看不进去，有需要再看吧 JS的异步编程模型，典型的如下图：异步回调 Web 页面的单线程架构决定了异步回调，而异步回调影响到了我们的编码方式。 –> 将异步回调函数封装是一个很好的思维，...

Posted by CodingWithAlice on April 13, 2021

17 微任务和宏任务

17 微任务和宏任务微任务：MutationObserver、Promise以及以Promise为基础的技术宏任务：渲染事件（解析DOM、计算布局、绘制）、用户交互事件（鼠标点击、滚动页面、放大缩小等）、js脚本执行事件、网络请求完成、setTimeout()、setInterval 复习宏任务定义主线程中，引入了消息队列（包括延迟执行队列和普通消息队列）和事件循环机制，主...

Posted by CodingWithAlice on April 13, 2021

16 XMLHttpRequest机制 - 异步回调

16 XMLHttpRequest机制 - 异步回调 XMLHttpRequest解决的问题在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面； XMLHttpRequest 提供了从 Web 服务器获取数据的能力，如果你想要更新某条数据，只需要通过 XMLHttpRequest 请求服务器提供的接口，就可以获取到服务器的数据，然后再操作 DOM...

Posted by CodingWithAlice on April 13, 2021

15 setTimeout

15 setTimeout - 延迟消息队列浏览器怎么实现 setTimeout？渲染进程中所有运行在主线程上的任务都需要先添加到消息队列（step1），然后事件循环系统（step2）再按照顺序执行消息队列中的任务典型事件：当接收到 HTML 文档数据，渲染引擎就会将解析 DOM 事件添加到消息队列中当用户改变了 Web 页面的窗口大小，渲染引擎就会将 ...

Posted by CodingWithAlice on April 12, 2021

浏览器和node的事件循环

浏览器和node的事件循环参考博客：浏览器和Node事件循环的区别总结：浏览器和Node事件循环的区别 Event Loop即事件循环，是指浏览器或 Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。一、浏览器事件循环 1、JS的主线程是【单线程】但是 ajax和 setTim...

Posted by CodingWithAlice on April 12, 2021

14 任务调度系统

14 任务调度系统任务调度系统 - 组成：消息队列 + 事件循环为什么渲染主线程需要任务调度系统？可以看如下图的任务，除了线程之间的相互通信，还有跨进程发送的任务消息队列中的任务类型内部消息类型，如输入事件（鼠标滚动、点击、移动）、微任务、文件读写、WebSocket、JavaScript定时器等；还包含了很多与页面相关的事件，如 JavaScript 执行...

Posted by CodingWithAlice on April 12, 2021

13-2 JS如何影响DOM树的构建

13-2 JS如何影响DOM树的构建什么是DOM？渲染引擎无法直接识别网络进程传递的 HTML 字节流，而 DOM 就是能理解的结构 DOM的作用： 1、页面 – DOM是生成页面的基础数据结构 2、JS脚本 – DOM提供了 JS脚本操作的接口，JS可以修改 DOM 结构、样式、内容 3、安全 – 不安全的内容在 DOM 解析阶段就...

Posted by CodingWithAlice on April 11, 2021

13 V8如何解析js代码 - 编译器+解析器

13 V8如何解析js代码 - 编译器+解释器 1、语言类型分类解释型语言 – js、python等，每次都需要解释器对程序进行动态解释和执行编译型语言 – C/C++、GO等，需要编译，编译后生成二进制文件并保留，下次可以直接执行 2、概览V8解析一段js代码流程概括：V8 依据 JavaScript 代码生成 AST 和执行上下文，再基于 AST 生成字节码，然...

Posted by CodingWithAlice on April 11, 2021