发布订阅模式与观察者模式详解
发布订阅模式与观察者模式详解在前端架构与设计模式相关的面试与实践中，“发布订阅模式（Publish/Subscribe）”与“观察者模式（Observer）”经常被放在一起讨论。很多人会觉得两者“差不多”，但在实现方式和应用场景上，它们还是有本质区别的。 本文主要回答三个问题： 观察者模式与发布订阅模式分别是什么？ 两者的差异到底在哪？为什么很多资料会混着说？ 在前端工程中，如何实现和
JavaScript 中 0.1 + 0.2 不等于 0.3 的真相与解决方案
JavaScript 中 0.1 + 0.2 不等于 0.3 的真相与解决方案在前端开发中，你一定见过这段代码： 120.1 + 0.2 === 0.3; // false0.1 + 0.2; // 0.30000000000000004 看似简单的小数加法，却给出了“错误”的结果。这并不是 JavaScript 的 bug，而是 几乎所有使用 IEEE 754 双精度浮点数的语
手写Promise
手写Promise本文目标是：写出一个可运行、满足 Promise/A+ 核心行为的手写 Promise，并补齐 then/catch/finally 以及常用静态方法（resolve/reject/all/race/allSettled/any）。 一、Promise 要解决什么问题？在 Promise 之前，回调地狱（callback hell）通常长这样： 12345678910
CSS 布局指南
CSS 布局指南从早期的 float、table 布局，到 Flexbox 和 Grid 的普及，再到容器查询、逻辑属性等新特性，CSS 布局能力已经发生了质的飞跃。 一、了解布局传统布局方式存在明显局限： float：需要清除浮动，难以实现等高、居中等需求，语义不清晰。 table：布局与表格语义混淆，响应式改造成本高。 inline-block：存在空白间隙、垂直对齐等问题。 现代布局方
前端页面性能优化(四)
前端页面性能优化之运行时性能与交互流畅在前几篇中，我们主要解决了两个问题： 页面能不能尽快“看见东西”（首屏、图片、资源缓存等） 资源能不能“高效传输”（格式、压缩、CDN、缓存策略等） 但用户在真正使用页面时，还会碰到另外一类体验问题： 点击按钮后半天没反应。 滚动列表时卡顿、掉帧。 动画不连贯、拖动不跟手。 这就涉及到本文要引入的主题： 运行时性能与交互流畅：在页面已经加载完成之后，
前端页面性能优化(三)
前端页面性能优化之加载顺序与首屏体验前两文我们分别从图片和静态资源与缓存的角度，讨论了如何让页面“更轻、更省流量”。但真正决定用户主观体验的，还有一个更关键的问题： 用户到底在什么时候，能看到“有内容的页面”和“可以操作的页面”？ 本文章将重点围绕： 浏览器核心性能指标（FCP / LCP / TTI / CLS） 关键渲染路径与阻塞因素（CSS /
前端页面性能优化(二)
前端页面性能优化之静态资源与缓存策略从整个页面的视角来看，影响性能的远不止图片。CSS、JavaScript、字体文件、图标资源、接口响应等，都会直接决定用户能多快看到“可用的页面”和“可交互的页面”。 本文我们重点聚焦在：静态资源与缓存策略。 一、静态资源在性能中的角色从浏览器的视角，静态资源大致可以分为： HTML 文档：通常不缓存或短缓存，承载结构与入口。 CSS 样式：决定首屏布局与样
前端页面性能优化(一)
前端页面性能优化之图片资源优化在前端性能优化中，图片往往是页面体积最大的资源。在实际项目中，一个未经过优化的图片资源，往往比 JavaScript、CSS 加起来还要大。 本文将从 图片格式的选择、浏览器支持、工程实践 等角度，系统总结前端页面中 图片格式优化的思路与落地方案。 一、为什么图片格式会影响性能？图片对页面性能的影响主要体现在： 📦 资源体积大：图片通常占页面总资源的 50%～8
