double丶dragon-优快云博客

原创跨域问题及解决方案

跨域，简单请求，预检请求，JSONP，代理，CROS，同源

2024-04-01 20:13:14 953

1.生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。2.生成器是一个函数，单数和普通函数有一些区别：生成器函数需要在function后面加一个符号生成器函数可以通过yield关键字来控制函数的执行流程生成器函数的返回值是一个Generator生成器，且生成器是一种特殊的迭代器3.代码举例console.log('函数开始执行');yield 123。

2024-04-01 15:55:10 1328

原创 Proxy和Reflect详解

1.Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。2.那么这个Reflect有什么用呢?它主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法;比如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf();比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty();

2024-03-30 11:56:11 901

原创浏览器渲染原理

reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。

2024-03-14 22:38:20 710

原创 JS事件循环

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。有了进程后，就可以运行程序的代码了。运行代码的「人」称之为「线程」。一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

2024-03-14 19:20:12 956

原创详解Vue的diff算法

具体来说，就是首先对根节点进行对比，如果相同则将旧节点关联的真实dom的引用挂到新节点上，然后根据需要更新属性到真实dom，然后再对比其子节点数组；在对比其子节点数组时，vue对每个子节点数组使用了两个指针，分别指向头尾，然后不断向中间靠拢来进行对比，这样做的目的是尽量复用真实dom，尽量少的销毁和创建真实dom。当组件创建和更新时，vue均会执行内部的update函数，该函数在内部调用render函数生成虚拟dom树，组件会指向新树，然后vue将新旧两树进行对比，找到差异点，最终更新到真实dom。

2024-03-13 23:03:24 1025

原创 Vue响应式原理

watcher会设置一个全局变量，让全局变量记录当前负责执行的watcher等于自己，然后再去执行函数，在函数的执行过程中，如果发生了依赖记录dep.depend()，那么Dep就会把这个全局变量记录下来，表示有一个watcher用到了我这个属性。对于数组，重写了一部分能改变原数组的隐式的原型方法（如push，pop，shift，unshift），Vue会更改它的隐式原型，之所以这样做，是因为Vue需要监听那些可能改变数组内容的方法。要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象。

2024-03-12 23:42:14 977 1