工程笔记
写给真正
交付技术栈的人
关于 React、Node.js、TypeScript 与 AI 的文章。有译文正文时显示译文。没有时显示英文，并注明这一点。
标签：Web Performance
《Bun上的可重复利用岛屿：陶器框架的设计启示》
以服务器优先的框架如何将 HTML 设为默认值，将 JavaScript 限制在可恢复的独立单元中，并处理静态导出、错误、CSP 以及部署问题。
阅读约 14 分钟使用 content-visibility 和 contain-intrinsic-size 跳过屏幕外渲染
了解内容可见性功能如何通过自动裁剪来降低长页面的服务器渲染成本，为何必须使用“包含内在尺寸”选项，以及它与虚拟化技术的区别。
阅读约 12 分钟使用 injectAsync 按需拆分大型 Angular 服务代码
为何静态注入的服务会将其依赖的库一并纳入 Angular 主程序包中，以及 injectAsync 是如何根据用户操作意图实现服务的延迟加载，包括条件加载功能。
阅读约 6 分钟以“失效”视角思考：一种关于浏览器如何渲染页面的实用模型
通过思考每项变更会使哪些内容失效，来学习理解浏览器的渲染机制，这些方面包括布局重排、绘制开销以及合成、水合和流式渲染等。
阅读约 11 分钟从样式表到屏幕：CSS在浏览器处理流程中的位置
从下载到像素：深入理解CSS——DOM、CSSOM与渲染树的构建方式，样式级联的运行过程，以及哪些样式来源会为每个元素竞争优先权。
阅读约 8 分钟从66％到185像素：浏览器在布局前如何解析CSS值
追踪 CSS 值从声明、层叠、指定、计算、使用到实际应用的各个阶段，了解为何相对单位以及 rem 转换技巧会呈现那样的行为。
阅读约 8 分钟保持页面响应性：何时将CPU任务移至Web Worker中处理
了解为何复杂的循环会导致浏览器界面卡顿，Web Worker消息机制如何分担这些工作负载，以及如何判断某项任务是否真的需要使用Worker。
阅读约 12 分钟重排、重绘、合成：每项CSS更改会给浏览器带来多少负担
跟随HTML与CSS的流程，了解DOM、CSSOM、布局、绘制及合成过程，掌握为何宽度变化比颜色变化更耗资源，以及如何避免布局抖动。
阅读约 16 分钟资源发现而非传输：通过HTTP/3预加载React应用
在 HTTP/3 协议下，React 应用中的瓶颈在于资源发现延迟，而非传输过程。preloadModule、preinit、Early Hints 以及分块传输技术能够解决这一问题，这些方案都是为服务端渲染而设计的。
阅读约 19 分钟
常见问题
关于这些文章
是。每篇都是为本站准备的英文原创改写。结构与代码跟随来源；正文重写并做过重合检查。
英文是来源。只有存在该语言的正文译文时才显示其他语言。缺失或空白的译文仍是英文，包括在本地化网址上。
草稿经编辑后进入发布队列。站点导入只收录新的或有变更的 slug，不会重复添加。
示例仅供说明。上线前请核对技术栈与许可。若需交付，请发来简报。