提升前端性能的 几个高级 API
一、requestIdleCallback：巧用浏览器空闲时光 当浏览器忙碌于渲染、响应等关键任务时，低优先级任务若贸然插队，极易引发卡顿。requestIdleCallback 应运而生，它能让任务在浏览器闲暇之际执行。 它适用于日志上报等场景。借助以下代码，可以高效调度任务： 这就像在喧嚣的火车站，巧妙地利用等候间隙，迅速而优雅地完成额外任务。 二、IntersectionObserver：智能洞察元素与视口的邂逅 过去，开发者常依...
Blob 居然这么强大
一、什么是 Blob？ Blob（Binary Large Object）是 HTML5 提供的一个用于表示不可变的、原始二进制数据块的对象。 特点： 不可变性：一旦创建，内容不能修改。 可封装任意类型的数据：字符串、ArrayBuffer、TypedArray 等。 支持 MIME 类型描述，方便浏览器识别用途。 示例： 二、Base64 编码的前世今生 虽然名字听起来像是某种“64进制”，但实际上它是一种 编码方式 ，不是数学意义上...
Web Worker 多线程魔法
你是否曾遇到过网页因为复杂计算而卡顿的情况？今天，让我们一起探索Web Worker的神奇世界，看看如何用多线程技术解决性能瓶颈，并实现流畅的图片压缩功能！ 为什么需要Web Worker？ 想象一下，你在一个繁忙的餐厅里，只有一位服务员（主线程）负责点餐、上菜、结账所有工作。当客人突然暴增时，这位服务员就会手忙脚乱，其他客人只能干等着… 这就是JavaScript的现状—— 单线程 ！所有任务都在一个线程中排队执行，一旦遇到复杂计算（...
🌐AST抽象语法树
AST 是前端开发中一个非常重要的概念，它就像是代码的“编译器”，能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用，带你从零开始了解 AST。 一、什么是 AST？ AST（抽象语法树）是一种树形结构，用于表示程序代码的语法结构。它将代码分解为一系列的节点，每个节点代表代码中的一个元素，如变量、函数、表达式等。AST 是编译器和解释器的基础，也是代码分析和转换的关键工具。 1\. AST 的结构 AST 的结构通常包括以...
Document Picture-in-Picture API 打造沉浸式多任务体验
一、问题场景：企业视频会议中的“多任务困境” 你接手了一个远程协作平台的重构项目。核心需求之一是： 用户在参加视频会议时，需要同时查看文档、填写表单、甚至浏览资料 。但传统全屏模式下，一旦切出页面，视频就暂停或被遮挡，协作效率大打折扣。 产品经理提了个“看似简单”的需求： “能不能让参会人的小窗口一直浮在桌面上？像微信视频那样？” 这背后，正是 Document Picture in Picture API 的典型应用场景。 二、解决方...
JS篇之性能优化
很多时候面试官，面试你的时候会问你：同学你在项目中做过哪些性能优化呢？ 可能你是这样回答的： 1. 无用代码的删除，减小代码打的体积 2. 使用cdn加速 3. 图片压缩 4. 分包 5. 骨架屏 ........ 其实性能优化是个很宽泛的东西，可以从多方面进行入手 性能优化不是视觉体验打分，网上部分评判如下 | 核心指标 | 定义 | 优化方向 | | | | | | LCP（最大内容绘制） | 首屏最大内容加载完成时间 | 图片压缩...
堆栈/异步/执行栈连环问
1\. 数据类型分别存在哪里？ (1) ，b输出什么？ 关键点 ： 是 地址复制 ，不是深拷贝。a断开连接，b不受影响。 「Q1: 如果 ，a再访问会怎样？❓」 A1: a已为null，但若a未被赋null， 也会变成"改了"，因为指向同一堆对象！👉继续看？ 「Q2: 什么情况下b会变null？💥」 A2: 只有 才行。或者全局作用域被销毁（如页面关闭）。 「Q3: 这种机制叫什么？🤯」 A3: 按引用传递（pass by ref...
发布订阅模式 vs 观察者模式
发布订阅模式 vs 观察者模式：它们真的是一回事吗？ 你在学习前端开发时是否也曾困惑：发布订阅和观察者模式听起来如此相似，它们究竟有什么区别？为什么有些资料说它们是一回事，而实际代码实现却截然不同？今天，我们将揭开这两种模式的神秘面纱。 为什么我们需要设计模式？ 在深入探讨之前，让我们思考一个问题： 为什么我们需要这些设计模式？ 想象你正在开发一个复杂的前端应用，多个组件需要相互通信，但又不能紧密耦合在一起。就像城市中的交通系统，如果每...
按下回车后网页是怎么出来的
当你在浏览器中输入一个网址，比如 ，然后按下回车键，几秒钟后页面就完整地呈现在你眼前。这个看似简单的操作，背后其实是一整套精密协作的网络机制在起作用。本文将带你从基础讲起，理解 Web 开发中最重要的网络知识，帮助你搞清楚： 数据是如何从服务器传到你的电脑，并最终变成网页的？ 一、互联网通信的分层模型：OSI 七层模型 为了管理复杂的网络通信，工程师们提出了一个通用的参考模型—— OSI 七层模型 。它把整个通信过程划分为七个层次，每一...