先定义约束
浏览器范围、网络环境、内容结构和部署形态决定技术选择。
每篇内容只讨论一个明确问题:先给约束和判断,再给可以复用的实现结构。
好的实现先明确边界,再减少运行时依赖,最后用可重复的检查证明结果。
浏览器范围、网络环境、内容结构和部署形态决定技术选择。
优先使用平台能力和成熟引擎,让抽象服务于真实复杂度。
通过资源体积、响应头、语法检查和健康请求验证交付。
错误应直接暴露真实原因,日志与配置要能支持快速定位。
这里关注技术如何协作,而不是罗列越多越好。
实时图形、着色器与交互场景
浏览器平台能力与界面状态
工具链、服务端与自动化
静态交付、缓存与边界安全
KEEP SHIPPING
本站将持续整理个人开发过程中的具体问题、解决方案与复盘记录。
视觉背景的目标是支撑信息层级,不是占满设备算力。首先把渲染像素比限制在合理范围:Math.min(devicePixelRatio, 1.75),高密度屏幕无需无限放大工作量。
粒子数按视口面积分档;材质保持简单;标签页进入后台时暂停绘制;指针输入先平滑再传给相机。四项约束比增加后处理更能稳定体验。
检测 prefers-reduced-motion,在用户明确降低动态效果时停止动画。这既是无障碍要求,也是正确的资源策略。
动效应由状态驱动:元素尚未进入、已经可见、弹层打开、弹层关闭。状态明确后,CSS 负责视觉过渡,JavaScript 只负责切换状态。
滚动进入使用 IntersectionObserver,弹层使用原生 dialog,键盘关闭和焦点返回由单一入口处理。每个机制都能独立验证。
动画失败时不应破坏阅读顺序;语义结构、可聚焦控件和对比度始终先于视觉表现。
静态并不自动等于快速。字体、分析脚本、图片和 CDN 请求仍会阻塞首屏。预算应覆盖请求数量、传输体积、主线程工作量和缓存命中。
运行资源全部同源托管,避免页面是否可用取决于第三方域名。版本固定后再设置长期缓存,HTML 保持短缓存以便及时更新。
发布后检查状态码、内容类型、压缩、缓存和安全响应头,而不是只确认首页“看起来能打开”。
一个独立站点需要明确的监听端口和文档根目录,避免与既有虚拟主机共享隐含规则。首页使用 try_files 精确解析,不设置静默代理。
HTML 使用短缓存;固定版本的 JavaScript、图片与字体使用长期缓存。开启 gzip,并通过 nosniff、frame 限制和 referrer 策略收紧浏览器边界。
配置先经过 nginx -t,再平滑重载。最后从本机与公网分别请求健康地址,确认进程监听和网络入口一致。