情非得已小猿猿

本文介绍了6种前端性能优化技术：1) requestIdleCallback用于空闲时执行低优先级任务；2) requestAnimationFrame优化动画性能；3) IntersectionObserver监听元素可见性变化；4) Web Workers实现多线程处理；5) URL.createObjectURL高效处理大文件；6) content-visibility优化长列表渲染。这些技术可有效提升页面响应速度、减少主线程阻塞，适用于日志上报、懒加载、大数据处理等场景，并附有各技术的典型使用代码示

跨域通信和同源通信是前端开发中常见的两种通信方式。在跨域通信中，父页面和 iframe 可以通过 postMessage 方法进行消息传递，并通过检查 event.origin 确保消息来源的安全性。父页面可以向 iframe 发送消息，iframe 也可以向父页面发送消息，双方通过监听 message 事件来接收消息。在同源通信中，可以通过 localStorage 或 sessionStorage 实现数据共享，或者直接通过 iframe 的 DOM 调用父页面或 iframe 中的方法。这些方法为不同

一、同程旅行一面自我介绍技术提问sessionStorage是否共享数据 window.openvue、react 源码有没有看过 说一下react17 react18区别webpack loader plugin，有没有自己写过vuex、reactx 刷新数据丢失 怎么做的持久化反问2、同程旅行二面自我介绍技术提问vue3与vue2的区别wepack loader plugin 有没有自己写过写plugin用过哪些勾子整体项目的项目的性能优化Fle

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。使用代理模式后，图片本地对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口；代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的。代理对象负责在图片未加载完成之前，引入预加载的loading图，负责了图片预加载的功能。虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建，，起到的作用就是代理。

就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复）在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合）使用工厂最终达到的效果是：多态，和类与类之间的松耦合。把具体的产品放到了工厂函数的prototype中。

页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个。第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment。单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象。全局态管理库也应用单例模式的思想。

保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知；很多第三方库都是单例模式，多次引用只会使用同一个对象，如。比如你订阅了某个博主的频道，当有内容更新时会收到推送。，把他们一个个封装起来，并且使他们可以相互替换。代理模式：为对象提供一个。观察者模式定义了一种。，以便控制对它的访问。

因为 Object.create 方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能。寄生式继承在上面继承基础上进行优化，利用这个浅拷贝的能力再进行增强，添加一些方法。借助 Object.create 方法实现普通对象的继承。借助 call调用 Parent 函数。构造函数继承（借助 call）问题：与原型式继承一样。

部分栏目预览（持续更新中🏃）more >> 相关链接：1️⃣ GitHub  2️⃣ 个人技术博客 3️⃣ 设计作品集  4️⃣ CSDN博客一、VuenextTick()原理more >>二、ReactAnt Design全局改变主题色react项目组件通信AntDesign表单Form实例方法（useForm/ref）… more >>三、TypeScriptTS中type与interface区

前段时间参加了苏宁总部面试，跟大家分享一下面试经验、流程、面试题。总共两轮技术面。第一轮是电话面试，根据谈话语气，我觉得考官应该是前端的同事级别。首先肯定是自我介绍以及所做项目的技术栈，然后就是考官问的一些有关前端的技术问题（应该是准备好的问题，一连串的问）css3的动画属性了解吗？说一下 描述一下promise异步操作 说一下vue的生命周期、钩子函数 对ES6熟悉吗？简单介绍...

一、代码包优化1、屏蔽sourceMap在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件)在build对象中的配置信息中，productionSourceMap修改成false:2、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩index...

一、tree shaking （摇树优化）tree shaking概念：1个模块可能有多个方法，只要其中某个方法使用了，整个文件会被打到bundle中tree shaking 只将用到的方法打到bundle中，没用的在uglify阶段被擦除webpack默认支持，在.babelrc文件中设置 modules: false即可production mode 下默认开启 tree shaking必须是ES6语法tree shaking原理：依赖于ES6 moudel特性只能作为模块

问题场景:开发中修改第三方组件样式由于 scoped 属性的样式隔离，可能需要去除 scoped、添加!important、另起一个 style这些做法都会带来副作用（组件样式污染、不够优雅）解决方法：可以使用 >>> 或 /deep/ （亲测有效）解决这一问题样式穿透在css预处理器中使用才生效<style scoped>/deep/ .el-checkbox { display: block; font-size: 26px;

1、热更新WDS （webpack-dev-server）npm i webpack-dev-server -D不刷新浏览器不输出文件，而是放在内存中使用 webpack内置的plugin插件 HMR – HotModuleReplacementPluginhot 如果热替换失败就会自动回退使用自动刷新，控制台错误信息被清除，hotOnly 不会使用自动刷新会影响文件指纹2、package.json文件 "scripts": { "test": "echo \"Err

1、变量默认值例题：// 第一种(function(a,b=1,c){ console.log(b) // null})(1, null, 3)// 第二种(function(a,b=1,c){ console.log(b) // 1})(1, undefined, 3)重新传从参，打印null变量默认为undefined，所以打印的是12、‘ ’ 与 new String()的区别例题：var str1 = 'a', str2 = new St

1、当主轴空间有剩余，求最终left、right宽度<div class="container"> <div class="left"></div> <div class="right"></div></div><style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300

1、定义：虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点， 实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM2、虚拟dom原理流程模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOMvuejs通过编译将模板（template）转成渲

1. 用nextTick()的原因：JS运行机制（Event Loop）JS执行是单线程的，它是基于事件循环的所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。主线程不断重复第三步。这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop分为宏任务和微任务，无论是执行

1、Diff算法步骤：用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新2、key的作用原理：唯一标识，为了高效的更新虚拟DOMtransition过渡时，使用key属性，可以

场景：---- 需要同时请求5个接口---- 都请求成功后执行下一步操作解决方法：定义一个变量i=5，请求成功一个接口，让i–，直到i=0时执行下一个操作，否则不执行axios.all 并发请求，.then(axios.spread(function(callback1, callback2)){})回调promi.all 并发请求，.then(function([call...

1、面试案例for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); });}console.log(abc);// ********打印结果******abc555552、相关知识点-- 单线程：js特点，同一个时间只能做一件事-- 任务队列：前一...

在ES6中扩展运算符(…)与Object.assign()中复制是浅拷贝，所谓的浅拷贝和深拷贝：浅拷贝，是在拷贝过程中，遍历时那部分为对象/数组类型指向原来的地址。即修改其中任意的值，另一个值都会随之变化深拷贝，则是完全开辟新的内存地址。即将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变1、浅拷贝浅拷贝: 只做一个最外层的拷贝. 如果拷贝的对象是引用型数据类型,则...

之前博主去苏宁总部面试的分享漏了一个this指针的面试题，整理如下，问了两个方面。有兴趣的猿友可以点击这里查看之前面试分享。1、普通函数中的this普通函数，this的概念是：this是JavaScript的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基于函数的执行环境绑定的：在全局函数中，thi...