CodingWithAlice

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

01 HTTP发展史

01 HTTP发展史写得比较细的一篇博客：HTTP的前世今生总结 1、HTTP 协议始于三十年前蒂姆·伯纳斯 - 李的一篇论文 2、HTTP/0.9 是个简单的文本协议，只能获取文本资源 3、HTTP/1.0 确立了大部分现在使用的技术，但它不是正式标准 4、HTTP/1.1 是目前互联网上使用最广泛的协议，功能也非常完善 5、HTTP/2 基于 Google 的 ...

Posted by CodingWithAlice on April 19, 2021

24 虚拟DOM

24 虚拟DOM DOM的缺陷 1、JS 操纵 DOM 是会影响到整个渲染流水线 2、重排/重绘在复杂页面非常耗时（主线程） 3、对 DOM 的不当操作引起强制同步布局和布局抖动的问题，大大降低了渲染效率虚拟DOM解决的问题 1、页面的改变直接应用到虚拟DOM上，而不是DOM 2、有变化后，虚拟DOM并不直接渲染页面，而是仅调整虚拟DOM的内部状态 3、虚拟DOM收集到足...

Posted by CodingWithAlice on April 18, 2021

23 如何加快页面显示和相应

23 如何加快页面显示和相应页面优化 – 就是让页面更快得显示和响应由于页面在不同阶段的关注点不同，可以划分为几个阶段加载阶段：从发出请求到渲染出完整页面的过程，影响因素主要是网络和 JS 脚本交互阶段：从页面加载完成到用户交互的过程，影响因素主要是 JS 脚本关闭阶段：用户发出关闭指令后页面所做的清理操作加载阶段加载阶段的渲染流水线如下图： ...

Posted by CodingWithAlice on April 18, 2021

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