JS 高效生成数字数组
📖 简介 在 JavaScript 中，我们经常需要生成从 到 的数字数组。常见的方法包括 循环、 、 以及 等。但在实际应用中，不同方法的性能差异如何？最传统的 循环真的最快吗？而最慢的方法又是哪一个？ 📌 摘要 目标 ：对比 JavaScript 中几种生成 数组的方法，找出最高效和最慢的方案。 方法 ： 循环、 、 、 等。 结果 ： 循环在大数据量情况下最优，而某种常见方法的性能表现却意外最差！ 适用场景 ：不同方法适用于不...
使用 IntersectionObserver 实现曝光埋点
在 Web 开发中，我们经常需要埋点统计用户的行为，比如 元素曝光 统计，即某个元素在视口中可见并达到一定时间后触发上报。为了解决这一需求，我们可以使用 监听元素的可见性，并结合 计算停留时间，确保符合条件后才触发上报。 需求分析 我们的曝光埋点 SDK 需要满足以下需求： 监听多个元素的可见性 设定曝光阈值 （元素可见面积的比例，比如 50% 才算曝光） 设定曝光时间 （元素需要在视口内持续一段时间才触发上报） 动态解绑监听 （防止内...
JS构造函数里的属性方法与原型上的属性方法的区别
1\. 把方法写在原型上比写在构造函数里消耗内存更小，因为一个类的原型只有一个，写在原型上的方法可以被所有实例共享，实例化的时候并不会在实例中再复制一份； 2\. 写在构造函数里的方法，在实例化的时候，会在每一个实例对象上面复制一份，所以消耗的内存更高，因此我们一般把属性定义在构造函数里，把方法定义在原型上 3\. 在构造函数里定义的属性方法要比原型中的优先级更高，如果定义了同名的属性或方法，则构造函数里的会覆盖原型上面的 注意： 定义...
JavaScript 并发模型与事件循环：单线程的异步魔法
1\. JavaScript 的单线程特性 JavaScript 是单线程的，这意味着它一次只能执行一个任务。这种设计简化了编程模型，避免了多线程环境中的复杂问题（如死锁、竞态条件等）。然而，单线程也意味着如果某个任务耗时较长，可能会阻塞后续任务的执行。 为了解决这个问题，JavaScript 引入了 事件循环 和 非阻塞 I/O 机制，使得它能够在执行同步代码的同时，处理异步任务（如定时器、网络请求、I/O 操作等）。 2\. （Ev...
Proxy 与 Reflect 的关系、作用与应用场景
1\. Proxy 与 Reflect 简介 代理（Proxy）是一种 ，允许为其他对象创建一个代表或占位符对象，以控制对它的访问。在JavaScript中， 对象是一个内置对象，用于创建一个对象的代理，从而可以拦截和自定义对象的 ，如属性查找、赋值、枚举、函数调用等。 反射（Reflect）是ES6中引入的一个内置对象，它提供了拦截JavaScript操作的方法，这些方法与 对象的陷阱（trap）方法相对应。 对象的方法可以用来实现默...
前端实现画中画超简单，让网页飞出浏览器
这篇文章主要介绍了前端的 Document Picture in Picture 功能。包括基本代码结构、请求 PiP 窗口、检查支持与否、设置样式（全局样式同步、引入外部 CSS 文件、支持媒体查询）、监听进入退出和焦点失焦事件、克隆节点等，还提供了完整示例代码，最后总结掌握该功能可带来更灵活的交互体验。 关联问题: PiP支持哪些浏览器 画中画样式怎么改 如何优化PiP性能 Document Picture in Picture 介...
使用 Service Worker 让首页秒开
在大部分场景预加载是页面性能优化的利器，而对于类似首页这种承担用户第一次访问的页面却无法使用预加载，这时候我们可以用 Stale While Revalidate 加速页面访问，策略分 3 步 1. 在收到页面请求时首先检查缓存，如果命中缓存就直接从缓存中返回给用户 2. 将缓存返回用户的同时，在后台异步发起网络请求，尝试获取资源的最新版本 3. 获取成功后更新缓存，下次使用 而这一切的幕后功臣便是 Service Worker，作为一...
比较for、for...in、for...of、forEach的区别
目录 前言 在比较之前我们先了解两个概念： 迭代（iterate），指的是按照某种顺序反复多次执行一段程序，通常会有明确的终止条件。 遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。 一、四种循环 1、for循环 for语句是一种先测试循环语句，（即先检测退出条件，再执行循环体内的代码.) 语法： for(初始化变量;条件表达式;操作表达式){ 循环体语句; } (1)三个表达式都可以...
盘点一下用了这么长时间遇到的Wujie 无界微前端的坑
这篇文章主要盘点了使用 Wujie 无界微前端长时间以来遇到的问题及解决办法。已解决的包括子应用使用 wangEditor、vue office 等出现的多种问题，未解决的如自定义事件在子组件中失效、主应用和子应用路由切换点击浏览器退回无反应等，最后作者表达了对无界的看法。 关联问题: 无界有新的替代吗 无界性能怎样提升 无界后续会优化吗 目前也用无界微前端很长时间了，当时选择无界没有选择乾坤的原因就是无界的保活模式更加丝滑，客户就想要...