6、根据promiseA+实现一个自己的promise

最新推荐文章于 2021-05-17 18:52:14 发布
最新推荐文章于 2021-05-17 18:52:14 发布
阅读量137 收藏
点赞数
分类专栏： 技能树 # JavaScript基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abuanden/article/details/114489752
版权

选自：Promise不会？？看这里！！！史上最通俗易懂的Promise！！！

文章目录

步骤一：实现成功和失败的回调方法

要实现上面代码中的功能，也是promise最基本的功能。首先，需要创建一个构造函数promise，创建一个promisel类，在使用的时候传入了一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。之前说过，只要成功，就不会失败，只要失败就不会成功。所以，默认状态下，在调用成功时，就返回成功态，调用失败时，返回失败态。代码如下：

    //声明 class
    class myPromise {
        //声明构造方法
        constructor(executor) {
--------------------------------------------准备工作
            const self = this;
            //声明属性
            self.promiseStatus = 'pending';
            self.promiseValue = '';
            self.callbacks = [];
--------------------------------------------主要代码
            //声明函数 resolve
            function resolve(data) {
                //状态修改唯一性
                if (self.promiseStatus !== 'pending') return;
                // resolve 修改 Promise 对象状态(promiseStatus)为成功, 设置其成功的值(promiseValue)
                //修改状态
                self.promiseStatus = 'resolved';
                //修改值
                self.promiseValue = data;
                //执行成功的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onResolved(self.promiseValue);
                        });
                    }
                })
            }
            //声明函数 reject
            function reject(data) {
                //如果状态修改过, 则直接返回
                if (self.promiseStatus !== 'pending') return;
                //修改状态
                self.promiseStatus = 'rejected';
                //修改值
                self.promiseValue = data;
                //执行失败的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onRejected(self.promiseValue);
                        });
                    }
                });

            }
------------------------------------------执行函数
/**上面是定义resolve和reject函数，命名无所谓。下面的try才是执行函数*/
            try {
                executor(resolve, reject);
            } catch (e) {
                //如果抛错 则修改 promise 对象状态为失败
                reject(e);
            }
        }

promise A+规范规定，在有异常错误时，则执行失败函数。

举例：

    <div >开始异步请求</div>
    //声明 class
    class myPromise {
        //声明构造方法
        constructor(executor) {
            const self = this;
            //声明属性
            self.promiseStatus = 'pending';
            self.promiseValue = '';
            self.callbacks = [];
            //声明函数 resolve
            function resolve(data) {
                //状态修改唯一性
                if (self.promiseStatus !== 'pending') return;
                // resolve 修改 Promise 对象状态(promiseStatus)为成功, 设置其成功的值(promiseValue)
                //修改状态
                self.promiseStatus = 'resolved';
                //修改值
                self.promiseValue = data;
                //执行成功的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onResolved(self.promiseValue);
                        });
                    }
                })
            }
                        //声明函数 reject
            function reject(data) {
                //如果状态修改过, 则直接返回
                if (self.promiseStatus !== 'pending') return;
                //修改状态
                self.promiseStatus = 'rejected';
                //修改值
                self.promiseValue = data;
                //执行失败的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onRejected(self.promiseValue);
                        });
                    }
                });

            }

            //执行『执行器函数』
            try {
                executor(resolve, reject);
            } catch (e) {
                //如果抛错 则修改 promise 对象状态为失败
                reject(e);
            }
        }
     }

步骤二：then方法链式调用

then方法是promise的最基本的方法，返回的是两个回调，一个成功的回调，一个失败的回调，实现过程如下：

        //声明 then 方法
        then(onResolved, onRejected) {
            //默认值设置
            if (onRejected === undefined) {
                onRejected = reason => {
                    throw reason
                };
            }

            if (onResolved === undefined) {
                onResolved = value => value;
            }
       }

为了实现这样的效果，则上一次的代码将要重新写过，我们可以把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入一个数组。这就是 为何会在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的原因。因此，在调用resolve()或者reject()之前，我们在pending状态时，会把多次then中的结果存入数组中，则上面的代码会改变为：

        //声明 then 方法
        then(onResolved, onRejected) {
            //默认值设置
            if (onRejected === undefined) {
                onRejected = reason => {
                    throw reason
                };
            }

            if (onResolved === undefined) {
                onResolved = value => value;
            }

            return new Promise((resolve, reject) => {
                //封装函数
                let callback = (type) => {
                    //如果函数执行抛出错误
                    try {
                        //获取回调的执行结果
                        let result = type(this.promiseValue);
                        //判断
                        if (result instanceof Promise) {
                            result.then(v => {
                                resolve(v);
                            }, r => {
                                reject(r);
                            })
                        } else {
                            //状态为成功
                            resolve(result);
                        }
                    } catch (e) {
                        //如果回调抛出错误, 则修改 promise 对象状态为失败
                        reject(e);
                    }
                }
                //判断 promise 对象的状态
                //成功的状态
                if (this.promiseStatus === 'resolved') {
                    setTimeout(() => {
                        callback(onResolved);
                    });
                }

                //失败的状态
                if (this.promiseStatus === 'rejected') {
                    setTimeout(() => {
                        callback(onRejected);
                    })
                }

                //pending状态
                if (this.promiseStatus === 'pending') {
                    //保存回调函数
                    this.callbacks.push({
                        onResolved: () => {
                            callback(onResolved);
                        },
                        onRejected: () => {
                            callback(onRejected);
                        }
                    });
                }
            })
        }

Promise A+规范中规定then方法可以链式调用

在promise中，要实现链式调用返回的结果是返回一个新的promise，第一次then中返回的结果，无论是成功或失败，都将返回到下一次then中的成功态中，但在第一次then中如果抛出异常错误，则将返回到下一次then中的失败态中

根据promise A+规范原理，promise在自己的框架中，封装了一系列的内置的方法。

  1. 捕获错误的方法 catch()
  2. 解析全部方法 all()
  3. 竞赛 race()
  4. 生成一个成功的promise resolve()
  5. 生成一个失败的promise reject()

最终代码和测试

ES6.Class实现

   //声明 class
    class myPromise {
        //声明构造方法
        constructor(executor) {
            const self = this;
            //声明属性
            self.promiseStatus = 'pending';
            self.promiseValue = '';
            self.callbacks = [];
            //声明函数 resolve
            function resolve(data) {
                //状态修改唯一性
                if (self.promiseStatus !== 'pending') return;
                // resolve 修改 Promise 对象状态(promiseStatus)为成功, 设置其成功的值(promiseValue)
                //修改状态
                self.promiseStatus = 'resolved';
                //修改值
                self.promiseValue = data;
                //执行成功的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onResolved(self.promiseValue);
                        });
                    }
                })
            }
            //声明函数 reject
            function reject(data) {
                //如果状态修改过, 则直接返回
                if (self.promiseStatus !== 'pending') return;
                //修改状态
                self.promiseStatus = 'rejected';
                //修改值
                self.promiseValue = data;
                //执行失败的回调
                setTimeout(() => {
                    if (self.callbacks.length > 0) {
                        self.callbacks.forEach(callbackObj => {
                            callbackObj.onRejected(self.promiseValue);
                        });
                    }
                });

            }

            //执行『执行器函数』
            try {
                executor(resolve, reject);
            } catch (e) {
                //如果抛错 则修改 promise 对象状态为失败
                reject(e);
            }
        }

        //声明 then 方法
        then(onResolved, onRejected) {
            //默认值设置
            if (onRejected === undefined) {
                onRejected = reason => {
                    throw reason
                };
            }

            if (onResolved === undefined) {
                onResolved = value => value;
            }

            return new Promise((resolve, reject) => {
                //封装函数
                let callback = (type) => {
                    //如果函数执行抛出错误
                    try {
                        //获取回调的执行结果
                        let result = type(this.promiseValue);
                        //判断
                        if (result instanceof Promise) {
                            result.then(v => {
                                resolve(v);
                            }, r => {
                                reject(r);
                            })
                        } else {
                            //状态为成功
                            resolve(result);
                        }
                    } catch (e) {
                        //如果回调抛出错误, 则修改 promise 对象状态为失败
                        reject(e);
                    }
                }
                //判断 promise 对象的状态
                //成功的状态
                if (this.promiseStatus === 'resolved') {
                    setTimeout(() => {
                        callback(onResolved);
                    });
                }

                //失败的状态
                if (this.promiseStatus === 'rejected') {
                    setTimeout(() => {
                        callback(onRejected);
                    })
                }

                //pending状态
                if (this.promiseStatus === 'pending') {
                    //保存回调函数
                    this.callbacks.push({
                        onResolved: () => {
                            callback(onResolved);
                        },
                        onRejected: () => {
                            callback(onRejected);
                        }
                    });
                }
            })
        }

        //声明 catch 方法
        catch (onRejected) {
            return this.then(undefined, onRejected);
        }

        //声明 resolve 静态方法
        static resolve(value) {
            return new Promise((resolve, reject) => {
                if (value instanceof Promise) {
                    value.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(value);
                }
            });
        }

        //声明 reject 静态方法
        static reject(reason) {
            return new Promise((resolve, reject) => {
                reject(reason);
            });
        }

        //声明 all 静态方法
        static all(promisesArr) {
            //声明数组存放成功的值
            const resultArr = [];
            //计数器
            let count = 0;
            //设置promise结构
            return new Promise((resolve, reject) => {
                //resolve 和 reject 调用的时机 ****
                for (let i = 0; i < promisesArr.length; i++) {
                    //获取当前正在遍历的 promise 对象
                    promisesArr[i].then(value => {
                        //将当前成功的 promise 的值 存入到数组中
                        // resultArr.push(value);// 此方法不可取
                        resultArr[i] = value;
                        //计数器加一
                        count++;
                        //判断结果数组的长度 ['ok', undefined, 'Yeah!'].length ==3   count 2
                        // ['OK','Success','Year']  count === 3  是所有 promise 成功的标志
                        if (count === promisesArr.length) {
                            //设置状态为成功
                            resolve(resultArr);
                        }
                    }, reason => {
                        //如果有一个 promise 失败, 则 all 返回的状态为失败
                        reject(reason);
                    })
                }
            });
        }

        //声明 race 静态方法
        static race(promisesArr) {
            return new Promise((resolve, reject) => {
                // resolve  reject 函数
                //遍历   标识符
                promisesArr.forEach(promise => {
                    promise.then(value => {
                        //如果 promise 对象成功, 则修改返回的 promise 对象状态为成功
                        resolve(value);
                    }, reason => {
                        //如果 promise 对象失败, 则修改返回的 promise 对象状态为失败
                        reject(reason);
                    })
                });
            });
        }
    }

    const promiseClick = () => { //执行顺序：1。点击之后进入这里。
        console.log('点击方法被调用')
        let p = new myPromise(function (resolve, reject) {
            //这里的resolve和reject命名是在构造函数里面定义的。
            //必须和构造函数里面的同名，不然会找不到

            //做一些异步操作
            setTimeout(function () {
                console.log('执行完成Promise');
                resolve('要返回的数据可以任何数据例如接口返回数据');
            }, 2000);
        });
        return p //执行顺序：2。给p赋值，然后把p  return到上面的构造函数去。
    }

    let test = promiseClick().then((res)=>{
        console.log(res);
    })

ES5实现

//声明 class
class Promise {
    //声明构造方法
    constructor(executor) {
        const self = this;
        //声明属性
        self.promiseStatus = 'pending';
        self.promiseValue = '';
        self.callbacks = [];
        //声明函数 resolve
        function resolve(data) {
            //状态修改唯一性
            if (self.promiseStatus !== 'pending') return;
            // resolve 修改 Promise 对象状态(promiseStatus)为成功, 设置其成功的值(promiseValue)
            //修改状态
            self.promiseStatus = 'resolved';
            //修改值
            self.promiseValue = data;
            //执行成功的回调
            setTimeout(() => {
                if (self.callbacks.length > 0) {
                    self.callbacks.forEach(callbackObj => {
                        callbackObj.onResolved(self.promiseValue);
                    });
                }
            })
        }
        //声明函数 reject
        function reject(data) {
            //如果状态修改过, 则直接返回
            if (self.promiseStatus !== 'pending') return;
            //修改状态
            self.promiseStatus = 'rejected';
            //修改值
            self.promiseValue = data;
            //执行失败的回调
            setTimeout(() => {
                if (self.callbacks.length > 0) {
                    self.callbacks.forEach(callbackObj => {
                        callbackObj.onRejected(self.promiseValue);
                    });
                }
            });

        }

        //执行『执行器函数』
        try {
            executor(resolve, reject);
        } catch (e) {
            //如果抛错 则修改 promise 对象状态为失败
            reject(e);
        }
    }

    //声明 then 方法
    then(onResolved, onRejected) {
        //默认值设置
        if (onRejected === undefined) {
            onRejected = reason => { throw reason };
        }

        if (onResolved === undefined) {
            onResolved = value => value;
        }

        return new Promise((resolve, reject) => {
            //封装函数
            let callback = (type) => {
                //如果函数执行抛出错误
                try {
                    //获取回调的执行结果
                    let result = type(this.promiseValue);
                    //判断
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        })
                    } else {
                        //状态为成功
                        resolve(result);
                    }
                } catch (e) {
                    //如果回调抛出错误, 则修改 promise 对象状态为失败
                    reject(e);
                }
            }
            //判断 promise 对象的状态
            //成功的状态
            if (this.promiseStatus === 'resolved') {
                setTimeout(() => {
                    callback(onResolved);
                });
            }

            //失败的状态
            if (this.promiseStatus === 'rejected') {
                setTimeout(() => {
                    callback(onRejected);
                })
            }

            //pending状态
            if (this.promiseStatus === 'pending') {
                //保存回调函数
                this.callbacks.push({
                    onResolved: () => {
                        callback(onResolved);
                    },
                    onRejected: () => {
                        callback(onRejected);
                    }
                });
            }
        })
    }

    //声明 catch 方法
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    //声明 resolve 静态方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                })
            } else {
                resolve(value);
            }
        });
    }

    //声明 reject 静态方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason);
        });
    }

    //声明 all 静态方法
    static all(promisesArr) {
        //声明数组存放成功的值
        const resultArr = [];
        //计数器
        let count = 0;
        //设置promise结构
        return new Promise((resolve, reject) => {
            //resolve 和 reject 调用的时机 ****
            for (let i = 0; i < promisesArr.length; i++) {
                //获取当前正在遍历的 promise 对象
                promisesArr[i].then(value => {
                    //将当前成功的 promise 的值 存入到数组中
                    // resultArr.push(value);// 此方法不可取
                    resultArr[i] = value;
                    //计数器加一
                    count++;
                    //判断结果数组的长度 ['ok', undefined, 'Yeah!'].length ==3   count 2
                    // ['OK','Success','Year']  count === 3  是所有 promise 成功的标志
                    if (count === promisesArr.length) {
                        //设置状态为成功
                        resolve(resultArr);
                    }
                }, reason => {
                    //如果有一个 promise 失败, 则 all 返回的状态为失败
                    reject(reason);
                })
            }
        });
    }
    
    //声明 race 静态方法
    static race(promisesArr){
        return new Promise((resolve, reject)=>{
            // resolve  reject 函数
            //遍历   标识符
            promisesArr.forEach(promise => {
                promise.then(value => {
                    //如果 promise 对象成功, 则修改返回的 promise 对象状态为成功
                    resolve(value);
                }, reason => {
                    //如果 promise 对象失败, 则修改返回的 promise 对象状态为失败
                    reject(reason);
                })
            });
        });
    }
}
abuanden
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6的Promise详解
程序员柒的博客
11-08 5521
本篇文章主要介绍了ES6语法中的Promise对象的使用详解,promise对象是JS进阶学习中的重要知识点，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容。
promise:promiseA +实现
04-02
Promise是JavaScript中的一个核心特性，用于处理异步操作。在JavaScript的世界里，异步编程是不可或缺的一部分，因为JavaScript是单线程的，不能同时执行多个任务。Promise的引入解决了回调地狱（Callback Hell）的...
根据Promise/A+规范自己实现一个Promise
wu1737149371的博客
07-23 392
Promise/A+规范中文翻译：http://www.ituring.com.cn/article/66566 Promise Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大 Promise 的三种状态 Pending Promise对象实例创建时候的初始状态 Fulfilled 可以理解为成功的状态 Rejected 可以理解为失败的状态 ...
Promise 对象
Inory_ye的博客
05-17 903
1.什么是Promise对象 promise是ES6所提供的的，Promise 对象代表了将要发生的事件，用来传递异步操作的消息。主要可以解决回调地狱的问题 2.promise的优缺点
Promise系列02：Promise创建
朝花夕拾
06-15 392
ES6提供了原生的Promise构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。var promise = new Promise(function(resolve, reject) { // 异步操作的代码 if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } });re
根据Promises/A+规范实现一个原生Promise
weixin_33686714的博客
01-15 90
Promise表示一个异步操作的最终结果。与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因。 Promise解决的问题是以往在js函数中使用回调函数的问题。 没有Promise之前： function personInfo(callback){ //dosometing callback...
lite-promise:轻量级 PromiseA+ 实现
06-22
"lite-promise"是一个轻量级的Promise实现，专注于提供最基本的功能，以满足那些对性能和体积有较高要求的项目需求。下面将详细介绍Promise的基本概念以及lite-promise的核心特性。 ### Promise基本概念 Promise是...
Promise:基于ES 6+和Babel的PromiseA +工具
04-27
在“Promise:基于ES 6+和Babel的PromiseA +工具”中，我们可以理解这个项目是为了在不支持Promise的环境中使用Promise功能，通过Babel这个编译工具将ES6+的Promise语法转换为向下兼容的代码，确保在各种浏览器或环境...
promise:根据 PromiseA+ 规范和 ES6 规范，实现一个 Promise，帮助理解 ES6 Promise 原理和事件循环。附 async 和 await 原理和实现
04-30
根据 Promise/A+ 规范和 ES6 规范，实现一个 Promise，帮助理解 ES6 Promise 原理和事件循环。附 async 和 await 原理和实现 文件介绍 src/async-await async-await.js 模拟实现 async await async-await-comment.js...
saber-promise:适合移动端的 PromiseA+ 实现
05-02
的移动端的 实现，兼容 node 环境，遵循 1.1 规范 Installation 移动端环境下通过 引入模块： $ edp import saber-promise node 环境下通过 npm 引入模块： $ npm install saber-promise --save Usage var Resolver ...
4、async和await详解
abuanden的博客
03-07 2181
选自：理解 JavaScript 的 async/await 文章目录1. async 和 await 在干什么1.1. async 起什么作用1.2. await 到底在等啥1.3. await 等到了要等的，然后呢2、async/await 帮我们干了啥2.1. 作个简单的比较2.2. async/await 的优势在于处理 then 链2.3. 依次执行多个请求2.4. 并发执行多个请求2.5. 如果结果是reject怎么办 1. async 和 await 在干什么 任意一个名称都是有意义的，先从字
2、虚拟内存和物理内存
abuanden的博客
03-16 1336
虚拟内存和物理内存 物理内存就是内存条的大小，一般来说4G、8G左右。代码，数据运行都要到这里来，cpu才能运行。（32位系统最高物理内存是2 32 = 4GB） 虚拟内存是在磁盘空间（一般几TB）里面划分出和物理内存大小一样的空间出来（比如4GB），用来放置代码。 物理内存和虚拟内存里面都以4KB（8KB也有）为基本单位划分区域。称作（页框）和（页）。然后通过页表建立映射关系。 cpu工作时，先通过发送虚拟地址，MMU通过页表解析虚拟地址。如果在物理内存里面，则直接运行。如果不在的话，则参数缺页异常，
2、爬楼梯 编代码
abuanden的博客
03-05 930
题目描述： 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 方法分析： 这道题主要是要明白该爬楼梯的规律其实就是符合斐波那契数列（Fibonacci Sequence） 规律的，问题就迎刃而解了。为什么说它是斐波那契数列呢？我们可以这样来思考：当我们从第 n-1 阶楼梯爬到第 n 阶楼梯时，需要1步；当我们从第 n-2 阶楼梯爬到第 n 阶楼梯时，需要2步.也就是说 到达第 n 阶楼梯的方法数等于到达第 n-1 阶楼梯的方法数加上到达第
前端常见网络攻防问题
abuanden的博客
03-25 753
前端常见安全问题的十个方面： iframe opener CSRF（跨站请求伪造） XSS（跨站脚本攻击） ClickJacking（点击劫持） HSTS（HTTP严格传输安全） CND劫持 HTTPS中间人攻击 SQL注入 Dos服务拒绝攻击 一、iframe 1. 如何让自己的网站不被其他网站的 iframe 引用？ // 检测当前网站是否被第三方iframe引用 // 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。 if(top.location != self.
两栏布局、三栏布局常用方法详解
abuanden的博客
03-03 733
这里写目录标题两栏布局一栏固定宽度，一栏自适应一、左float，右margin-left二、左侧float:left; 右侧overflow:hidden；（推荐）三、利用绝对定位四、利用弹性布局（推荐）一栏不定宽，一栏自适应一、左侧float:left; 右侧overflow:hidden；（BFC）二、利用弹性布局（推荐）三栏布局一. 浮动布局二、绝对定位布局三、flex布局(推荐）四、网格布局（推荐）五、圣杯布局（float+负margin）六、双飞翼布局(推荐） 两栏布局 一栏固定宽度，一栏自适应
JS判断属性和方法是否是自身的
abuanden的博客
03-28 640
一.hasOwnproperty 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。 var test = function () {} test.func = function () { console.log(222); } test.prototype.wuwu = function () { console.log(333);
5、作用域链和原型链的区别
abuanden的博客
03-14 580
针对的对象不同 作用域链：针对变量 原型链： 针对构造函数（对于对象的属性，方法） 形式不同 作用域链： 作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。如： var a = 1; function b(){ var a = 2; function c(){ var a = 3; console.log(a); } c(); } b(); 最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了
1、简述浏览器渲染机制
abuanden的博客
03-08 501
选自： 简述浏览器渲染机制 文章目录一 ： 为什么要了解浏览器渲染页面的机制二 ：基本概念三 ： 需要注意的是：四 ： 浏览器渲染的整个流程浏览器的加载、解析时间线 一 ： 为什么要了解浏览器渲染页面的机制 目的：主要还是性能的优化。 了解浏览器如何进行加载，我们可以在引用外部样式文件，外部JS时，将它们放到合适的位置，是浏览器以最快的速度，将文件加载完毕。 了解浏览器如何进行解析，我们可以在构建DOM结构，组织CSS选择器的时候，选择最优的写法，提高浏览器的解析速率。 了解浏览器如何进行渲染，明白渲染的
闭包、内存泄漏、垃圾回收机制详解
abuanden的博客
03-04 495
目录内存泄漏和垃圾回收机制一、什么是内存泄漏？二、垃圾回收机制三、内存泄漏的识别方法3.1 浏览器四、WeakMap五、WeakMap 示例六、常见的内存泄漏1、闭包2、意外的全局变量3、被遗忘的计时器或回调函数4、脱离 DOM 的引用 闭包详见：闭包的应用和常用的场景 内存泄漏和垃圾回收机制 选自： JavaScript 内存泄漏教程 js常见的内存泄漏 JavaScript内存泄露的4种方式及如何避免 一、什么是内存泄漏？ 程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须
promiseA+实现
最新发布
03-31
由于我是AI语言模型，无法确定您想要实现什么样的promiseA，因此我将提供一个基本的实现示例，您可以根据自己的需求进行修改和扩展。 ```javascript function promiseA(fn) { let state = 'pending'; // 初始状态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值