前端技术

Astro 是一个面向「内容型网站」的 Web 框架,定位和 Next.js / Nuxt 类似,但设计目标相反:它假设你的页面大部分是静态内容,只有少数地方需要交互。博客、文档站、营销官网、个人主页

状态机（State Machine）是编程中经常遇到的一个概念。登录流程、表单提交、订单系统、动画播放，都可以用它来描述。 它的完整名称是 "有限状态机"（Finite State Machine，缩

前几天，我碰到一个登录问题。现象不复杂：SSO 登录成功了，但是系统内部页面不正常。继续往下看，系统菜单接口还提示“令牌不合法”。 一开始我以为这是接口问题。后来发现，不是。它更像是一个业务问题，只不

刚开始接触前端开发的时候，经常会听到这样一些说法： 这些话单独看，好像都没什么问题。但放在一起，就很容易乱。 Chromium 到底是不是内核？ Chromium 和 Chrome 是什么关系？ 这篇

前段时间，我写过一篇文章，聊了并发、并行和竞态之间的区别。其中有一个结论很重要： 但理解到这里，其实还不够。因为真正写业务代码的时候，我们经常会碰到一个疑问： 这篇文章，我们不讲太多抽象概念，就从一个

1、从一个 bug 说起 先看一段几乎每个前端都写过的代码： 上线后偶发反馈：曝光埋点上报的菜单是旧的。你盯着 await 看了十分钟，觉得没毛病——不是等它执行完了才往下走吗？ 问题在于 getMe

在做小程序或 H5 时，经常遇到这种需求： 常见做法有：导出多套 PNG、用 iconfont、filter 染色，或者本文要说的——mask + background-color。 它看起来像「改了

前阵子做后台的一个小需求：配置列表每行几张图片，点「编辑」传张新图、保存，列表就地刷新。功能看着平平无奇，结果测的时候发现传完图、保存成功，列表数据也重新请求过了，可那张图还是原来的图，有时候干脆裂了

一、背景与问题 为什么要换掉 iconfont 字体图标（iconfont）会把一整个 .ttf/.woff 字体文件打进包里。为什么这很浪费体积，有三层原因（容易被忽略）： 整套字形一起打包，用几个

一、缘由（问题现象） 一个群聊列表页，给列表容器 .group-list 设了背景色和 height: 100vh，期望不管怎么滑动，整页都是统一的浅灰底色。 实际效果： 第一屏背景色正常； 往下滚动

引子：一个"能用但不舒服"的写法 最近改一个小程序卡片，底部并排两个按钮——「更换订单」和「进入订单列表」，中间要留一点间距。我顺手写了： 效果没问题，设计稿也还原了。但盯着它看,总觉得哪里"硬":

刚接触 Vue 的时候，你可能会好奇：我明明刚改了数据，为什么 DOM 没有立刻变？Vue 为什么不直接同步更新？ 现在从浏览器渲染原理出发，讲一下 Vue 做这个设计决策背后的理由。 1、DOM 操

在写 Vue 项目的过程中，你可能遇到过这样的情况：明明刚刚改了数据，但紧接着读取 DOM 时，拿到的还是旧的状态。这时候就需要用到 $nextTick。 1、先理解 Vue 更新 DOM 的节奏 V

在前端性能优化的讨论中，Reflow 和 Repaint 是两个绕不开的概念。理解它们，才能真正明白为什么 Vue 要做异步批量更新，为什么频繁操作 DOM 会让页面卡顿。 1、浏览器是怎么把页面画出

视觉上可能看起来一样，但本质完全不同。要分两种情况说，因为「用不透明度」有两种写法。 1、先区分两种「不透明度」写法 2、核心区别：是否与「背景」发生混合 「深色 + 不透明度」是半透明的，最终呈现的

1、问题现象 在一个用 uni-app 开发的微信小程序页面里，有一个空状态页：当没有数据时，页面显示一张铺满屏幕的背景图，左上角叠了一行提示文字（比如「暂无数据」），下方还有一个通知条。 用户在 i

一个真实的困惑 某天设计师甩来一张 banner，我在访达里打开看信息： 尺寸：1920 × 1080 分辨率：72 × 72 我们 leader 常说「图片至少要 300 分辨率才清晰」。我一看 7

1、问题现象 在微信小程序开发中，你可能会遇到这样一个奇怪的现象： 两段代码唯一的区别是单位——rpx 和 px。而在普通 CSS 规则里，rpx 明明是可以正常使用的，为什么放进 @media 块里

1、需求场景 页面顶部有一张带渐变背景的产品图，导航栏初始透明叠在图上（白字白箭头）。 随着用户上滑、内容向上滚出可视区，当主体图的顶部刚要被导航栏遮住时，希望导航栏自动切换为： 背景：白色 标题文字

在开发过程中，我们经常遇到这样的需求：UI 设计稿上的某张图片，视觉上比容器"溢出"一点，看起来有一种放大、充盈的感觉。 直觉反应可能是直接改 width 或 height，但更优雅的方式是用 tra