qq_45679015的博客

前端性能优化-使用Lighthouse测试性能

报错：可能报两个错误原因：一开始我以为babel转es6失败，重新安装@babel/runtime发现问题没能解决，当我去node_modules里面查找‘babel/runtime/helpers/builtin/interopRequireDefault'路径时发现没有builtin这个文件夹，尝试把helpers下的一堆js文件复制到新建builtin文件夹中，重新运行后成功！解决： 2.在helpers文件夹下新建builtin文件夹，并把helpers下的js文件全都复制到builtin

前端性能优化-介绍

web性能指标

函数防抖函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。函数防抖的场景• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖• 文本编辑器实时保存，当无任何更改操作一秒后进行保存函数防抖的实现function deb

题目描述：写个转换函数，把一个JSON对象的key从横杠形式【Pascal】转换到小驼峰【Camel】的形式例如：{“a_b”: {“a_b_c”: {“a_b_c_d”: “a_b_c_f”}}}——>{“aB”:{“aBC”:{“aBCD”:“a_b_c_f”}}}题目思路：一开始题没看完，就对字符串一个一个进行处理，便把key和value都进行转换了。后来才发现只需要对key进行转换。如果obj是数组的话，便对obj进行forEach遍历，进行递归。否则obj是对象的话,使用

作用：为了改变函数体内部this的指向区别：call需要把参数按顺序传递进去，而apply则是把参数放在数组里再传进去。bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。call的实现<script type="text/javascript"> Function.prototype.m

深拷贝：A 与 B 值相等，但改动 A 并不会影响 B。浅拷贝一般指的是基本类型的复制深拷贝一般指引用类型的拷贝，把引用类型的值也拷贝出来实现浅拷贝：ES6: object.assign();展开运算符自己封装函数实现实现深拷贝：JSON.parse()[但是如果里面有function和undefined不可以] > lodash自己封装手写一个浅拷贝~浅拷贝：A 与 B 值相等，改动 A 会影响 B。 const obj1 = { .

Promise.allSettled()接收参数为promise数组，返回promise对象，状态永远为成功始终能够得到每一个promise成功失败的结果//声明两个promise对象const p1 = new Promise((resolve, reject) =>{ setTimeout(()=>{ resolve('商品数据-1'); },1000)})const p2 = new Promise((resolve, reject

原型prototype=========先举个栗子，下面对应有解释哈！=。=~~//创建一个函数function MyClass(){ } var mc1 = new MyClass(); mc1.a = "我是mc1的a"; var mc2 = new MyClass(); //向MyClass的原型中添加属性a MyClass.prototype.a = 30; // //向MyClass的原型中添加方法

原型链+借用构造函数的组合继承-利用原型链实现对父类型对象的方法继承-利用call()借用父类型构造函数初始化相同属性举个栗子- 。-~~ function Person(name, age) { this.name = name; this.age = age; } Person.prototype.setName = function(name) { this.name = name;

借用构造函数继承（假的）套路：1.定义父类型构造函数2.定义子类型构造函数3.在子类型构造函数中调用父类型构造关键：在子类型构造函数中通用call()调用父类型的构造函数举个栗子- 。-~~ function Person(name,age) { this.name=name; this.age = age; } function Student(name,age,price){ //相当于this.Pers

原型链继承套路1.定义父类型构造函数2.给父类型的原型添加方法3.定义子类型的构造方法4.创建父类型的对象赋值给子类型的原型5.将子类型原型的构造属性设置为子类型6.给子类型原型添加方法7.创建子类型的对象：可以调用父类型的方法关键：子类型的原型为父类型的一个实例对象举个栗子- 。-~~以下的栗子每一步都按照套路的步骤进行哈//父类型 function Father(){ this.fhb="fhobby" } F

内存溢出一种程序运行出现的错误当程序运行需要的内存超过了剩余的内存时，就抛出内存溢出的错误举个栗子- 。-~~//不停地循环，不停地创建对象，直到内存溢出 var obj = {}; for (var i;i<100000;i++){ obj[i] = new Array(100000); console.log("----"); }内存泄漏占用的内存没有及时释放内存泄漏积累多了就容易导致内存溢出

Object构造函数模式 -套路：先创建空的Object对象，再动态添加属性/方法 -适用场景：起始时不确定对象内部的数据 -问题：语句太多举个栗子 - 。-~~ ---->造个人 var p = new Object(); p.name = "tom"; p.age = 12; p.setName = function(name){ this.name = name; } //测试 p

this是什么？任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window所有函数内部都有一个变量this它的值是调用函数的当前对象【解析器在调用函数时每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象， 这个对象我们称为函数执行的上下文对象根据函数的调用方式不同，this会指向不同的对象】举个栗子哈-。-~~ function Person(color) { console.log(color); .

事件处理机制代码分类初始化执行代码:包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码回调执行代码:处理回调逻辑js引擎执行代码的基本流程:初始化代码===>回调代码模型的2个重要组成部分:事件管理模块（定时器/DOM事件/Ajax）回调队列模型的运转流程执行初始化代码, 将事件回调函数交给对应模块管理当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回